Als je bekend bent met Cufon.replace, dan weet je maar al te goed dat als je een menu styled, dat je altijd 30 minuten extra bezig bent om de hover kleur mee te krijgen. Als je Cufon gebruikt dan wordt de tekst omgezet naar elementen en werkt de a:hover CSS functie niet meer. Als het menu een andere kleur kreeg bij mouseover/hover, dan moet je dit in Cufon ook nog eens extra specificeren.

Na vele mislukte pogingen (bij elke site opnieuw) is het altijd zoeken naar de juiste code om die hover op te zetten. De volgende voorbeelden die je al snel vind op het web geven voor ons 9 van de 10 keer niet het gewenste resultaat:

Cufon.replace('element', {hover: true});
Cufon.replace('element', {hover: 'true'});
Cufon.replace('element', { hover: true, color: 'Orange' });

De oplossing voor Cufon Hover

Deze code heeft ons altijd geholpen en is voor nu verzegeld in het Webcreationz Blog. ‘Element’ staat voor het element dat een hover krijgt, vaak is dat een link en niet de list-item. De hover dient dus op het link item, de a, gegeven te worden.
Cufon.replace('.menu li a', {
  hover: {
    color: '#FF7200'
  }
});

Hebben jullie nog andere leuke tips met betrekking tot Cufon? Vermeldt het hieronder in het reactieformulier en help onze mede-developers!

Wij willen u bedanken voor alle opdrachten het afgelopen jaar en kijken uit naar wederom een prettige samenwerking.

Aan het einde van het jaar kijken mensen vaak terug, maar Webcreationz kijkt graag vooruit en hecht veel waarde aan u als klant. Daarom heeft Webcreationz besloten in 2012 nieuwe diensten aan te bieden zoals o.a. WordPress workshops en onderhoudscontracten.

Waarom WordPress?

WordPress is een trending topic en scoort zeer goed in SEO. In 2010 werd op 22 van de 100 nieuwe “.com-domeinnamen” WordPress geïnstalleerd.

#SlicingPSD

Heeft u gemerkt dat SlicingPSD.nl en SlicingPSDWordPress.nl het afgelopen jaar een nieuwe uitstraling hebben gekregen? Wij hebben de lay-out en de technische back-end aangepast. Zo blijven wij goed scoren op SEO gebied en met een hoge vindbaarheid ratio.

Heeft u een kerstkaart ontvangen?

Webcreationz geeft 3x een gratis slice-project weg, een PSD die wordt omgezet naar (X)HTML/CSS. Bij aanlevering van minimaal 2 pagina’s krijgt u er een gratis.

Welke tekst is er met de hand geschreven op de kerstkaart?

Als u de bovenstaande vraag correct weet te beantwoorden en dit bij het uploaden van uw PSD aangeeft, dan maakt u kans op een gratis PSD die omgezet wordt naar (X)HTML/CSS.

Bekijk ook nog even onze Social Media kanalen:

Tot ziens in 2012!

Bas ten Broeke
Webcreationz

Maar er is 1 functionaliteit die wij extra in het zonnetje zetten. Dit helpt namelijk iedereen die totaal gaan HTML/CSS of PHP kennis heeft, voor al onze klanten die WordPress willen gebruiken en niet weten waar ze moeten beginnen. WordPress 3.3 geeft nu de mogelijkheid voor beheerders om een tour door het systeem te doen. Met ‘Tooltips’ (informatie boxen) weten beheerders direct waarvoor welk onderdeel te gebruiken is en of ze het wel aan of uit moeten zetten.

Verder zijn de belangrijkste wijzigingen ook te vinden in de nieuwe Admin bar, de prachtige nieuwe Media upload die met drag en drop vanaf je bureaublad media-files kan afhandelen. Vanaf heden zal SlicingPSDWordPress WordPress 3.3 in het Nederlands bij u en uw klanten installeren!

Safari en het internet aanpassen

Je kunt knoppen voor op de werkbalk maken of je eigen balk met extensions. Of de manier veranderen waarop de inhoud wordt weergegeven. En bedieningsknoppen toevoegen aan websites. Safari Extensions zijn gebaseerd op webstandaarden, dus je kunt volledig gebruikmaken van HTML5, CSS3 en JavaScript.

Extensions eenvoudiger dan ooit

