Webmasterwerk.nl alles voor webdesigners zoals html en css, html5, jQuery en php

Automatisch concepten opslaan met jQuery

Webmasterwerk — Sat, 21 Apr 2012 20:39:56 +0000

Vroeger kwam het wel eens voor dat je computer tijdens het typen van een tekst plotseling vastliep met als gevolg dat je de gehele tekst kwijt was. Gelukkig is er in de loopt van de jaren aardig wat verbetering in de besturingssystemen gekomen en crashes waarbij de computer compleet opnieuw opgestart moet worden komen gelukkig nog zelden voor. Wél komt het nu vaker voor dat je per ongeluk een tabblad of venster van je browser sluit waar je net een e-mail of reactie aan het typen was. Met hetzelfde resultaat; al je werk voor niets en je moet weer opnieuw beginnen.

Slimme webapplicaties zoals Gmail en WordPress slaan automatisch een kopie op terwijl je de tekst aan het typen bent. Op die manier raak je niets of slechts een fractie kwijt van het werk dat je gedaan hebt na een crash. Vanaf nu kan je dit zelf ook verwerken in de webapplicaties die je bouwt. Sisyphus.js is de naam van een jQuery plugin die het mogelijk maakt op bepaalde intervallen ingevoerde tekst automatisch op te slaan. Op deze manier kunnen gebruikers na een crash gemakkelijk hun gegevens weer terughalen.

Dropdown menu in CSS3

Webmasterwerk — Mon, 16 Apr 2012 04:53:57 +0000

Helaas kan je dit dropdown menu nog niet gebruiken in een live website omdat lang niet alle browsers css3 goed ondersteunen. Toch is het leuk om eens te kijken hoe je precies zo’n navigatie in elkaar steekt. Stap voor stap wordt uitgelegd in deze tutorial hoe je de ontwikkeling van het menu aanpakt. Het eindresultaat is een fraaie navigatie opgeleukt met een aantal icoontjes.

Responsive en mobile tooltip

Webmasterwerk — Wed, 11 Apr 2012 13:47:30 +0000

Omdat het responsive webdesign een hype is moeten we er maar vaak over berichten. Bij deze daarom een klein bericht over een jQuery tooltip die responsive is en geschikt is voor mobile. Dus op je laptop, tablet en telefoon ziet deze jQuery tooltip er tiptop uit.

Responsive jQuery slideshow

Webmasterwerk — Mon, 09 Apr 2012 09:43:56 +0000

Al eerder heb ik hier het relatief nieuwe responsive webdesign besproken. Na een responsive navigatie en complete responsive testsuite voeg ik vandaag een responsive slideshow aan de verzameling toe. Deze slideshow werkt met behulp van jQuery, is superlicht en nog responsive ook.

Enkele voordelen van deze jQuery slideshow zijn:

1. minder dan 1kb (minified en GZipped)
2. helemaal responsive (je geeft een maximale breedte aan en de slideshow wordt kleiner naarmate de schermresolutie ook kleiner is)

3. heeft enkel jQuery nodig om te werken

4. werkt cross-browser zelf in Internet Explorer 6!

Een uitgebreide demo en documentatie van deze slideshow vind je hier.

HTML5 placeholder attribute

Webmasterwerk — Mon, 09 Apr 2012 08:51:08 +0000

Met de komst van HTML5 heeft de input tag een nieuwe aanvulling gekregen, het placeholder attribuut. Het placeholder attribuut zorgt ervoor dat we in de toekomst geen javascript meer nodig zijn om een tekstvak te legen zodra iemand er op klikt. Het placeholder attribuut zorgt er dus voor dat er een tekst staat in het tekstvak totdat iemand er op klikt. Dit wordt gebruikt in contactformulieren of zoekfuncties binnen een website.

De html code voor een input element met een placeholder attribuut ziet er zo uit:

Helaas ondersteunen oudere browsers dit vaak nog niet. Om deze toch te ondersteunen zijn er meerdere oplossingen beschikbaar.

De eerste oplossing vind je hier, deze oplossing gebruikt een mix tussen jQuery en Modernizr

De tweede oplossing maakt enkel gebruik van jQuery

En de derde oplossing maakt juist geen gebruik van jQuery maar slechts enkel van javascript alleen.

Twitter paperfold effect in css3

Webmasterwerk — Sat, 07 Apr 2012 16:24:06 +0000

