Een WordPress menu straalt simplicity uit, minder code == betere vindbaarheid. Maar wat nu als het menu element echt een <span> element moet bevatten, omdat er bijvoorbeeld een achtergrond 100% variabel getoond moet worden.

<ul id="menu-hoofdmenu">
<li class="current_page_item"><a href="/">Home</a></li>
<li><a href="/contact">Contact</a></li>
</ul>

(X)HTML/CSS WordPress-ready maken

Na het A HREF element komt een <span>, althans zo zijn onze HTML files wel opgezet, prima HTML/CSS alleen niet WordPress-Ready. Dit moet het eindresultaat worden:

<ul id="menu-hoofdmenu">
<li class="current_page_item"><a href="/"><span>Home</span></a></li>
<li><a href="/contact"><span>Contact</span></a></li>
</ul>

jQuery en .each + .wrapAll

Eerst even de latest jQuery library in de sectie van je theme toevoegen. Vlak daaronder zetten we dit kleine stukje jQuery code:

<script type="text/javascript">
$(document).ready(function(){
$("#menu-hoofdmenu > li a").each(function() {
$(this).contents().wrapAll("<span>");
});
});
</script>

Een WordPress menu heeft vele classes om elementen te stylen, net als de current/actieve pagina:

<ul id="menu-hoofdmenu">
<li class="current_page_item menu-item-01"><a href="/">Home</a></li>
<li class="menu-item-02"><a href="/contact">Contact</a></li>
</ul>

Standaard wp_list_authors(); functie

Maar met de is_author komt er ook een prachtig menu te voorschijn. Maar dan vele malen simpeler zonder al die extra classes:

<?php
$args = array(
'optioncount' => false,
'exclude_admin' => true,
'hide_empty' => false,
); ?>
<?php wp_list_authors( $args ); ?>

Tussen resultaat

<ul id="menu-hoofdmenu">
<li><a href="/admin">Admin</a></li>
<li><a href="/jantje">Jantje</a></li>
</ul>

Bij deze links komt de bezoeker op een authors/bloggers pagina met informatie over deze auteur. Maar als de bezoeker nu op 1 van deze 2 pagina’s is, dan kan er niet in het menu gezien worden op elke pagina hij/zij is. Dit komt omdat in deze is_author functie geen current_page of current_author class is gekoppeld, alles is blanco. Hoe voegen we deze class nu dan wel toe?

jQuery addClass .current_page_item

Natuurlijk even eerst de latest jQuery library in de sectie van je theme toevoegen. En dan gaan de aan de slag! Eerst kijken we of de huidige pagina een authors pagina is. Vervolgens pakken we de nickname/slug en dit vergelijken we met het list-item menu in de div#authors. Als de huidige author’s naam gelijk is aan een list-item dan voegen we bij dat list-item een .current_page_item class. Nu is het een kwestie van stijlen, simpelere kan het niet!

<script type="text/javascript">
$(document).ready(function(){
<?php
if ( is_author()) {
$curauth = (get_query_var('author_name')) ? get_user_by('slug',
 get_query_var('author_name')) : get_userdata(get_query_var('author'));
?>
$("#authors li:contains('<?php echo $curauth->nickname; ?>')")
.addClass("current_page_item");
<?php } ?>
});
</script>

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 naarelementen 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