Subscribe

Archive | Web

jQuery en Masonry met ‘toggle’

OK. In het vorige bericht heb ik aangegeven ideeën te ontwikkelen voor veranderingen aan Stafmans Blog. Toen heb ik geprobeerd of ik het masonry effect werkend kreeg in een enkel bericht of losse pagina. En dat lukte.

Terwijl ik daarmee bezig was zag ik iets nieuws: Een mogelijkheid om het effect interactief te maken. Vanavond daar eens mee zitten stoeien en het juist voor bedtijd aan de praat gekregen. Hieronder zie je een demo. In een losse HTML pagina werkt het zo, maar bij het integreren in WordPress loop je toch altijd tegen eigenaardigheden aan.

Waarom nou dit effect? Nou, vooral omdat het ‘interactief’ is. Dus, een blogbezoeker kan eigenlijk zelf de layout van de pagina bepalen. Nu moet ik nog gaan uitzoeken hoe ik de vakjes gevuld krijg met bijvoorbeeld teksten en foto’s en je kunt je voorstellen dat dat best een leuk effect kan opleveren.

Op naar de volgende stap…

Klik voor het ‘toggle’ effect



jQuery en Masonry

Vandaag weer eens wat verder gepuzzeld met jQuery en het Masonryscript van David DeSandro. Ik wil binnenkort de startpagina van Stafmans Blog veranderen en was benieuwd of ik daarbij het masonry effect zou kunnen gebruiken.

Waar ik nu vooral mee bezig ben geweest is om, tegen alle ontwerprichtlijnen in waarschijnlijk, een werkende opzet te krijgen in één enkel WordPress artikel. Dus, zonder dat ik scripts moet laden in headers of footers. Als dat werkt kan ik het namelijk zonder ingewikkelde trucken overal toepassen waar ik wil, zonder dat er altijd vooraf scripts geladen moeten zijn. En, heb ik nog niet geprobeerd, volgens mij moet ik het ook in een widget kunnen laden, aangezien ik nu alleen HTML gebruik en dat ook in een widget kan. Dat probeer ik echter later wel een keer, voor vandaag is het even voldoende zo.

Ik laat eerst zien hoe het eruit ziet en onderaan dit bericht vindt je de code die ik ervoor gebruik. Op de pagina van David DeSandro zelf vindt je allerlei instellingen en opties.

Het resultaat

Je ziet het effect in werking als je het formaat van je browservenster verandert.

De Code

jQuery en WordPress deel 1

Opgetekend uit eigen gedachten: “Stafmans, jongen, hoe kom jij in ’s hemelsnaam bij zoiets curieus als ‘jQuery’ terecht?”. Eerlijk antwoord. Ik zou willen dat het niet zo was.

Zo wilde ik ooit al niets weten van HTML, niets van CSS en zeker niets van PHP. Desondanks ben ik in een situatie verzeild geraakt waarin ik me veelvuldig bedien van HTML en CSS. En maak ik inmiddels WordPress templates, functies en widgets in PHP, zij het op absoluut het allerallerlaagste beginnersniveau. Maar het wegblijven bij jQuery en javascript was dan een soort laatste principe dat overeind bleef. Tenminste… .

Dan moet ik natuurlijk niet zo gecharmeerd raken van animaties, ‘sticky’ menu’s, ‘image hover’ effecten, het prachtige ‘masonry’ script en als klap op de vuurpijl het parallax effect. En allemaal zijn ze gebaseerd op javascript en jQuery.

Dit artikel is nog lang niet af. Het is slechts een inleiding voor één of meerdere artikelen waarin ik vooral voor mezelf het gebruik van jQuery binnen WordPress wil uitleggen.

Een aantal vragen passeren daarbij de revue:

  • Op welke manieren kan je jQuery en javascript opnemen in WordPress?
  • Wat zijn voor- en nadelen van de verschillende manieren?
  • jQuery in de header of in de footer?
  • Wat zijn manieren om scripts te laden en weer te ‘ont’-laden?
  • Wat zijn mogelijkheden om scripts te bundelen en te comprimeren?

Een aantal zaken heb ik al uitgezocht en ook al wel aan het werk gekregen. Als ik op de belangrijkste vragen een goed antwoord weet te formuleren, dan kan ik namelijk ook demonstratiepagina’s aan Stafmans Blog toevoegen, zonder dat ik alle scripts voor de volledige site moet laden en daarmee te site traag, complex en foutgevoelig maak.

Een klein voorproefje voor het ‘masonry’ effect