Best kek effectje als je het mij vraagt. De ontwikkelaars bij Mozilla hebben een toffe demo in elkaar gezet waarbij voorgedaan wordt hoe je een mooi in/ uitklap effect kunt bereiken voor tweets met behulp van CSS3. Je kunt, om het te testen, verschillende variabelen aanpassen zoals de animatie snelheid, de hoogte en het 3D perspectief.

Je responsive designs testen met deze tools

Webmasterwerk — Thu, 05 Apr 2012 16:07:05 +0000

Gisteren plaatste we het eerste artikel waar we spraken over responsive webdesign. Als je daar nu lekker mee bezig geweest bent dan zal je vast gemerkt hebben dat het testen van een responsive webdesign niet zo gemakkelijk is. Je moet natuurlijk op elk apparaat gaan testen of het er wel goed uit ziet. Maar steeds switchen van je iPad naar je iPhone weer terug naar je iMac en dan weer kijken op je iPad.. om moe van te worden..

Gelukkig zijn er meerdere webdesigners die op deze manier aan het werk waren en hetzelfde dachten. Hierop plopten er als paddenstoelen verschillende services uit de grond waarmee je in een keer je responsive design kan controleren op verschillende formaten. Handig hé?

Vergeef me de namen van deze responsive check websites maar hier komen er drie:

1. De Responsinator

2. Responsive.is

3. ResponsivePX

Succes!

Responsive CSS3 navigatie menu

Webmasterwerk — Wed, 04 Apr 2012 20:50:00 +0000

Responsive is de trend in websiteland. Het is eigenlijk heel simpel te omschrijven door te zeggen dat het ontwerp van de website zich aanpast aan de breedte van het scherm waarop de website bekeken wordt. Bekijk je een website op een 27 inch iMac dan zie je de gehele website met alle afbeeldingen en filmpjes. Maar als je de website bekijkt op je iPhone dan zie je de grote afbeeldingen en filmpjes juist niet. En op een iPad zie je een tussenversie waarbij je meer ziet dan op je iMac maar minder dan op je iPhone.

Als je zelf eens aan het stoeien wilt gaan met het responsive web dan is dit misschien een leuke oefening. Hier kan je namelijk een complete navigatie menubalk downloaden die gebruik maakt van het responsive principe. Hoe kleiner het scherm is waarmee je de navigatiebalk bekijkt, hoe minder ruimte en informatie de navigatie laat zien.

De menubalk maakt gebruik van Google webfonts voor het lettertype, Selectivizr wordt gebruikt ter ondersteuning van Internet Explorer 7 – 9 met betrekking tot de CSS3 selectors en als laatste wordt html5shiv gebruikt om het NAV element in Internet Explorer te ondersteunen.

Behoud je klanten door de juiste webteksten

Webmasterwerk — Wed, 04 Apr 2012 20:42:43 +0000

Als je als webmaster zelf een website runt dan kan je je bezoekers zien als (potentiële) klanten. Het is zaak deze bezoekers zo veel mogelijk aan jou of je website te binden. Op het blog van Schrijven voor internet vind je een interessant artikel dat gaat over het vergroten van de loyaliteit van je website bezoekers. Door in te spelen op psychologische factoren kan je bezoekers het gevoel geven dat ze de band met jou of je dienst minder snel op moeten geven. De eerste factor waar je je voordeel mee kan doen is dat de mens niet van verandering houdt, zo wil men het liefst zo min mogelijk afwijken van de huidige situatie. De tweede factor die beschreven wordt is dat mensen consequent willen zijn. Als ze eerder een keuze gemaakt hebben dan zijn ze sneller geneigd deze zelfde keuze wederom te maken als dat mogelijk is.

Binnen je website kan je natuurlijk heel slim hier op in spelen om op die manier een stevigere band met je klanten op te bouwen.

Style tiles; tussen wireframe, moodboard en mockup

Webmasterwerk — Wed, 04 Apr 2012 20:34:07 +0000

Weer eens iets nieuws.. Als je moodboards te vaag vindt, wireframes teveel werk vindt en mockups ook niet jouw ding zijn dan kan je nu gebruik maken van style tiles. Deze style tiles kan je gebruiken om kleine gedeeltes van een vormgeving om te zetten naar een website ontwerp. Deze style tyles zijn kleine onderdelen van een groter ontwerp dat je kunt presenteren. Zo krijgt de klant het gevoel van vorm en stijl door bijvoorbeeld het lettertype en het logo te gebruiken maar ben je niet genoodzaakt een compleet pixelperfect website ontwerp af te leveren. Je kunt snel aan de slag door het style tile template te downloaden, deze wordt als psd aangeleverd zodat je direct aan de slag kunt in Photoshop.