Webdesign

GuideGuide: Een gratis plugin voor het werken met grids in photoshop

Webdesign

Geschreven door Kevin van Beers dinsdag, 31 januari 2012 15:01

Er word je gevraagd om een multi-column website ontwerp te maken. Hoe ga je dat aanpakken? Er zijn verschillende methodes die door ontwerpers worden gebruikt. Sommige designers slepen wat guides op het canvas en plaatsen deze op het oog zodat er kolommen ontstaan. Weer andere designers gebruiken vector afbeeldingen om de kolommen te creëren. Designers zijn er om te ontwerpen en niet om hun wiskundige kennis ten toon te stellen.

Als we een wiskundige formule van zouden maken dan zou deze is ongeveer zo uitzien:

(siteWidth - (gutterWidth × (numberOfColumns - 1) ) ÷ numberOfColumns = columnWidth))

Zou het niet handig zijn als er een tool of plugin beschikbaar zou zijn die dat voor je kon uitrekenen?

Lees meer: GuideGuide: Een gratis plugin voor het werken met grids in photoshop

Uw website beveiligen tegen hackers, hoe?

Webdesign

Geschreven door Sandhjé Bouw dinsdag, 10 januari 2012 22:56

We kennen ze allemaal wel, de verhalen over hacks van bijvoorbeeld Sony, Diginotar, Byte ;) en andere grote en kleine bedrijven en instanties. De impact die deze hacks hebben op de betrokken bedrijven zijn enorm. De gevolgen kunnen variëren van het buit maken van gevoelige klantgegevens, tot het verlies van vertrouwen van klanten in uw website. In deze serie blogs zullen we een aantal populaire hack methoden bespreken en welke technieken developers moeten gebruiken om deze te voorkomen. Allereerst drie veelgestelde vragen over website beveiliging.

Veelgestelde vragen over website beveiliging en hackers

Is eens beveiligd altijd beveiligd?

Velen denken dat wanneer hun website is opgeleverd door de bouwer en deze goed beveiligd is ze zich hier geen zorgen meer over hoeven te maken. Niets is echter minder waar. Hackers ontwikkelen constant nieuwe technieken om in te breken in uw site of deze te 'defacen', met andere woorden uw site te verwijderen en een eigen pagina daarvoor in de plaats te zetten.

Zoals het voor iedereen duidelijk is dat het installeren van een virusscanner op een PC zonder deze scanner regelmatig van updates te voorzien nutteloos zou zijn, is het ook duidelijk dat het beveiligen van uw website zonder deze beveiliging regelmatig up to date te houden geen nut heeft.

Wat kunt u doen om uw website up to date te houden? Een service contract bij uw ontwikkelaar biedt vaak een goede oplossing. Zorg ervoor dat in zo'n service contract wordt opgenomen dat uw CMS altijd up to date wordt gehouden, en dat er regelmatig beveiligingsscans op uw site worden gedraaid om lekken op te sporen voordat iemand anders dat doet.

Wie of wat zijn hackers?

Er zijn veel verschillende soorten hackers. De meest 'gevaarlijke' hackers zijn natuurlijk de 'professionals' die werken voor criminele organisaties. Deze hackers zijn vaak uit op de gegevens van de bezoekers van uw website, zoals creditcard informatie of persoonlijke informatie om later te gebruiken bij identiteits fraude. In sommige gevallen kunnen deze hackers ook voor overheden werken, maar daar zal de gemiddelde website niet zo vlug last van hebben. 

Een tweede groep hackers zijn te vergelijken met activisten. Om een bepaald idealistisch doel te bereiken of een bepaalde politieke danwel maatschappelijke boodschap over te brengen hacken zij websites van mensen of organisaties die het niet met hun visie eens zijn. Een bekend voorbeeld hiervan is de aanval van hackersgroep 'anonymous' op PayPal, Mastercard en Visa nadat deze Wikileaks hadden geboycot. (Hiermee willen we overigens niet beweren dat 'anonymous' een groep activisten is, maar deze aanval werd wel vanuit een idealistisch oogpunt gedaan.)

De derde en grootste groep hackers zijn de zogenaamde 'scriptkiddies'. Dit zijn personen die relatief weinig ervaring hebben met hacken en 'gewoon wat aan het rotzooien zijn', vaak enkel en alleen uit pure vernielzucht. Als we de eerste groep hackers met wapenhandelaars en drugsdealers vergelijken dan is deze groep te vergelijken met baldadige jeugd die bushokjes vernield. Als uw site wordt aangevallen door een hacker zal dat in de meeste gevallen door iemand uit deze 'categorie' hackers gebeuren. Meestal zijn deze hackers uit op het 'defacen' van uw website, puur om te laten zien 'wat ze kunnen'.

Hackers zijn toch niet geïnteresseerd in mijn site?

Mocht u een 'gewone' website hebben met wat bedrijfsinformatie en dergelijke, dan zullen de meeste professionele hackers inderdaad niet snel geinteresseerd zijn in uw website. De derde groep hackers, zullen echter niet uw site hacken met als doel gegevens te stelen o.i.d. maar puur voor de 'lol'. Eigenlijk is dus geen enkele website veilig voor deze groep hackers. En vergis u niet, ook deze 'categorie' hackers zijn zeer goed in staat om in complexe en goed beveilgde systemen in te breken.

Heeft u een webshop of worden op een onderdeel van uw site gegevens van gebruikers opgeslagen, zoals in een 'client portal', forum of iets dergelijks dan loopt u wel degelijk de kans aangevallen te worden door de meer 'professionele' hackers. Hetzelfde geldt als u een politieke of ideologische opvatting uitdraagt middels uw site.