Op de startpagina laat ik nu 3 artikelen zien als excerpt en naast elkaar. Dat is totaal anders dan het oorspronkelijke ontwerp van dit thema. Op de blogpagina lees je de artikelen op een lange pagina onder elkaar. Ik denk erover om een blogpagina te maken waarin excerpts van artikelen als een metselwerkstructuur (‘masonry’) naast en onder elkaar worden geplaatst. Volledig ‘responsive’, zodat de verdeling zich automatisch aanpast bij het groter of kleiner maken van het browservenster. Ik ben er nog niet helemaal, maar hier heb je al een aardige ‘proof of concept’, maar met vooral op de iPad nog geen goede weergave van het effect. Gebaseerd op het bekende jQuery Masonry script van Desandro.

Oh ja, zou ik bijna nog de achtergrond afbeelding met de boom van Stafmans Blog vergeten. Die past zich ook volledig aan het browserscherm aan en is gebaseerd op het jQuery Backstretch script. Zonder dit script werkte het niet goed met iPhones en iPads.

Stafmans nieuwe Plan

Hoe herkenbaar. Er ligt een hele lijst met ideeën voor artikelen, maar zodra ik er eens voor ga zitten begin ik eigenlijk meteen weer aan de site te sleutelen. Dit weekend liep ik deze One Page Love pagina tegen het lijf, die maar liefst helemaal gewijd is aan de nieuwe webdesign trend: The One Pager. Een idee dat mij ook aansprak zodra ik het zag en waarop ook Stafmans Blog gebaseerd is. Het gaat om een site van één lange pagina waarin je de volledige inhoud passeert bij het naar beneden scrollen. Waarschijnlijk is de enorme populariteit van tablets als Apples iPad hier grotendeels debet aan. Het lezen van webpagina’s door met je vingers over een scherm te vegen is ideaal voor dit soort pagina’s.

Ik ga er hier geen groot verhaal van maken, maar heb verzonnen dat het sleutelen aan Stafmans ‘One Pager’ voorlopig het nieuwe plan is. Dus niet meer bezig zijn met het ‘afmaken’ van de site en daarna met de inhoud aan de slag, maar me erbij neer leggen dat de site zelf de inhoud is. Als in het motto: “Vorm is Inhoud” dus.

Nu is deze pagina dus gebaseerd op The One Pager van Woo, maar eigenlijk heb ik dat thema nogal grondig verbouwd om het vorige blog van Brian Gardner, de maker van Genesis, na te bootsen. Inmiddels heeft Brian alweer een ander thema. Zelf wil ik leren hoe ik zelf een One Pager thema kan maken op basis van diverse frameworks.

Stafmans Blog is gebaseerd op het Woo Framework, maar ik wil weten hoe ik een dergelijke site ook kan maken met ander frameworks als Genesis, Headway, Ultimatum, Gavick Pro en Dynamik.

Afijn, zo heb ik vanochtend op het Catalyst/Dynamik forum gezocht naar berichten over het maken van een One Pager met Catalyst en vond daar een mooie aanzet. Genoeg om er mee aan de slag te kunnen. Tijdens het lezen van de vele bijdragen in deze ‘thread‘ stuitte ik eigenlijk op een nieuwe trend: Parallax. En besloot dat het de hoogste tijd is om daar binnenkort in te duiken, want Stafmans Blog moet het op dit moment nog volledig stellen zonder parallax effect en dat kan toch eigenlijk niet.

Wel, volgens mij hebben jullie een aardige indruk van hoe ik aan nieuw huiswerk kom en waarom ik aan het schrijven van artikelen niet toe kom.

Stafmans Blog ‘live’

De site staat vanaf 1 april live. Daarvoor ben ik weken bezig geweest om hem lokaal in mijn MAMP ontwikkelomgeving te bouwen.

Gisteren en vanochtend heb ik flink wat tijd besteed aan het schrijven van de tekst op de ‘homepage’ en de ‘meer over stafmans‘-pagina. Vanmiddag vond ik het goed genoeg om de knop om te zetten.

Ik kan instellen of zoekmachines de site meenemen of niet bij hun speurwerk. Tot vanmiddag was de site onvindbaar in Google. Zojuist heb ik de optie om zoekmachines de site te laten indexeren aan gezet. Voorlopig ben je dan nog steeds onvindbaar, maar dat verandert in de loop van dagen. Bovendien moet ik nog een SEO (search engine optimization) plugin installeren om de vindbaarheid te verhogen, maar dat is nu nog niet zo belangrijk.