donderdag 29 augustus 2013

Google Analytics

Google analytics is een analyseprogramma van google. Het verzameld gegevens van uw website en verwerkt deze in grafieken. Tijdens het leren voor mijn Google Analytics examen heb ik hier een serie van 3 blogs over geschreven:. Momenteel ben ik nu in het bezit van een Google Analytics certificaat.

2. Hoe interpreteert u Google Analytics rapporten?

3. Zet u Google Analytics al in om uw website te verbeteren?

Al deze blogs zijn op startersniveau. Wilt u dieper in op de stof, dan raad ik u aan om het volgende boek te lezen:


E-Boek: Google analytics Understanding Visitor Behavior
Uitgever: O’REILLY
Schrijver:  Justin Cutroni

Design kleuren voor beginners


In mijn designkleuren voor beginners blog leest u hoe designkleuren ons kunnen beïnvloeden. Onderwerpen die ik in deze blog besprek zijn:

·         Primaire, secundaire en tertiaire kleuren
·         Kleurencirkel
·         Simultaancontrast
·         Complementair kleurcontrast
·         Kleur tegen kleur contrast
·         Warme en koude kleuren
·         Additieven kleuren (RGB)


Nieuwsgierig naar de blog? Lees hem dan snel.

Basis blog: Bestaande Combo Link Box aanpassen (javascript)

Deel 2

Er zijn tegenwoordig veel bestaande scripts die u gewoon kunt overnemen en aanpassen. Als u weet welke delen van de code u aan kan passen is het erg eenvoudig om een code eigen te maken. In dit geval pakken we een script van javascriptkit.com om aan te passen. Maak nu een kopie van het script hier onder:


<!DOCTYPE html>
<html>
<head>
<script>
function displayDate()
{document.getElementById("demo").innerHTML=Date();}
</script>
</head>
<body>
<form  name="take">
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%"><select name="take2" size="5">
        <option selected value="http://www.javascriptkit.com">JavaScript Kit frontpage</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">JavaScript Tutorials</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Free JavaScripts</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Web Building Tutorials</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Free Java Applets</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">FrontPage Tutorials</option>
        <option value="http://www.cnn.com">CNN</option>
        <option value="http://www.microsoft.com">Microsoft</option>
        <option value="http://www.netscape.com">Netscape</option>
      </select>
