Askmike.org

Op de homepagina van deze website staat al een tijdje mijn e-mail adres, sinds een paar weken krijg ik hier dan ook veel spam op binnen. Dit komt omdat er mail crawlers zijn die het web crawlen opzoek naar e-mail adressen. Je kan natuurlijk je e-mail adres niet online zetten maar dit vind ik zelf niet praktisch en ik wil liever geen contact formulier op mijn website.

De meeste crawlers parsen alleen html, dit betekent zolang je geen e-mail in je html code hebt staan je veilig bent voor die crawlers. Een crawler moet snel zijn en om deze reden wordt Javascript vaak genegeerd. Javascript door spitten (of renderen) opzoek naar e-mail adressen kost veel extra tijd. Dit feit kunnen we gebruiken om onze bezoeker wel te voorzien van ons e-mail adres maar crawlers buiten te sluiten.

Stel je voor dat je een plaatje hebt die door linkt naar je e-mail adres, dit kan je via jQuery heel makkelijk realiseren.

HTML

Javascript

$(document).ready(function() {
    $('a.email').attr("href", "mail"+"to:jantje"+"@gmai"+"l.com");
});

Als je je e-mail adres in een alinea hebt staan kan je het zo oplossen:

HTML

    Hoi ik ben jantje en je kan me mailen op
    
        mijn e-mail adres
     .

Javascript

$(document).ready(function() {
    $('span.email').text('jantje'+'@'+'gmail'+'.com');
});

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore. Also note that it is almost always faster to load one (minified) file with all your javascript over your whole site.

Als je op een gegeven moment merkt dat je heel veel JavaScript plugins gebruikt kan je gaan denken om ze alleen in te laden wanneer nodig met Ajax. Als je met een CMS werkt waar je elke plugin niet op elke pagina nodig hebt kan je hier gebruik van maken om je website sneller te maken.

jQuery biedt voor dit doeleinde een makkelijke functie waarmee je dit kan bereiken:

$(document).ready(function() {
    $.getScript('link naar script',function(){
        //uit te voeren functie
    }
});

Met de functie getScript kan je een script inladen alsof je hem in de html had aangeroepen met , je houdt natuurlijk wel de dynamiek die JavaScript biedt om eerst te checken of je de plugin wel echt nodig hebt.

De uit te voeren functie is niet verplicht maar deze is vaak handig om gelijk een call te doen naar een plugin die je net hebt ingeladen, deze functie wordt pas uitgevoerd zodra het script helemaal is ingeladen.

In mijn blog gebruik ik een JavaScript gebaseerde syntax highlighter die mijn code (zoals hierboven) mooi opfleurt en kleurt. SHJS heb ik alleen op pagina’s nodig waar ik überhaupt code laat zien. Ik zet altijd al mijn code in

$(document).ready(function() {
    if ($('pre').length > 0))
    {
        $.getScript('shmain.min.js',function(){
                shhighlightDocument('/shjs/', '.min.js');
            })
    }
});

Ik moet ook de lengte van pre checken om te verifieren dat hij er echt is. jQuery geeft namelijk altijd een object terug, dit is de makkelijkste manier om te checken iets aanwezig is op de pagina.

Ik ga nog een stapje verder door alleen te checken of er een pre is op een post pagina, en niet op alle andere plekken van mijn website (WordPress only)

if (is_single()) {
    echo '';
}

Onlangs ben ik van thema geswitched in WordPress. Mijn vorige thema ging anders om met afbeeldingen dan mijn huidige thema, hierdoor heb ik een groot aantal posts met afbeeldingen erin die niet gecentreerd zijn terwijl dit in mijn nieuwe thema wel zo wenselijk is.

Als je normaal een afbeelding invoegt en hem niet centreert genereert WordPress deze code:

Als je hem wel centreert via de wordpress backend krijg je dit:

Als je alles wilt centreren ongeacht hoe het is ingesteld moet je dus alle

’s die een plaatje bevatten centreren. CSS is nog niet in staat om dit te doen dus wendde ik me tot jQuery:

$(document).ready(function() {
    $("p:has(.alignnone)")
    .add("p:has(.alignnone)")
    .add("p:has(.alignright)")
        .addClass("center");
});

(Houdt er wel rekening mee dat je jQuery wel ingeladen moet hebben)

Ik voeg dynamisch de klasse center toe, in mijn CSS heb ik een regel waar ik de de klasse center centreer:

.center {
    text-align:center;
}

Deze tutorial is gericht op Interactieve Media studenten aan de HvA. Ik maak namelijk gebruik van de stap server die alleen maar voor IAM studenten aan de HvA beschikbaar is.

Deze tutorial is gemaakt op basis van deze tutorial van Layar zelf, in de mijne ga ik ook in op een database maken op de stap server en hoe je een tabel maakt en de data er in zet.

Hier ga ik behandelen hoe je heel snel je eigen layer opzet, ik ga redelijk snel door de theorie heen want deze tutorial is gericht op het zo snel mogelijk realiseren van je layer.

more

Bij het vak ontwerptechnieken (van het P jaar interactieve media) moeten we oa. wireframes maken. Uiteindelijk moeten we van elk uniek scherm een wireframe hebben gemaakt. Dus hoe doe je dat zo goed (en het liefst ook zo snel) mogelijk?

Dit plaatje hierboven heb ik gemaakt met een online tool gemaakt om wireframes te maken. Dit was even snel een voorbeeldje ter illustratie wat je allemaal kan maken. Het voordeel van deze tool is dat alles heel erg sketchy is, wat iedereen duidelijk maakt dat je nog niet in een designfase zit en het niet om de vormpjes, lettertypes en kleuren gaat. Dit voorbeeld hierboven heb ik in enkele minuten gemaakt.

De tool is webbased wat betekent dat het op elk platform draait, zolang je maar flash hebt. Hier kan je hem bereiken:

http://builds.balsamiq.com/b/mockups-web-demo/

Als je iets wilt opslaan kan je dat doen via mockup – export, je krijgt dan code die je later weer kan importeren om terug te gaan waar je gebleven was. Als je klaar bent kan je er een plaatje van maken (of printscreenen).