Web Tutorials » Tutorials

Bescherm je e-mail adres tegen SPAM robots

Cicco — Tue, 24 Mar 2009 14:14:54 +0000

Ook al voorgehad dat je het nieuwe e-mail adres van je bedrijf, organisatie of klant op de website plaatst en dat je binnen de week gescand bent door internet’s meest irritante spamrobots? Zonder dat je het beseft steekt je mailbox vol met mailtjes over viagra, allerhande verleningen en zogezegde internet bedrijfjes.

Maar het moet toch mogelijk blijven om je e-mail te tonen op je website zonder al deze spam te ontvangen, niet?

Nu ben ik overlaatst een handig anti-spam jQquery script tegen gekomen dat mij tot nu toe al goed geholpen heeft.

Het is een script waarmee je het e-mail adres op deze manier in je code zet :

yourname|yourcompany:net

En het op deze manier toont als je de pagina oproept :

yourname@yourcompany.net

Een kleine tutorial hoe je dit in je website implementeert :

Stap 1 :

Download de jQuery plugin.
Na het unzippen heb je 1 javascript bestand genaam : jquery.spemail.1.0.js

Stap 2 :

Maak in de head van je pagina een verwijzing naar het javascript bestand dat je gedownload hebt. Zoals hieronder :

Stap 3 :

Maak opnieuw in de head van je pagina een verwijzing, nu naar de laatste versie van het jQuery framework. We gebruiken hiervoor de code die Google voorziet. Voor degene die het nog niet weten, Google heeft een verzameling van de laatste javascript frameworks online staan welke je mag gebruiken in je website. We doen dit zoals hieronder :

Stap 4 :

In deze stap moeten we nog een laatste stukje javascript plaatsen in de head van de pagina welke ervoor zorgt dat het e-mail adres wordt omgevormd. En dat is de volgende code :

Stap 5 :

Het enige wat we nu nog moeten doen is het e-mail adres in de body van de pagina zetten en dat doen we op deze manier :

yourname|yourcompany:net

Zoals je kan zien komt de id #email overeen met degene in het scriptje.

Overzicht van de pagina :

Als je alles gedaan hebt zoals hierboven omschreven zou je pagina er op deze manier moeten uitzien :