<script>
<!--
/*Combo Link Box script- By JavaScript Kit
(www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/
function taking()
{location=
document.take.take2.options[document.take.take2.selectedIndex].value}
//-->
</script>
</td>
    </tr>
    <tr>
      <td width="100%"><div align="center"><center><p><input type="button"
      value="Take Me There!" name="B1" onClick="taking()"></td>
    </tr>
  </table>
</form>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
</body>
</html>

U ziet nu dit resultaat:

Dit is het bestaande javascript wat wij aan gaan passen. We beginnen met het zoeken van de tekst uit de Combo Link Box. Die kunnen we vinden in het deel van de code wat hier onder staat. Alles tussen de opening en sluiting van de option is de tekst die u ook echt ziet. Dik gedrukt in het voorbeeld.:

        <option selected value="http://www.javascriptkit.com">JavaScript Kit frontpage</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">JavaScript Tutorials</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Free JavaScripts</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Web Building Tutorials</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Free Java Applets</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">FrontPage Tutorials</option>
        <option value="http://www.cnn.com">CNN</option>
        <option value="http://www.microsoft.com">Microsoft</option>
        <option value="http://www.netscape.com">Netscape</option>

Deze code gaan we nu wijzigen door de dik gedrukte onderdelen in de Combo Link Box te vervangen voor onze eigen tekst. Bijv:

       <option selected value="http://www.javascriptkit.com">Blogger vivarium</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">Blogger creatief</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Vivariumfotografie</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Typografie</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Air display</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">Corel office</option>
        <option value="http://www.cnn.com">Microsoft office</option>
        <option value="http://www.microsoft.com">Javascript</option>
        <option value="http://www.netscape.com">Behance</option>

U ziet nu dit resultaat:



Nu gaan we zoeken naar de verwijzende links. Deze staan in de aanhef voor de naam van de links in de Combo Link Box. Deze ziet u hier dikgedrukt:

       <option selected value="http://www.javascriptkit.com">Blogger vivarium</option>
        <option value="http://www.javascriptkit.com/javaindex.htm">Blogger creatief</option>
        <option value="http://www.javascriptkit.com/cutpastejava.htm">Vivariumfotografie</option>
        <option value="http://www.javascriptkit.com/howto/webbuild.htm">Typografie</option>
        <option value="http://www.javascriptkit.com/java/javafront.htm">Air display</option>
        <option value="http://www.javascriptkit.com/frontpage.htm">Corel office</option>
        <option value="http://www.cnn.com">Microsoft office</option>
        <option value="http://www.microsoft.com">Javascript</option>
        <option value="http://www.netscape.com">Behance</option>

Nu gaan we ze linken naar de juiste pagina’s:

<option selected value="http://vivariumlovers.blogspot.nl/">Blogger vivarium</option>
        <option value="http://sylvanainfo.blogspot.nl/">Blogger creatief</option>
        <option value="http://vivariumlovers.blogspot.nl/2013/07/10-tips-voor-vivariumfotografie.html">Vivariumfotografie</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/typografie-voor-doe-het-zelvers.html">Typografie</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/gebruik-uw-tablet-als-tweede-scherm-met.html">Air display</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/corel-office-versus-microsoft-office.html">Corel office</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/07/corel-office-versus-microsoft-office.html">Microsoft office</option>
        <option value="http://sylvanainfo.blogspot.nl/2013/08/basis-blog-javascript-in-html.html">Javascript</option>
        <option value="http://www.behance.net/sylvanastienstra">Behance</option>

In wat u in de Combo Link Box ziet is niks veranderd, maar de functies van het doorlinken zijn wel veranderd. U kunt nu de nieuwe functies van de Combo Link Box uitproberen. 

Nu we de Combo Link Box hebben aangepast kunnen we ook de link nog een eigen naam geven. De tekst op de link is nu “Take Me There!” en dit gaan we veranderen naar “Breng mij”. Hiervoor moeten we eerst “Take Me There!” opzoeken in de code. Die vinden we hier:

</script>
</td>
    </tr>
    <tr>
      <td width="100%"><div align="center"><center><p><input type="button"
      value="Take Me There!" name="B1" onClick="taking()"></td>
    </tr>
  </table>
</form>

Deze veranderen wij nu in Breng mij:

</script>
</td>
    </tr>
    <tr>
      <td width="100%"><div align="center"><center><p><input type="button"
      value="Breng mij" name="B1" onClick="taking()"></td>
    </tr>
  </table>
</form>

U ziet nu dit resultaat:


U hebt nu uw eigen Combo Link Box aangepast door de juiste wijzigingen in de code. Als u meer wilt weten over hoe u javascript moet lezen, dan kunt u ook het eerste deel lezen. 

woensdag 28 augustus 2013

Basis blog: Javascript in HTML



Deze blog is bedoeld voor mensen die interesse hebben in het gebruik van Javascript in een HTML document, maar nog niets van HTML of javascript weten. In deze blog begin ik dan ook echt met de basis: het simpelweg leren begrijpen van de code. We gaan hierbij kijken naar onderdelen van de code en wat deze betekenen.

De onderdelen die ik zal bespreken:
·        <html>
·        <head>
·        <title>
·        <body>
·        <script>
·        <h1> t/m <h6>
·        <p>
·        <li>
·        <ul>
·        <ol>

Openen en sluiten van een code
Elke willekeurige code in javascript en HTML word geopend met <waarde van de code> en gesloten met </waarde van de code>. Het stuk at tussen deze twee onderdelen in staat is de tekst die passend is bij de desbetreffende code. Bijv.: De h1 word geopend met <h1>en eindigt op </h1>. In dit voorbeeld is “en eindigt op” de h1.

<html>
Opening van een HTML document.

<head> <title>
De head is de plaats waar alle hoofdonderdelen in komen te staan. Het enige wat verplicht in de head zit is <title>, wat staat voor de titel  van het document.

<body>
De body bevat alle content van het document. Dit zijn onder andere uw tekst, foto’s, hyperlinks en lijsten.

<script>
Met script word een script aangegeven in een HTML pagina. Dit kan bijv. javascript zijn. Tussen de script opening en sluiting staat dan het hele script.




<h1> 
De h1 is de kop titel op een pagina


<h2> t/m <h6>
H2 t/m h6 worden gebruikt om een duidelijke hiërarchie te creëren. H2 word gebruikt voor subkoppen en met h3 t/m h6 kunt u dieper in gaan op de tekst. Deze gebruikt u bijv. voor een quote en belangrijke woorden in de tekst. U zult niet altijd alle h-waardes gebruiken, maar ze kunnen u helpen om uw teksten overzichtelijker te maken voor uw lezers.

<p>
P staat voor paragraaf. Om de verschillende paragrafen te scheiden gebruikt u voor elke paragraaf <p> en na elke paragraaf </p>. Daartussen kunt u elke willekeurige tekst plaatsen die u wilt. 

Bijv. als je een tekst hebt met een h1, twee maal een h2 en 3 paragrafen dan typt u het volgende:

<h1> Dit is een javascript kop </h1>

<h2> Dit is een subkop </h2>
<p>Dit is mijn eerste paragraaf: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus erat, dapibus egestas dolor nec, ornare tincidunt dui. Maecenas luctus orci eget tortor gravida consequat. Aliquam vestibulum magna nec massa consectetur volutpat.</p>

<h2> Dit is een subkop </h2>
<p>Dit is mijn tweede paragraaf: Aliquam vestibulum magna nec massa consectetur volutpat. Nullam consequat mauris arcu, sit amet fermentum enim vehicula pellentesque. Nunc rhoncus molestie vehicula. Phasellus vulputate consectetur fermentum. Proin ullamcorper vitae elit nec luctus. Praesent sollicitudin, nulla et tincidunt eleifend, neque justo elementum metus, a tincidunt magna nisl sit amet arcu. Maecenas elementum tellus id urna tristique porta. Proin fringilla gravida volutpat. Nullam a pulvinar turpis. Nullam pretium bibendum nunc, quis feugiat eros suscipit a. Nam rhoncus nec sem ut scelerisque. Phasellus erat dolor, varius et gravida vitae, congue ut mauris. Pellentesque gravida justo non venenatis faucibus.</p>

<p>Dit is mijn derde paragraaf: Morbi mattis ullamcorper purus, at tristique nibh rhoncus hendrerit. Nam eu lorem sed dui malesuada suscipit vel quis tortor. Curabitur dapibus, mi a pharetra lobortis, purus enim convallis purus, quis hendrerit diam purus vitae diam. Maecenas diam libero, luctus eget tempus sed, mattis id nunc. Suspendisse euismod arcu in lorem mattis, vel convallis metus tincidunt. Aenean at risus ac est vulputate eleifend. Integer pulvinar diam vitae est viverra, eget suscipit dolor faucibus. Cras feugiat varius dictum.</p>

U zult dan het volgende resultaat krijgen:

Dit is een javascript kop

Dit is een subkop
Dit is mijn eerste paragraaf: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus erat, dapibus egestas dolor nec, ornare tincidunt dui. Maecenas luctus orci eget tortor gravida consequat. Aliquam vestibulum magna nec massa consectetur volutpat.

Dit is een subkop
Dit is mijn tweede paragraaf: Aliquam vestibulum magna nec massa consectetur volutpat. Nullam consequat mauris arcu, sit amet fermentum enim vehicula pellentesque. Nunc rhoncus molestie vehicula. Phasellus vulputate consectetur fermentum. Proin ullamcorper vitae elit nec luctus. Praesent sollicitudin, nulla et tincidunt eleifend, neque justo elementum metus, a tincidunt magna nisl sit amet arcu. Maecenas elementum tellus id urna tristique porta. Proin fringilla gravida volutpat. Nullam a pulvinar turpis. Nullam pretium bibendum nunc, quis feugiat eros suscipit a. Nam rhoncus nec sem ut scelerisque. Phasellus erat dolor, varius et gravida vitae, congue ut mauris. Pellentesque gravida justo non venenatis faucibus.

Dit is mijn derde paragraaf: Morbi mattis ullamcorper purus, at tristique nibh rhoncus hendrerit. Nam eu lorem sed dui malesuada suscipit vel quis tortor. Curabitur dapibus, mi a pharetra lobortis, purus enim convallis purus, quis hendrerit diam purus vitae diam. Maecenas diam libero, luctus eget tempus sed, mattis id nunc. Suspendisse euismod arcu in lorem mattis, vel convallis metus tincidunt. Aenean at risus ac est vulputate eleifend. Integer pulvinar diam vitae est viverra, eget suscipit dolor faucibus. Cras feugiat varius dictum.

<li> <ul> <ol>
Door middel van li kunt u makkelijk een onderdeel javascript lijst weergeven. U kunt het gebruiken bij <ul> (Unordered list) en <ol> (Ordered list). Bij een ul staan er punten voor elk onderwerp in een lijst en bij ol zijn dit nummers.

Bijv.: u typt een ul in:
<ul>
<li> Blog 1</li>
<li> Blog 2</li>
<li> Blog 3</li>
<li> Blog 4</li>
</ul>

U ziet:
·         Blog 1
·         Blog 2
·         Blog 3
·         Blog 4

Bijv.: u typt een ol in:
<ol>
<li> Blog 1</li>
<li> Blog 2</li>
<li> Blog 3</li>
<li> Blog 4</li>
</ol>

U ziet:
1.       Blog 1
2.       Blog 2
3.       Blog 3
4.       Blog 4

Nu u weet wat de besproken onderdelen betekenen kunt u zelf aan de slag met het aanpassen van bestaande javascript bestanden. Deze zijn vrij te downloaden om te oefenen. Wilt u direct zien wat uw aanpassingen voor effect hebben op de javascript code maar heeft u zelf geen geschikt programma, klik dan hier.