Het klopt dus dat sommige sites een groter risico lopen om aangevallen te worden door hackers dan andere. Maar het klopt niet dat er sites zijn waar geen enkele hacker in geinteresseerd is.

Welke hack methoden komen aan bod?

Hieronder een kort overzicht van de onderwerpen die we de komende weken zullen behandelen.

• Website beveiliging
• Database beveiliging
• Session beveiliging
• Filesystem beveiliging

Het moge duidelijk zijn dat we slechts een greep uit de vele hack methoden zullen behandelen in deze serie blogs. Bent u (als niet-VisionEars-klant) benieuwd of uw website gevaar loopt. Mail ons dan op Dit e-mailadres is beschermd tegen spambots. U heeft Javascript nodig om het te kunnen zien. . Wij scannen uw site gratis voor u op de meest voorkomende beveiligings lekken, en helpen u eventuele geconstateerde problemen op te lossen.

CSS3 Regions deel 2: Eindelijk polygonen voor het web

Webdesign

Geschreven door Sandhjé Bouw woensdag, 28 december 2011 18:23

In ons vorige artikel over css regions hebben we gekeken naar de krachtige mogelijkheden die dit css prototype biedt om tekst over meerdere kolommen te verdelen. We zullen nu twee andere nieuwe mogelijkheden bekijken die css regions biedt. Allereerst het maken van een polygoon tekst kader.

Een polygoon tekst kader met css?

Tot nu toe is het bovenstaande inderdaad volstrekt onmogelijk. Enkel met ingewikkelde javascript trucs of het verdelen van tekst over een groot aantal span’s danwel div’s kunnen we bij benadering een bovenstaand effect nabootsen. Hierdoor worden de prestaties van een site echter behoorlijk nadelig beïnvloed en de problemen stapelen zich op zodra gebruikers een aangepaste lettergrootte of een aangepast lettertype gebruiken.

Met css regions kunnen we echter het onderstaande met enkel een paar regeltjes css code voor elkaar krijgen.

De css code voor het bovenstaande ziet er als volgt uit:

.circle{
	/* Deze div wordt een cirkel */
	wrap-shape: polygon(0px, 150px /* ...meer punten */);
	wrap-shape-mode: content;   
}

.heart{
	/* Maak van deze div een hartje */
	wrap-shape: polygon(150px, 32px /* ...overige punten */);  
	wrap-shape-mode: content;   
}

De code om deze vormen te maken is zo eenvoudig dat ze bijna geen uitleg behoeft. Met de wrap-shape en wrap-shape-mode property’s van het nieuwe css regions prototype kun je aangeven dat alle “content” of tekst in een div in de vorm van een polygoon moet worden getoond. Je kunt daarna met opeenvolgende x en y coordinaten exact aangeven hoe deze polygoon eruit moet komen te zien. Zo maak je dus eenvoudig tekst in de vorm van een hartje of een cirkel als hierboven.

Dit geeft natuurlijk enorme nieuwe mogelijkheden aan designers en een geweldige nieuwe tool voor developers. Maar er is meer!

Polygone tekstomloop!

Met adobe’s css regions prototype kunnen we namelijk niet alleen teksten in een polygone vorm plaatsen, maar ook om een polygone vorm heen laten lopen. Een voorbeeld hiervan zie je hieronder.

En zoals je inmiddels misschien al verwacht had is ook dit effect doodsimpel te bereiken middels enkel een kleine aanpassing in de css regels van ons polygoon kader. Het enige wat gedaan moet worden om het bovenstaande effect te bereiken is het wijzigen van de regel

wrap-shape-mode: content;

naar

wrap-shape-mode: around; 

Dit betekend dat we met het css regions prototype straks dingen kunnen doen zoals hieronder afgebeeld:

We kunnen ons nog maar nauwelijks voorstellen wat een geweldige dingen we met deze krachtige css tools kunnen gaan maken. Maar nog steeds is adobe niet tevreden. De bovenstaande voorbeelden zijn allemaal gebaseerd op polygone vormen die met verschillende coordinaten worden gedefinieerd. Adobe werkt momenteel ook aan een manier om de polygonen te “generen” aan de hand van de alpha waarden in png bestanden.

Wanneer we het gaan gebruiken

Het is helaas nog niet bekend of en wanneer css regions in de css standaard zullen worden opgenomen, maar we hopen natuurlijk dat iedereen bij het w3c deze geweldige tools zo snel mogelijk goedkeuren. Daarna moeten we nog even afwachten hoe lang het duurt voordat de ontwikkelaars van Chrome, Firefox, Internet Explorer en andere browsers deze standaard opnemen in hun software. Maar wanneer het zover is hebben we dan toch eindelijk beschikking over complexe “Magazine-like” layouts, enkel en alleen met pure css.

CSS3 Regions deel 1: Eindelijk kolommen voor het web

Webdesign

Geschreven door Sandhjé Bouw woensdag, 30 november 2011 15:11

Het is al jaren standaard in magazines, folders, posters en andere gedrukte media. Complexe layouts waarbij tekst over meerdere kolommen wordt verdeeld en vloeiend om afbeeldingen heen loopt. Maar dit kan toch al jaren met html en css, zul je misschien zeggen. Nou, eigenlijk niet. Laten we eens met kolommen beginnen.

Lees meer: CSS3 Regions deel 1: Eindelijk kolommen voor het web