Als je webpagina’s kunt maken, weet je al hoe je extensions voor Safari kunt maken. En hulp voor extensions is al geïntegreerd. Die heet Extension Builder. Daarin wordt uitgelegd hoe je je extensions inpakt zodat je ze kunt distribueren en installeren. Je hoeft niet handmatig ingewikkelde scripts, menuopties, stylesheets en commando’s in een tekstbestand te typen. Nee, je selecteert gewoon de gewenste extension in een slabloon en dat is net zo eenvoudig als het invullen van een formulier. Je kunt de geïntegreerde Web Inspector gebruiken om je extensions op te maken, fouten op te sporen en je extensions te optimaliseren, gewoon zoals je dat ook doet met een website.

Ondertekend en sandboxed

Elke extension in Safari wordt ondertekend met een digitaal certificaat dat door Apple wordt verzorgd. En dat is gratis met het Safari Developer Program. Het certificaat beschermt de extensions die je ontwikkelt tegen geknoei van buitenaf en garandeert dat alle updates uitsluitend van jou afkomstig zijn. Safari Extensions zijn ook voorzien van geïntegreerde beveiligingsfuncties, zoals sandboxing. Hiermee wordt voorkomen dat jouw extensions worden gebruikt om toegang te krijgen tot de gegevens op de computer van de gebruiker.

Safari Extensions Gallery

Als je zo ver bent dat je je Safari Extensions wilt delen met anderen, kun je ze indienen bij de Safari Extensions Gallery, die later deze zomer zal worden geopend. De Safari Extensions Gallery geeft gebruikers de mogelijkheid jouw extensions te zoeken en te downloaden van je website.

Bronnen: Apple.com & Webdevelopment.nl

Het nieuwe WordPress is geboren. WordPress is een opensource-cms dat zich vooral richt op bloggers, het biedt dit maal een verbeterde editor met een ‘Zen-modus’. Hierin wordt geheel blanco interface getoond, die bloggers laat bloggen zonder afleidingen. Ook kent WordPress 3.2 de nodige snelheidsverbeteringen voor zowel de server als voor de gebruiker. Dat gebeurt door het stroomlijnen van de code met diverse optimalisaties. WordPress 3.2 krijgt de codenaam Gershwin draagt en beschikt standaard over het nieuwe HTML5-thema Twenty Eleven.

PHP- en MySQL-upgrades
Hierbij ondersteunt WordPress niet langer de oudere scripttaal PHP 4 en de oudere database MySQL 4. Voor Gershwin is tenminste PHP versie 5.2.4 nodig en MySQL versie 5.0.15 of hoger. Die overgang is bijna een jaar geleden al aangekondigd. WordPress biedt gebruikers een plugin die de huidige installatie van de blogsoftware doorneemt op problemen. Op dit moment controleert die tool alleen de gebruikte PHP- en MySQL-versies.

WordPress geeft geen support meer aan IE6 gebruikers

WordPress 3.2 schrapt de support voor IE6, wat eind mei bij de bèta al was aangekondigd. Ook wordt nu de pensionering van Internet Explorer 7 alvast ingezet.Het dashboard van de nieuwe blogsoftware geeft gebruikers van oude browsers een waarschuwing hiervoor. Dit is een notificatie van Browse Happy, dat in 2004 is opgezet om gebruikers van Internet Explorer af te krijgen.

Zen-Editor voor Gershwin

Ook biedt de flink opgeschoonde admin-interface een vernieuwde editmodus, door de ontwikkelaars ‘Zen’ genoemd. Daarbij zijn de knoppen en andere interface-elementen tijdens het invoeren van tekst onzichtbaar, zodat de gebruiker zich beter zou kunnen focussen op zijn tikwerk.

Cookies of magic cookies, zijn kleine deeltjes informatie die een server naar de browser stuurt met de bedoeling dat deze informatie bij een volgend bezoek weer naar de server teruggestuurd wordt. Hiermee kan op een eenvoudige manier informatie over de internetgebruikers bijgehouden worden. Het nadeel van cookies is echter dat deze informatie ook privé kan zijn. Cookies zijn daardoor omstreden.

Bij steeds meer sites moet men voor een volledige toegang uzelf bekendmaken door uw naam en een wachtwoord in te typen. Zo kan de beheerder van de site nagaan of u al eerder een bezoek aan de site hebt gebracht, en soms krijgt u daarmee toegang tot delen van de site die voor anderen niet toegankelijk zijn. Deze gegevens worden niet in het geheugen van de internet-server bewaard, maar als tekstbestandje op de schijf van uw PC. Dat tekstbestandje heet een cookie.
Een lekkernij dat bewaard dient te worden!