[

Bescherm je e-mail adres tegen SPAM

E-mail: yourname|yourcompany:net

Als je de pagina van het script Fighting spam from inline email addresses using JQuery Plugin 1 gaat bekijken, zie je dat er 3 verschillende manieren zijn om je e-mail te schrijven in je code.

Hierboven werd 1 methode gebruikt om de tutorial te tonen. De andere 2 kan je bekijken in de code van de voorbeeld pagina.

Alle drie hebben ze hetzelfde effect, aan jou de keuze welke je wil gebruiken.

Op korte termijn bekeken helpt het script, laten we hopen dat het op lange termijn niet achterhaald wordt en dat de spam grotendeels achterwege mag blijven.

Laat gerust in de comments weten indien je het ook gebruikt hebt. Ook indien je een nog betere oplossing weet.

Nog vragen? Bezoek het forum...

Ronde hoeken met jQuery Corners

Cicco — Fri, 12 Dec 2008 14:23:36 +0000

Ronde hoeken maken… Het blijft een doorn in het oog voor velen. Hoe maak je het? Hoe voeg je het in je website? Moet je images gebruiken? Of enkel CSS?

Zelf heb ik al meerdere oplossingen uitgeprobeerd en met allerlei scripts liggen knoeien. In deze tutorial leg ik uit hoe je heel makkelijk en zonder gebruik van images ronde hoeken kan maken. Dit script heeft mij tot nu toe het meest kunnen bekoren.

Het script, jQuery Corners, is gebaseerd op jQuery en gebruikt, zoals ik eerder aanhaalde, geen images. Ook fijn om te weten is dat je voor zowel divs, tabellen, buttons en dergelijke kan gebruiken.

Downloaden van het script

Om het script werkend te krijgen dien je 2 downloads te doen :

Installeren

Na het unzippen van beide files heb je 3 Javascript files :

jquery-1.2.6.min.js
jquery.corners.js
jquery.corners.min.js

Kopieer deze files en plaats ze in je webproject. Zelf maak in mijn webprojecten altijd een mapje ‘js’ aan om Javascripts in te zetten, dit is uiteraard niet verplicht.

Plaats nu een verwijzing in de head van elke pagina waar je dit script wil toepassen. Voorbeeld :

Script toepassen

Op de site van jQuery Corners staan heel duidelijke voorbeelden maar ik leg hier nog even uit hoe je dit toepast.

Het eerste wat je moet doen is je div een class meegeven. Dit doe je door aan je div class=”rounded” toe te voegen.

Een div genaamd ‘header’ ziet er dan zo uit :

Header

Het is belangrijk dat bij het toepassen van dit script de div genoeg ruimte heeft, zonder hoogte kan er namelijk geen ronde hoek aangemaakt worden. Voor dit voorbeeld voeg ik een padding toe van 10px, Je kan gerust de CSS in een externe stylesheet zetten.

De div header ziet er nu uit :

Header

Plaats nu onder de div de volgende Javascript regel of plaats deze regel in de head van je pagina:

De div ziet er nu als volgt uit :

Header

Met deze code krijg je het resultaat welke je ziet op de website
van jQuery Corners :

Wil je nu de hoeken een waarde meegeven van 10px dan voeg je de waarde {10px} aan je class. De code van een div met ronde hoeken van 10 px ziet er alsvolgt uit :

Header

Met deze code krijg je het resultaat welke je ziet op de website
van jQuery Corners :

In deze tutorial plaats ik de Javascript regel onder de div omdat dit op toepassing is op 1 div. Indien je dit script op meerdere divs wil toepassen dan kan je gerust deze javascript regel in de head van je pagina zetten. Het gaat over deze regel :

Even een korte samenvatting :

2 scripts downloaden.
Javascripts in je webproject plaatsen.
Javascript verwijzingen plaatsen.
Class toevoegen.
Waarde van de ronde hoeken meegeven

Op de site van site van jQuery Corners staan nog meer voorbeelden van divs, buttons, opties, enz. Zeker eens kijken zou ik zeggen.

Zelf vind ik dit een zeer makkelijk script om toe te passen zonder dat er met Photoshop moet gewerkt worden en een minimaal aan CSS.

Gebruik alle fonts je zelf wil in je website met Flir

Cicco — Wed, 10 Dec 2008 14:04:44 +0000

Flir, Facelift Image Replacement, is een script om welke font dan ook in je website te gebruiken zonder dat je gebruik moet maken van een image gemaakt in Photoshop of Fireworks.

Je kan door middel van enkel lijnen code je tekst omzetten naar een font naar wens, elk font die je wil.

Heel handig als je denkt in termen van zoekmachine optimalisatie. Nu kan de zoekmachine de tekst inlezen en komt hij geen onleesbare image meer tegen.

Een tutorial hoe je dit implementeert in je website.

Wat heb je nodig?

Een server met PHP ondersteuning : PHP 5 is aanbevolen.
Een server met GD.
ImageMagick op de server is nodig voor bepaalde fonts.

Downloaden en plaatsen van bestanden

Download facelift, deze bestanden heb je nodig.

Eens je deze download binnen hebt pak je het bestand uit met het programma Winrar en plaats je de map in de root van je directory. Dit is waar je index pagina staat, in normale omstandigheden.

Fonts installeren

Download de fonts welke je wil gebruiken en voeg deze bij in de map ‘fonts’.

Config-flir.php instellen

Nu je bestanden uitgepakt zijn op de juiste plaats staan open je de file config-flir.php en zie je enkele voorwaarden staan die je naar eigen smaak kan aanpassen. Indien je de ‘define’ voorwaarden wil aanpassen, is niet verplicht, kan je best de documentatie van Flir zelf doornemen. Voor alles is er een uitgebreide uitleg voorzien.

Belangrijkste in dit document is dat je moet aangeven welke fonts je gaat gebruiken. Dat doe je met de volgende regels

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating'] 	= 'ArtOfIlluminating.ttf';
$fonts['okolaks'] 		= 'okolaksBold.ttf';
$fonts['wanta'] 			= 'wanta_091.ttf';

Dit is een array van fonts. Wil je bijvoorbeeld de font webtutorials.ttf(is enkel een voorbeeld, deze font bestaat niet) gebruiken in je website voeg dan volgende regel toe :

$fonts['webtutorials'] 	= 'webtutorials.ttf';

De naam tussen de aanhalingstekens in de $fonts array gaan we later nog gebruiken in de CSS om de font op te roepen.

Iets lager zien we de volgende code staan :

// The font will default to the following (put your most common font here).
$fonts['default'] 		= $fonts['okolaks'];

In deze regel kan je aangeven welke font standaard wordt gebruikt als er geen font wordt aangeroepen.

Meer moet je niet aanpassen in deze file. De belangrijkste zaken zijn dus

- Het toevoegen van fonts welke je wenst te gebruiken.
- Een default font aangeven als er geen wordt aangeroepen.

Flir.js instellen

In de file flir.js moet je het pad ingeven naar de facelift map welke je in de root van je directory hebt geplaatst.

path: 'pad/naar je facelift map'

Flir.js oproepen

Om Flir te doen werken moet je in de head van elke pagina een Javascript regel plaatsen om flir.js aan te roepen. Plaats deze regel in de head van de pagina :

Vergeet bij bovenstaande code niet het pad aan te passen.

Javascript toevoegen

Heel belangrike stap. Voeg volgende code toe juist boven de afsluiting van je body, , zonder de juiste plaatsing van deze code zal het niet werken. :

Tekst opmaken

Flir zal standaard alle teksten welke tussen headings(alleen headings) staan automatisch aanpassen, van H1 tem H5. Wil je dit aanpassen dan kan je dit aanpassen in de bovenstaande Javascript welke we juist hebben toegevoegd boven de afsluiting van de body. Met deze regel :

    FLIR.auto();

Indien je wil dat de opmaak enkel op de ‘h2′ heading wordt toegepast dan ziet deze code er zo uit :

    FLIR.auto('h2');

Enkel op ‘h1′, ‘p’ en ‘em’ dan ziet de code er zo uit :

    FLIR.auto('h1', 'p', 'em');

Je kan ook een element toevoegen gecombineerd met een div. Op deze manier wordt dit element enkel omgevormd in een bepaalde div. Bv :

    FLIR.auto('p#header');

CSS aanpassen

Nu alle instellingen zijn ingegeven moet de font nog aangeroepen worden via CSS.

h1 { font-family: illuminating, Arial, sans-serif; }
p { font-family: okolaks, Arial, sans-serif; }
em { font-family: webtutorials, Arial, sans-serif; }

De eerste font aangegeven in de font-family is de font welke je hebt geïnstalleerd en geconfigureerd in je config-flir.php file. Herinner je je de naam die je ingegeven hebt in de array nog? Wel, dit is nu degene die aangeroepen wordt.

Alles is nu ingesteld en aangepast. Het lijkt een hele boterham maar dat is het helemaal niet, in principe moet je enkel volgende dingen doen :

Gewenste fonts downloaden en uploaden in de map fonts.
Config-flir.php aanpassen.
Flir.js aanpassen.
2x javascript invoegen en eventueel aanpassen.
CSS aanpassen.

Ben benieuwd of er iemand mee gaat experimenteren en hoop hier enkele mooie resultaten te zien verschijnen. Plaats gerust een link naar je Flir toepassing.

IE6 – PNG Hack

Cicco — Wed, 27 Aug 2008 08:23:06 +0000

Tegenwoordig wordt er bij de opmaak van een website veel gebruik gemaakt van transparante PNG’s welke in Photoshop zijn aangemaakt. Nu, met nog altijd menig wat IE6 gebruikers, is dat een probleem mits deze verouderde browser geen transparante PNG’s ondersteund.

Ofwel kan je tegen je bezoekers zeggen dat ze hun browser moeten upgraden naar een recente en fatsoenlijke browser ofwel ga je een PNG hack toepassen zodat dit probleem in IE6 van de baan is.

Met optie 1 ga je je uiteraard niet mee bezighouden dus opteren we voor optie 2. Hoe implementeer je zoiets? Welke hack gebruik je hiervoor?

Een kleine tutorial hierover.

Eén van de beste PNG hacks op internet is het script supersleight van 24 ways.

Stap 1 :

Download het script, na het uitpakken heb je volgende mappenstructuur :

supersleight-min.js
supersleight.js
x.gif

Stap 2 :

Kopieer deze 3 items in de root van je directory.

Stap 3 :

Kopieer onderstaande code in de head van je pagina waar je transparante PNG’s gebruikt.

Dit wil zeggen dat het script “supersleight-min.js” dient toegepast te worden indien de browser lager of gelijk is aan IE6.

Zo… Meer is het niet. Nu kan je met een gerust hart werken met transparante PNG’s, welke van veel betere kwaliteit zijn dan GIF’s.

Flash tutorial – Advanced photo presentation

Cicco — Mon, 19 May 2008 15:42:55 +0000

Met de Flash tutorial – Advanced photo presentation kan je op een simpele manier een mooie en moderne foto presentatie / gallerij maken in Flash en zonder actionscript. Je kan deze dan gebruiken als foto gallerij, flash header, banner, ..

Je leert ook :

Hoe je een foto importeert in Flash.
Hoe je uitlijnt in de Align Panel.
Hoe je een layer omzet in een mask.
Hoe je speciale Flash tips en trics gebruikt.

Website : http://www.flashvault.net/tutorial.asp?ID=166

Een button opmaken met CSS

Cicco — Sat, 05 Apr 2008 19:53:22 +0000

Uit de zoekresultaten van deze website zie ik regelmatig zoektermen voorkomen met als doel hoe je een button kan opmaken. Een button zoals je bijvoorbeeld gebruikt bij je contactformulier.

Zo bijvoorbeeld :

Dit is heel simpel en is te bereiken met enkele regeltjes CSS. Even overlopen hoe je dit doet aan de hand van een mini formuliertje :

Maak een formuliertje met een textarea en een button. Daar heb je deze code voor nodig :

Voor degene die Dreamweaver gebruiken en enkel werken vanuit Design view, overloop volgende stappen :

Insert -> Form -> Form
Insert -> Form -> Textarea
Insert -> Form -> Button

Nu gaan we de button opmaken en dit doen we aan de hand van CSS en een simpele class. Een class is een actie die wordt opgelegd aan 1 specifiek element, de button dus.

We schakelen over naar Code view voor degene die in Dreamweaver werken en geven de button een class, we noemen deze class ’sendbutton’. Zoals in de volgende regel te zien is :

Nu gaan we ’sendclass’ een opmaak geven door middel van CSS zodat deze kan worden doorgegeven aan de button. Een class wordt steeds vooraf gegaan door een ‘punt’ in de CSS. Hier de volledige opmaak voor de button zoals in het voorbeeld te zien is :

.sendbutton {

height: 25px;

width: 75px;

border: 1px solid #ccc;

background-color: #5D86C8;

}

Even uitleggen wat bovenstaande allemaal betekent :

.sendbutton : de naam van de class die ook in de code van de button is geplaatst.
height 25px; : er wordt een hoogte van 25px gegeven aan de button.
width: 75px; : er wordt een breedte van 75px gegeven aan de button.
border: 1px solid #ccc; : Een grijze border van 1px. Bovenaan, onderaan, links en rechts.
background-color: #5D86C8; : De blauwe achtergrond.

Zoals je ziet wordt elke regel afgesloten met een ‘punt komma’ en de class wordt geopend en afgesloten met een accolade. Dit is standaard voor CSS.

Meer heb je niet nodig om je button op te maken. Voor degene die liever over een werkend voorbeeld beschikken is de mini form van deze tutorial gratis te downloaden.

Heb je aan de hand van deze tutorial ook één of meerdere buttons opgemaakt? Laat het even weten via een berichtje onderaan. Ik ben benieuwd…

Aandachtspunten bij het maken van een website

Cicco — Tue, 20 Nov 2007 10:48:19 +0000

Een website maken, al dan niet als betaalde opdracht, is geen makkelijke opdracht. Waar moet je op letten? Hoe hou je het makkelijk voor de bezoeker? hoe zorg je ervoor dat de bezoeker op de website blijft? Het internet staat immers vol met websites die moeilijk navigeerbaar zijn, waarbij er meer draait en flikkert dan je ogen aankunnen en welke je dan ook zo rap mogelijk wil wegklikken. En dat is nu juist niet hetgeen wat we willen bereiken…

Het is niet altijd makkelijk om een website te voorzien die voldoet aan de eisen van het meerendeel van de bezoekers. Ook moet er dan in vele gevallen rekening gehouden worden met een opdrachtgever die al zijn persoonlijke wensen graag in het project wil mee opnemen, geloof mij dit is bij elke opdracht zo. Als webdesigner moet je hier dan proberen een oplossing te vinden om uiteindelijk tot een goed resultaat te komen. Je probeert je opdrachtgever wel een beetje bij te brengen over gebruiksvriendelijkheid en het belang van een bezoeker op je website te houden maar uiteindelijk blijft de klant koning.

Probeer een goed evenwicht te vinden tussen hetgeen je wil bereiken, de bezoeker, de uitstraling en de wensen van een opdrachtgever. Uiteindelijk is één zaak belangrijk en dat is de bezoeker op je website houden en ervoor zorgen dat hij een reden heeft om de website opnieuw te bezoeken. Het is dus vrij duidelijk dat gebruiksvriendelijkheid geen luxe is voor je website, zet het bovenaan je lijstje en maak er een must van. Gebruiksvriendelijkheid -> tevreden bezoekers -> goede reputatie -> meer bezoekers en daarmee is de opzet van een website mee voldaan.

Wat wel ?

- Een duidelijk en overzichtelijk menu.

- Zorg ervoor dat bezoeker dadelijk weet welke tekst aanklikbaar is.

- Minimaliseer het scrollen.

- Gebruik een duidelijke font.

- Gebruik ALT tags bij je images.

- Zorg voor een duidelijke structuur in je layout, werk met headings.

- De bezoeker moet met één klik altijd terug op de home pagina kunnen geraken.

Wat niet ?

- Statische tekst onderlijnen, lijkt op een link.

- Het gebruik van witte tekst, dit vanwege het afprinten.

- Een horizontale scrollbalk.

- Lange teksten in hoofdletters.

- Teveel gebruik van animaties.

- Je volledige tekst centreren.

- Lange laadtijden voor je pagina’s

Wat kan je nog meer doen ?

- Maak gebruik van een ordered of unordered list.

- Zorg voor een duidelijk contrast tussen achtergrond en tekst om het leescomfort te verhogen.

- Maak het de bezoeker gemakkelijk om ervoor te zorgen dat hij met zo weinig mogelijk clicks zijn doel bereikt.

- Voorzie een sitemap op je website.

- Vermijd splash pages of zogenaamde landingspagina’s. Het enige dat de bezoeker hiermee doet is op ‘Skip intro’ klikken, nutteloos dus.

- Vermijd pijnlijke kleurtinten voor je achtergrond.

Het gebruik van webstandaarden

Het al dan niet gebruik maken van webstandaarden brengt nogal vele discussies teweeg op het internet. De éne groep zegt : “90% van de bezoekers weet niet eens wat webstaandaarden zijn en hebben geen interesse of een website correct gevalideerd is of niet”. De andere groep vindt het gebruiken van webstandaarden een must en willen hiermee aan de bezoekers meegeven dat er rekening wordt gehouden met hun, alsook is dit voor vele webdesigners een punt dat ze professioneel bezig zijn.

Zelf sluit ik mij aan bij de tweede groep… uiteindelijk vergroot je het leesplezier van een website met het gebruik van webstandaarden alsook leg je al een heel grote basis om je website zoekmachine vriendelijk te maken.

Het gebruiken van webstandaarden maakt vele dingen makkelijker in een later stadium.

Waar kan je je website laten valideren?

(X)HTML validatie : http://validator.w3.org/
CSS validatie : http://jigsaw.w3.org/css-validator/

Hierbij heb je de basics voorzien van de opbouw van een website. Nu nog een mooi en toegankelijk design ermee integreren en je bent goed op weg.

Videobox – Lightbox voor video’s

Cicco — Tue, 30 Oct 2007 20:13:23 +0000

Videobox geeft hetzelfde effect aan video’s, als Lightbox doet aan foto’s. De meesten kennen de software van Lightbox waarbij de foto op voorgrond komt met een zwarte transparante achtergrond als erop geklikt wordt.

Videobox doet hetzelfde bij video’s en kunnen in deze modus ook afgespeeld worden. Ook video’s die op Youtube, Revver,… staan kunnen op deze manier getoond worden.

Hier kan je een voorbeeld van Videobox zien.

Hoe dit installeren?

Download de software van de website van Videobox. In deze download zitten drie mappen : css, js en swf. Zet deze drie mappen op je server en plaats de volgende regels in de head van je pagina :

Vervolgens dien je een klein stukje code aan de link van de video toe te voegen, namelijk :

rel="vidbox"

Een link van een op Youtube geüploade video zou dan zo zijn :

Bekijk de video

Je kan ook afmetingen meegeven aan dit effect. Je dient dan enkel de hoogte en de breedte mee te geven aan het kleine stukje code. Een voorbeeld van 400px op 300px is dan zo :

rel="vidbox 400 300"

Je kan ook alle info lezen op de website van Videobox.

Een tabel verticaal centreren

Cicco — Wed, 17 Oct 2007 16:56:50 +0000

Heel vaak kom je de vraag tegen op het internet : ‘Hoe kan ik een tabel verticaal centreren?’ Wel in normale wijze, werkende in Dreamweaver, kan je enkel een tekst of foto in een tabel verticaal centreren. Daar heb je de valign functie voor in Dreamweaver. Een tabel verticaal centreren gaat niet in Dreamweaver.

Voor alles bestaat er wel een oplossing en ook hiervoor. We gaan wat CSS toevoegen aan de code van de pagina om tot het volgende effect te komen : Een verticaal gecentreerde tabel.

Het enige dat je moet doen is volgende code toevoegen in de head van je pagina :

Let wel : Bovenstaande regel geldt voor een tabel van 200px op 200px. Hoe pas je dit aan indien je tabel een andere afmeting heeft :

- Je neemt de helft van de hoogte van je tabel en vult deze in achter margin-top en vul deze in als een min waarde.
- Je neemt de helft van de breedte van je tabel en vult deze in achter margin-left en vul deze in als een min waarde.

Voorbeeld van een tabel van 400px hoog en 300px breed zou zijn :

Meer is het niet om je tabel verticaal te centreren…

Google Maps op je website plaatsen

Cicco — Thu, 06 Sep 2007 19:23:42 +0000

Het is nog nooit zo makkelijk geweest om Google Maps op je website te plaatsen als nu. Tot over een paar weken moest je om Google Maps op je website te plaatsen eerst een API aanvragen en daarna een klein half uurtje puzzelen om een mooi resultaat te krijgen van een stratenplan om op je website te plaatsen. Dit systeem is nog steeds voorhanden maar Google biedt nu ook de mogelijk om simpelweg, na het invoeren van het adres, een link te copiëren en in te voegen op je website, stratenplan mooi zichtbaar op je website. Ideaal voor op je contactpagina of om je bezoekers wegwijs te maken naar je evenement.

Je kan :
– In- en uitzoomen.
- Op satelliet, kaart of op beide zetten.
- Naar boven, onder, links of rechts navigeren.

Hier een voorbeeld van een Google Maps :

Grote Markt 5, Brussel

Grotere kaart weergeven

Hoe doe je dit?

Ga naar http://maps.google.be of http://maps.google.nl en geef het adres op in de daarvoor voorzien balk :

Klik op ‘Adressen zoeken’ en nu zie je de beodigde kaart verschijnen. Klik nu op ‘Link naar deze pagina’, rechtsboven de kaart en je ziet hetvolgende verschijnen :

Selecteer en copieer nu de link onder ‘HTML in website plakken’ en ga naar de broncode van je website pagina en plak deze daar neer.

Zo; meer is het niet. Handig en leuk voor de bezoekers lijkt me.

Web Tutorials – Forum

Cicco — Mon, 27 Aug 2007 19:27:53 +0000

Om iedereen nog beter te helpen met het maken van zijn website en het gebruik van de tutorials op deze website heeft Web Tutorials vandaag een forum opgezet. Met al je vragen in verband met Dreamweaver, Photoshop, HTML, tutorials, … kan je daar terecht.

http://forum.webtutorials.be

Web Tutorials en de bezoekers kunnen zo samen anderen en elkaar helpen om onze problemen op te lossen.

Ook suggesties en verbeteringen die Web Tutorials aangaan kunnen daar aangebracht worden.

Web Tutorials hoopt op deze manier je te kunnen helpen om met zo weinig mogelijk problemen en tijdverlies je project tot een goed einde te brengen.

Tot op het forum!

Favicon

Cicco — Thu, 12 Jul 2007 09:42:52 +0000

Een favicon… Voor degene die dit niet kennen, dit is het icoontje dat je bij vele websites ziet verschijnen in de adresbalk langs de url. Ook wanneer je een website toevoegt aan je favorieten zie je daar dit icoontje verschijnen.

Een favicon moet altijd van grootte 16×16 zijn en een .ico bestand zijn. Is dit niet zo dan zal de favicon genegeerd worden en niet verschijnen. Het maken van een .ico bestand kan op verschillende manieren. Er zijn icon editors en je hebt ook online generators. In dit voorbeeld gaan we de online generator van Dynamic Drive gebruiken, deze werkt goed en is ook gratis. Voordeel hiervan is dat je hiermee ook een foto die op je pc staat kan gebruiken.

We beginnen eraan. Ofwel maak je een mooi plaatje in Photoshop, Gimp of eender welk fotobewerkingsprogramma ofwel kies je een foto uit. Ga nu naar de online generator van Dynamic Drive, daar zie je een uploadbalk waar je je plaatje kan uploaden. Browse naar je plaatje op je pc en klik op ‘Create Icon’. Eens deze omgezet is krijg je de melding om een .rar bestand te downloaden, deze bevat je favicon. Nu gaan we zorgen dat deze favicon online geraakt.

Stap1 :
Neem je favicon(.ico bestand) uit de file die je gedownload hebt en plaats deze in de root van je directory, op dezelfde hoogte waar je index.html staat.

Stap 2 :
Open je index.html pagina en copieer deze regel in de head van je pagina :

In deze regel zie je bij href=”/favicon.ico” dit staan : “/”. Dit wil zeggen dat de favicon in de root van je directory staat. Dit zou er dan zo moeten uitzien in de head van je pagina :


Uw paginatitel

Stap 3 :
Upload alles naar je webserver en ga kijken of je favicon er staat. In sommige gevallen kan het wel een tijdje duren voor deze zichtbaar is. Ook sla je je website best op in je favorieten om resultaat te zien, daar komt dit plaatje namelijk ook tevoorschijn.

Een formulier maken zonder dat Outlook opstart

Cicco — Wed, 11 Jul 2007 20:09:32 +0000

Na vele forumbezoeken en reacties te hebben gezien op het internet ga ik een veel voorkomende vraag beantwoorden. ‘Hoe maak ik een webformulier voor op mijn website zonder dat die vervelende Outlook opstart?’

Bekijk hier een voorbeeld van dit contact formulier.

De contact pagina mag je uitproberen, alle testmailtjes zullen in mijn inbox terechtkomen.

Wat we eerst moeten doen is uiteraard een formulier aanmaken. We schrijven de volgende code, een standaardformulier :




Naam : !





Voornaam : !





Telefoon :





E-mail : !








Vragen : !






 












 


! = Verplicht veld

Hetgeen we nu hebben is een formulier met volgende items : Naam, Voornaam, E-mail, Vragen, een verzendknop en een resetknop. Elk formulierobject geven we ook een ‘id’ mee. Deze hebben we later nog nodig. Om het formulier te kunnen verzenden hebben we een mail script nodig, wanneer het verzonden wordt zal Outlook niet worden opgestart!. Hier gaan we later een PHP script voor gebruiken.

Nu gaan we enkele regels code toevoegen aan het formulier. Onder deze eerste regel van het formulier :

gaan we volgende code toevoegen :

Regel 1 : Vul bij value de velden in die je bezoekers verplicht zijn in te vullen bv. value=”naam, voornaam”. Deze namen zijn de id’s die we aan onze velden hebben gegeven.

Regel 2 : Vul bij value de titel in van de mail zodat hij herkenbaar is bv. value=”Mail van mijn website”.

Regel 3 : Vul bij value enkel het woord ‘yes of ‘no’ in indien je de ingevulde e-mail wil laten checken.

Regel 4 : Vul bij value de pagina in naar waar je bezoeker zal geleid worden na het versturen van de e-mail bv. bedankt.html

Nu rest er ons nog twee dingen te doen en dit is de ‘action’ invullen die het formulier moet uitvoeren. Dit is namelijk het PHP mailscript. In onze eerste regel van het formulier zie je action=” ” staan. Tussen deze quotes vullen we de naam van het mailscript in bv action=”mailformulier.php”

De laatste en ook zeer belangrijke stap die nu nog moet gedaan worden is het e-mail adres invullen waar de mail moet naartoe gestuurd worden. Open het PHP mailscript, die in de download is inbegrepen. Voor degene die hiervoor Dreamweaver gebruiken, vergeet niet over te schakelen naar Code View en vul op de volgende regel je e-mail adres in : $your_email_address=mail@website.be; Zoals je kan zien moet je mail@website.be vervangen door jou e-mail adres.

Dit is ons uiteindelijk volledig webformulier :



















Naam : !






Voornaam : !






Telefoon :






E-mail : !









Vragen : !







 













 



! = Verplicht veld

Zo, nu zijn we aan het eind van deze tutorial om een werkend webformulier te maken. Enkel het PHP mailscript ontbreekt nog. Deze zit in de download van deze volledige tutorial.

Bovenstaand formulier met mailscript kan je hier downloaden. Veel plezier ermee…

Dit formulier is gemaakt met tabellen en zonder opmaak. De CSS formulieren komen later nog aan de beurt.

Naam : !
Voornaam : !
Telefoon :
E-mail : !

Vragen : !



! = Verplicht veld