Cookies kunnen gebruikt worden voor:

• het onthouden van loginnaam of instellingen
• het vergaren van surfinformatie (profiling)
• het koppelen van een browser aan tijdelijke variabelen op de server (session cookie)

Het doel van een cookie

Hiermee laat u de server weten dat u bent teruggekeerd naar die webpagina. De mogelijkheid om gebruikers te identificeren en te volgen is voor veel websites waardevol. Door te volgen wat voor pagina’s de gebruiker bezoekt, kan het aanbod aan de gebruiker worden aangepast. Denk aan webwinkels die producten ‘aanraden’.

di 21 jun 2011, 10:28
‘Cookiewet legt bom onder surfgedrag’

DEN HAAG – De internetbranche kijkt met argusogen naar de stemming dinsdag in de Tweede Kamer over een wetsvoorstel om het cookiegebruik in Nederland aan banden te leggen. Het wetsvoorstel van PVV en PvdA legt een bom onder het gebruiksgemak bij het surfen over internet, stellen brancheorganisaties en uitgevers.

“lossy” compressie is een data encoding methode die data verkleint, samenvoegt en soms zelfs verwijderd

WebP behoudt de kwaliteit van foto’s maar maakt ze veel kleiner. Google wil daarmee de snelheid waarmee afbeeldingen kunnen worden ingeladen via internet verhogen. Google biedt een gratis tool om afbeeldingen te converteren naar het WebP-formaat.

Voor de techneuten onder ons:

A WebP file consists of VP8 image data, and a container based on RIFF. The standalone libwebp library serves as a reference implementation for the WebP specification and is available at a git repository and as a tarball.

Webmasters en web ontwikkelaars kunnen met het de WebP afbeeldingen formaat, kleinere en betere afbeeldingen creëren die het web een stuk sneller zullen maken. WebP wordt echter nog niet door elke browser ondersteund. Natuurlijk wel al door de Google Chrome browser en dankzij de Google Chrome Frame plug-in voor Internet Explorer en Opera 11.10. Bekijk hier de gallery die Google aanbiedt voor de vergelijking van JPG en WebP afbeeldingen.

Download en installeer de Google JPEG/PNG naar WebP conversion tool software

Klik op +1 om iets in het openbaar uw goedkeuring te geven. Met behulp van uw +1′s kunnen uw vrienden, contacten en andere gebruikers de beste dingen op internet vinden wanneer ze zoeken. De strijd tegen de sociale netwerk overheersing van Facebook gaat bij Google gewoon door. De reeds eerder bij search resultaten ingevoerde “plus one button” komt nu beschikbaar voor plaatsing op websites en blog. Op deze manier kunnen websurfers aangeven welke websites en postings ze “plus” vinden en dus met anderen willen delen.

De +1-button voor search is momenteel alleen beschikbaar in de Engelstalige zoekmachine van Google. Voordat je van de button gebruik kunt maken, moet je je via je Google Account aanmelden. Zo kunnen andere gebruikers zien wie de beste diensten voor slicing van PSD naar HTML heeft of de beste WordPress themes maakt, die andere hebben aanbevolen. Wanneer u een profiel maakt, kan iedereen dit zien en kunnen contacten die uw e-mailadres hebben, het gemakkelijk vinden.

Aanbevelingen wanneer u ze wilt hebben – Introducing the +1 Button

Meer info: Google’s +1 Button

‘Zeitgeist’ betekent ‘tijdgeest’, en Google laat zien wat de geest van deze tijd is door de miljoenen zoekopdrachten te verzamelen die ze elke dag ontvangen. Ze hebben verschillende hulpprogramma’s waarmee ze inzicht kunnen krijgen in wereldwijde, regionale, historische en actuele zoektrends. Ook u kunt deze hulpprogramma’s gebruiken om mee te experimenteren, te verkennen en te leren. U kunt ze overal voor gebruiken, van bedrijfsonderzoek tot antwoorden op triviale vragen. Er worden hiermee verschillende top tiens samengesteld waarin de snelst stijgende en snelst dalende zoektermen per categorie worden genoteerd. Voorbeelden zijn sport, entertainment en elektronica. Maar ook de populairst plaatsen en personen worden vermeld.

Wereldnieuws versus beroemdheden

Uit de resultaten blijkt dat de belangrijkste items uit het wereldnieuws snel stijgen in de lijsten, maar ook vaak snel weer dalen. Zo werd er in juni 2010 vooral jaar extreem vaak gezocht naar informatie over het WK voetbal, terwijl de resultaten over de rest van het jaar zeer gematigd waren. Dit geldt ook voor informatie over het olielek in de Golf van Mexico en de aardbeving in Haiti.

Top drie van de snelst stijgende zoektermen

De drie snelst stijgende zoektermen voor 2010 waren wereldwijd: Chatroulette, iPad en Justin Bieber. Chatroulette en Justin Bieber zijn het hele jaar populair geweest, terwijl de iPad vooral een sterke piek toont in januari, de maand waarin het product voor het eerst aan het publiek werd getoond.

Resultaten van zoektermen vergelijken

Met de Zeitgeist-tool is het ook mogelijk om verschillende zoektermen met elkaar te vergelijken. De resultaten worden weergegeven in staafdiagrammen, lijngrafieken en op een interactieve kaart.

Volgens Google is Zeitgeist leuk om mee te spelen, te onderzoeken en om ervan te leren. De zeitgeist voor 2010 is te vinden op de website van Google.

zeit·geist | Uitspraak: ‘tsIt-”gIst, ‘zIt | Functie: zelfstandig naamwoord | Etymologie: Duits, van Zeit (tijd) + Geist (geest) | Datum: 1884 | Betekenis: de heersende wijze of trant van denken en handelen in een zekere tijd.

Bekijk hier zelf hoe de wereld zocht met Google in 2010

Bron: http://www.webdevelopment.nl/tips_en_trucs/77/google+zeitgeist

Het idee achter CSS Sprite is het combineren van meerdere afbeeldingen in 1 grotere afbeelding. Met CSS kiest men een locatie op de x- en y-as om net die ene afbeelding van pixel tot pixel te laten weergeven in de HTML pagina. U maakt vast ook wel eens mee, dat een rollover-afbeeldling van een button pas na enkele seconde laad. Dit komt omdat deze hover-afbeelding nog niet was geladen bij het laden van de gehele website. Deze wordt nu pas geladen en staat nu pas in uw browser cache.

Maar het is mogelijk om deze ‘delay’ te voorkomen en zelfs u gehele website te versnellen. We kunnen deze rollover-afbeelding ‘verstoppen’ in dezelfde afbeelding als de button zelf. Door de achtergrond-positie bij :hover te veranderen, wordt de rollover-afbeelding weergegeven die eerst niet zichtbaar was. U kunt ongelimiteerd afbeeldingen combineren tot één grote afbeelding.

• Groepeer meerdere afbeeldingen in een Sprite-afbeelding
• Naast elkaar, onder elkaar, zolang ze maar pixel perfect op elkaar aansluiten
• Zet de Sprite-afbeelding op in de CSS als achtergrond element
• Positioneer de afbeelding en geeft de vaste breedte en hoogte aan
• Geniet van de vele mindere HTTP requests op uw server, minder afbeeldingen worden aangeroepen en dat verbeterd de snelheid van uw website

CSS-Sprite met de Short-hand CSS techniek

Als de de combinatie van CSS-Sprite combineren met onze Short-hand CSS techniek, dan heeft u de optimale code voor het web!

Als u de hover-afbeelding onder de normale heeft staan en ze hebben een hoogte van 36px, dan ziet de code er als volgt uit:

a.button { background: #FFF url(../images/spriteimage.png) 0 0 no-repeat; }
a.button:hover { background-position: 0 36px; }

De eerste ‘position parameter’ staat voor de pixels vanaf de linker kant. De 2e parameter staat voor de pixels van de bovenkant, ze het als een padding voor de achtergrond. Bij de hover blijft de afbeelding dus links uitgelijnd, maar gaat hij wel 36pixels omlaag.

En vergeet niet de width en height erbij de plaatsen. Stel je hebt nog een afbeelding naast je gewenste afbeelding, dan zal deze ook worden getoond. Deze techniek werkt alleen voor vaste afbeeldingen, vaak voor iconen, knoppen en logo’s. Als u een herhalende achtergrond wilt, dan is dat met CSS-Sprite (nog) niet mogelijk.

Van 2 HTTP-requests gaat u website nu al naar 1 minder, stelt u eens voor dat u 20 afbeeldingen in 1 Sprite-afbeelding plaatst. Kijkt u eens wat voor prachtig werkstuk Youtube ervan gemaakt heeft. Van het ophalen voor bijna 100 kleinere afbeeldingen, 100 requests bij de server per gebruiker, is dat nu maar 1 request geworden!

Ga naar een CSS-Sprite generator om het zelf te proberen!