Hardware.Info 5.0: welkom!

48 reacties
Inhoudsopgave
  1. 1. Inleiding
  2. 2. Voorpagina
  3. 3. Vergelijkingstabellen
  4. 4. Wensenlijsten
  5. 5. Globale zoekfunctie
  6. 6. User systemen
  7. 7. Productervaringen
  8. 8. Kleine veranderingen
  9. 9. Techniek: Symfony 2, Varnish, Elastic search en meer
  10. 10. Op naar de toekomst!
  11. 11. Reacties

Inleiding

Het zal voor velen even schrikken zijn geweest: Hardware.Info heeft een nieuwe voorpagina! Die nieuwe frontpage is echter slechts een fractie van het werk dat ons team van developers het afgelopen jaar heeft verzet. Begin dit jaar begonnen we met een ambitieus project: Hardware.Info 5.0, een complete rewrite van de code achter onze websites Hardware.Info en FotoVideo.nu. De sites maken nu gebruik van een nieuwe framework, waardoor ze sneller en schaalbaarder zijn en waardoor code beter te onderhouden en eenvoudiger uit te breiden is. Meer over dat nieuwe framework lees je verderop in dit artikel.


De Hardware.Info frontpage: oud en nieuw!

Verbeteringen

Omdat we iedere pagina op Hardware.Info en FotoVideo.nu tegen het licht hebben gehouden, zijn er ook honderden verbeteringen doorgevoerd. Vaak kleine zaken, zoals een bepaalde functie gebruiksvriendelijker maken, maar ook zijn sommige site-onderdelen compleet op de schop gegaan: de manier waarop vergelijkingstabellen werken, de globale zoekfunctie, de user systemen: een paar voorbeelden van zaken die we grondig hebben verbeterd.

In dit artikel doen we uitgebreid uit de doeken wat er allemaal is veranderd en verbeterd op Hardware.Info. Uiteraard zijn we benieuwd naar jullie feedback! Niet alleen eventuele bugs - die er ondanks het zeer intensieve testwerk vast nog wel zullen zijn - maar ook suggesties om Hardware.Info en FotoVideo.nu nóg beter maken.

Hoewel we met de introductie van Hardware.Info 5.0 een lang ontwikkelingstraject afsluiten, zien we deze dag eerder als vertrekpunt dan als eindstation. De nieuwe code stelt ons in staat om sneller nieuwe functionaliteit aan de site toe te voegen en hoewel onze lijst met ideeën en plannen nu al verre van kort is, mag deze altijd nóg langer worden. Suggesties zijn dus zoals altijd welkom. Genoeg over de toekomst, eerst een blik in de nieuwe functionaliteit van Hardware.Info 5.0.

Hieronder tref je een beknopte lijst van de voor bezoekers meest in het oog springende veranderingen; op de volgende pagina's lichten we die in detail toe.

  • Voorpagina: blog roll links, premium content, prijsvergelijker en community rechts
  • Vergelijkingstabellen: meerdere tabellen per productgroep mogelijk, 'horizontaal sorteren' op specificaties en testresultaten
  • Wensenlijsten: nu ook voor niet-ingelogde bezoekers, eenvoudiger producten toevoegen, inclusief betalings- en verzendkosten, sorteren op afstand tot afhaalpunt
  • Globale zoekfunctie: geheel herschreven en veel sneller geworden
  • User systemen: eenvoudiger componenten toevoegen, toekomstige systemen invoeren, drag & drop foto upload (ook meerdere), maximale afmetingen foto's naar 1920x1080
  • User benchmarks: geheel vernieuwd, zowel invoer als overzichten
  • Productervaringen: invoer vereenvoudigd, drag & drop foto upload (ook meerdere), extra aandacht voor goede productervaringen
  • Techniek: geheel nieuw framework Symfony2, search engine Elastic Search, page caching Varnish 3.0, updates naar nieuwste versies van CentOS, PHP, Percona

Voorpagina

Wat natuurlijk direct opvalt is dat we Hardware.Info 5.0 hebben voorzien van een nieuwe frontpage. Dat is mede naar aanleiding van de feedback van onze bezoekers, die zowel na de introductie van de vorige update van het design als in de onlangs gehouden bezoekersenquête massaal aangaven de voorpagina 'te druk', 'te vol' en 'onoverzichtelijk' te vinden. De Hardware.Info 4.0 voorpagina probeerde zoveel mogelijk zaken zichtbaar te maken, met zo min mogelijk scrollen. Dat resulteerde in een raster van 'in elkaar gelego'de vakjes', wat door het merendeel van onze bezoekers dus niet als ideaal werd beoordeeld. De filosofie achter de nieuwe voorpagina is dan ook geheel anders dan die van de voorgaande versie.


De nieuwe Hardware.Info 5.0 voorpagina

Links: blog roll

De voorpagina van Hardware.Info 5.0 is in navolging van die van FotoVideo.nu meer in een blog-stijl vormgegeven. Dat betekent onvermijdelijkerwijs meer scrollen, maar ook meer overzicht. In de linkerkolom vind je chronologisch onder elkaar al onze nieuwste redactionele content: nieuws, reviews, video's, magazines en PC adviezen. Van ieder nieuw artikel kun je al direct een passage lezen, zodat je niet alleen op basis van de titel hoeft te beslissen of iets de moeite waard is om door te klikken. Door middel van filters bovenaan de 'blog roll' kan je direct alleen het type content tonen dat je wilt zien: nieuws, reviews, pc adviezen, etc. Bijvoorbeeld alleen de reviews van de afgelopen tijd nog eens scannen is zo wel heel eenvoudig geworden.

Hardware.Info wordt steeds meer vanaf tablets en smartphones bezocht: het verkeer via de mobiele site is het afgelopen jaar ruim 170% toegenomen ten opzichte van het jaar ervoor. Een doorklik is dan vanwege vaak trage verbindingen voor velen een grotere drempel dan bij bezoek via een vaste verbinding, waardoor zo'n scrollbare blog-indeling naar onze mening ook voor mobiele bezoekers een grote verbetering is. Bovendien bleek uit onze statistieken van Hardware.Info 4.0 dat een nieuw nieuwsbericht (destijds linksboven) véél meer in het oog sprong dan een nieuw artikel (voorheen rechtsboven). Nu staat alle nieuwe content altijd op dezelfde plek en zal een frequente bezoeker niets meer missen.

Rechts: premium content, prijsvergelijker en community

Rechtsboven op de nieuwe frontpage lichten we wat we noemen de "premium content" (reviews, video's, PC adviezen) nog eens extra uit. Plaatjes hebben een veel grotere attentiewaarde dan regels tekst, vandaar dat we hier hebben gekozen voor lekker grote afbeeldingen, van 430 pixels breed. Zelfs wanneer je de linkerkolom aan het lezen bent, zal een belangrijk artikel in die rechterbox met nieuwe content je niet ontgaan. De miniaturen onder de grote afbeelding geven nog een mogelijkheid om terug te bladeren door deze premium content.

Verder vind je in de rechterkolom onder meer een greep uit de populairste producten uit de prijsvergelijker, recent geteste producten (inclusief al direct een klein grafiekje van testresultaten!) , de nieuwste product- en shopervaringen en de laatst bijgewerkte user systemen. We hebben er overigens voor gekozen om hier alleen user systemen met ge-uploade foto's te tonen: systemen zonder afbeelding of met stock-afbeeldingen komen dus niet meer op de voorpagina. Dit is een van diverse initiatieven om bijdragen uit onze community beter in beeld te brengen, naargelang hierin meer tijd en moeite is gestoken.


Recent geteste producten op de nieuwe frontpage: direct met een grafiekje, zodat duidelijk is dat er meer dan alleen specificaties van dit product te vinden zijn.

Vergelijkingstabellen

We zijn nog steeds trots op het systeem van vergelijkingstabellen dat we in Hardware.Info 3.0 introduceerden en in Hardware.Info 4.0 verder verbeterden. De specificaties en testresultaten van alle producten op Hardware.Info zijn hiermee eenvoudig te vergelijken. Niet alleen met een beperkt aantal producten, zoals sommige vergelijkingssites bieden, maar ook met tientallen producten, als je dat wilt.

Er is echter altijd ruimte voor verbetering en dat gold ook voor de tabellen zoals ze tot dusver beschikbaar waren. Zo was een manco dat je als gebruiker slechts één persoonlijke vergelijkingstabel per productgroep kon bewaren. Als je zowel Socket 1366 als Socket 1155 moederborden wilde vergelijken, had je pech en moest je je vergelijkingstabellen telkens verwijderen en opnieuw aanmaken. Bovendien vergde toevoegen van een nieuw product aan een tabel dat de pagina opnieuw geladen werd, wat met name bij een groot aantal vergelijkingstabellen een soepele gebruikerservaring in de weg stond. Ook waren vergelijkingstabellen alleen beschikbaar voor bezoekers met een gebruikersaccount.


Vergelijkingstabellen en wensenlijsten, eenvoudig bereikbaar vanaf iedere pagina en nu ook voor niet ingelogde gebruikers.

Dat is voorbij! We hebben de manier waarop vergelijkingstabellen werken gestroomlijnd, volgens de opzet van de wensenlijsten. We hebben er verder voor gezorgd dat niet ingelogde gebruikers evenveel functionaliteit hebben als wel ingelogde gebruikers, al blijft het voordeel van een account dat al je vergelijkingstabellen bewaard blijven voor je volgende bezoek.


Nieuw: meerdere vergelijkingstabellen van dezelfde productgroep aanmaken.

Nieuw in Hardware.Info 5.0 is dus dat je zoveel verschillende vergelijkingstabellen kunt aanmaken als je zelf wil. Wanneer je een product toevoegt aan een tabel, bijvoorbeeld door de grote knop rechts op alle productpagina's of door de kleine tabel-knopjes in de zoekfunctie, krijg je een pop-up te zien, waarin je kunt kiezen of je het product aan een bestaande of nieuwe tabel wilt toevoegen. Je tabellen zijn altijd snel op te roepen door de link helemaal rechtsboven op de site, boven het menu.

Op je persoonlijke vergelijkingstabellenpagina kan je selecteren welke tabel je wilt bekijken, maar ook kan je nieuwe tabellen aanmaken, tabellen kopiëren, verwijderen en samenvoegen (mits ze tot dezelfde productgroep behoren, uiteraard).

De tabellen zélf hebben we ook van nieuwe functionaliteit voorzien. Kolommen verplaatsen, het beste product bij iedere specificatie met een groene kleur uitlichten en een mogelijkheid om direct producten toe te voegen aan een tabel zat al in Hardware.Info 4.0. Nieuw is een fraaie horizontale sorteermogelijkheid: klik op de naam van een willekeurige specificatie of testresultaat in de tabel en de tabel wordt direct opnieuw gesorteerd met van links naar rechts het beste tot het slechtste product voor deze eigenschap. Producten vergelijken is op deze manier nog eenvoudiger en overzichtelijker!


Een nieuwe functie: tabellen sorteren op specificaties of testresultaten.

Wensenlijsten

Wensenlijsten werkten in Hardware.Info 4.0 al grotendeels op de manier zoals die op de voorgande pagina voor tabellen is beschreven, maar ook deze site-functionaliteit, waarmee je op zoek kunt gaan naar de goedkoopste aanbieder voor een combinatie van verschillende producten, is flink op de schop gegaan. Belangrijkste vernieuwing: wensenlijsten werken nu ook voor niet ingelogde gebruikers, al geldt net als bij vergelijkingstabellen dat het voordeel van een account is, dat je wensenlijsten ook bewaard blijven na het verlaten van de site en/of sluiten van de browser.

Ook wensenlijsten kun je eenvoudig kopiëren, samenvoegen of verwijderen. Wanneer je een wensenlijst selecteert, zie je onder elkaar de producten die erin staan - waarbij je direct aantallen kunt aanpassen - en daaronder de winkels die minimaal je aantal producten minus twee verkopen, inclusief de totaalprijzen.

Nieuw in Hardware.Info 5.0 is dat we net als op het prijzentabblad van productpagina nu ook bij wensenlijsten totaalprijzen tonen, dus inclusief betaal- en verzendkosten. Ook op deze pagina kun je nu aangeven of je de producten thuisgestuurd wilt krijgen of juist wilt afhalen. Wanneer je afhalen selecteert, kun je net als op de productpagina's sorteren op de afstand vanaf je huis. Ook nieuw: je hoeft niet meer naar een productpagina te gaan om een product toe te voegen aan een wensenlijst: dat kan nu direct vanuit de lijst zelf!


Nu ook totaalprijzen bij de wensenlijsten. Minstens zo belangrijk: niet-ingelogde gebruikers hebben deze functionaliteit nu ook!

Globale zoekfunctie

Wat waren wij trots toen we in Hardware.Info 4.0 een nieuwe globale zoekfunctie introduceerden: supersnel, op iedere pagina beschikbaar en vol met slimme trucs. Zo toonde (en toont) de globale zoekfunctie altijd de meest relevante resultaten bovenaan en werkt hij semantisch. Dat betekent dat onze globale zoekfunctie ook opdrachten als "Socket 1155 moederbord", "24 inch monitor", "802.11 router" of "LED televisie" begrijpt en er zinnige resultaten voor geeft.

Maar... hoe meer producten we toevoegden, hoe meer content we produceerden en hoe meer externe artikelen we aan de website toevoegden, des te trager de globale zoekfunctie werd. Vermoedelijk hebben we ons op het Hardware.Info HQ het afgelopen jaar nog steviger geërgerd aan de trage zoekfunctie dan jullie, want we gebruiken hem zelf dagelijks bij het schrijven van reviews. In programmeursjargon heet dat overigens 'dog fooding'. Gelukkig is dat verleden tijd! Met een geheel nieuwe technologie aan de achterkant, waarover verderop meer, is de globale zoekfunctie weer pijlsnel en zal 'ie dat ook blijven. Producten zoeken, reviews zoeken, op Hardware.Info 5.0 is het zo gepiept!


De globale zoekfunctie is in Hardware.Info 5.0 echt heel snel.

User systemen

Onze user systemen functionaliteit is bij velen geliefd, maar zeker het onderdeel waarbij je benchmark aan je systemen kunt toevoegen was in Hardware.Info 4.0 verre van gebruiksvriendelijk. In Hardware.Info 5.0 hebben we het complete systeem drastisch op de schop genomen.

Let op: omdat we foto's vanaf Hardware.Info 5.0 op een andere manier opslaan, moeten alle foto's van user systemen geconverteerd worden. Het script hiervoor draait de hele dag, vanaf het moment dat de site live staat. Het kan echter zijn dat je even geen foto's bij de user systemen - inclusief je eigen syste(e)m(en) ziet. Schrik dus niet, die komen in de loop van vandaag weer tevoorschijn!

Op de user systemen overzichtpagina kun je nu eenvoudig systemen van specifieke users, of met specifieke producten vinden. Daarnaast is deze pagina vanaf nu niet alleen op tijd, maar ook op populariteit en beoordeling te sorteren. Wie als ingelogde gebruiker een user systeem bekijkt, zal zien dat je zo'n systeem vanaf nu ook 'leuk' kunt vinden.


Toevoegen en aanpassen van user systemen is een stuk gebruiksvriendelijker geworden.

Het toevoegen en aanpassen van user systemen is flink vernieuwd. Het toevoegen van producten zat in Hardware.Info 4.0 al aardig in elkaar, maar met een grote vak en grotere letters in het maken van de beschrijving nu in Hardware.Info 5.0 een stuk eenvoudiger. Voor het toevoegen van foto's aan een user systeem hebben we een compleet nieuwe upload-tool ontwikkeld, waarmee je eenvoudig meerdere foto's tegelijkertijd kunt uploaden. Zelfs foto's slepen naar de webpagina werkt! Op de bewerkpagina kun je eenvoudig de volgorde van foto's aanpassen, aangeven welke 'primair' is (en op overzichten getoond moet worden als illustratie van het systeem) en foto's verwijderen. Ook nieuw: op veler verzoek slaan we foto's niet langer met maximaal 600 pixels breedte op, maar in Full HD (1920x1080) resolutie. Dezelfde foto-uploader hebben we ook gebruikt bij productervaringen.


De nieuwe foto-uploader, met drag-and-drop functionaliteit.

User benchmarks

Het tabblad om benchmarks toe te voegen is ook geheel opnieuw ontworpen. Via een controlepaneel lijkend op dat van vergelijkingstabellen en wensenlijsten kun je eenvoudig testconfiguraties toevoegen, kopiëren of verwijderen. Het invoeren van je overklokinstellingen bij zo'n testconfiguratie is eenvoudiger geworden, aangezien we veel checks hebben ingebouwd om te controleren of de ingevoerde klokfrequenties, voltages en andere zaken überhaupt wel mogelijk zijn. Omdat alles nu via AJAX werkt, gaat het invoeren ook nog eens veel sneller.

Een ander verzoek van veel bezoekers hebben we ook doorgevoerd: naast bestaande systemen, kun je nu ook 'toekomstige systemen' invoeren, die je van plan bent te gaan aanschaffen. Dergelijke "wenssystemen" zijn niet zichtbaar in de overzichten, maar wel op je profielpagina.

Tenslotte is ook de pagina met benchmark-overzichten geheel opnieuw ontworpen. Het is nu veel handiger om de lijst met resultaten van een bepaalde benchmark op te roepen, eventueel gefilterd op een bepaald type koeling.

Productervaringen

Ook de productervaringen zijn vernieuwd in Hardware.Info 5.0. De pagina om een ervaring te schrijven of te bewerken is een stuk overzichtelijker geworden. Daarnaast bevat de productervaringenfunctie nu dezelfde foto-uploader zoals beschreven bij user systemen. Daardoor kun je nu heel simpel meerdere foto's bij je ervaring uploaden en eventueel invoegen in je review.

Geschreven ervaringen hebben vanaf nu hun eigen pagina en zijn niet langer een ondergeschoven kindje op een productpagina. Net als bij Hardware.Info 4.0 kan je ervaringen als nuttig of niet nuttig bestempelen. Nieuw is dat we daar ook meer mee doen: ervaringen die door veel mensen als nuttig worden bestempeld, krijgen automatisch het predicaat topreview. Ze worden daardoor extra uitgelicht op de productervaringenoverzichtpagina en op de productpagina's. Op verschillende pagina's in de site verschijnt er verder in de rechterbalk een gadget met de best gewaardeerde productervaringen van de afgelopen tijd.

De productervaringen overzichtpagina is ook vernieuwd en nu veel meer in stijl met de rest van de site. Je kunt sorteren op tijd, populariteit en beoordeling en verder filteren op tijd, productgroep en zelfs op specifieke producten.


Productervaringen hebben nu hun eigen pagina, het systeem is gebruiksvriendelijker geworden en goede ervaringen lichten we uit.

Kleine veranderingen

Naast de genoemde grote veranderingen, heeft Hardware.Info ook tientallen kleine verbeteringen. We lichten er een aantal uit:

PC Advies toevoegen als wensenlijst

Het is nu mogelijk om de onderdelen van een PC Advies direct toe te voegen als een nieuwe wensenlijst. Op die manier kun je bekijken welke shops het systeem in onderdelen aanbieden en tegen welke prijs. Dit was al enige tijd mogelijk in de vorige versie van Hardware.Info 4.0, maar we vermelden het hier nog even apart voor wie het nog niet was opgevallen.


PC Advies systemen met één druk op de knop exporteren naar een wensenlijst.

Snel specificaties zoeken

In het 1-2-3 zoeksysteem op onze productgroeppagina's zit er in de tweede box nu een kleine zoekbox voor specificaties waar je meerdere waardes kunt aanvinken, zoals 'processor' bij notebooks. Op die manier kun je de lijst van waardes voor de betreffende eigenschap eenvoudig filteren, om zo de door jou gewenste waarde te vinden.


Snel bepaalde eigenschappen zoeken op de productgroeppagina's.

Profielpagina make-over

De profielpagina heeft een complete make-over gekregen, zodat je nog overzichtelijk al je systemen, productervaringen, shopervaringen en wensenlijsten kunt terugvinden. Verder linken alle gebruikersnamen op de website nu consequent door naar deze profielpagina's.

Techniek: Symfony 2, Varnish, Elastic search en meer

De nieuwe en verbeterde site-onderdelen, hoe trots we er ook op zijn en hoezeer we ook hopen dat jullie ze waarderen, zijn bij de introductie van de nieuwe site vandaag eigenlijk een bijzaak. Waar Hardware.Info 4.0 primair in het teken stond van een nieuwe design, was ons doel bij Hardware.Info 5.0 om het bestaande design en de bestaande functionaliteit over te hevelen naar een nieuw framework.

Hardware.Info 5.0 is gebouwd op Symfony 2, een recent stabiel geworden PHP-framework dat volledig object geörienteerd is opgebouwd en gebruik maakt van technieken als model-view-controller, dependency injection, observer patterns en een bundel-systeem voor codehergebruik. Naast Symfony 2 maken we ook gebruik van het daaraan gelieerde Doctrine 2 ORM en de template engine Twig. Onze developers hebben verschillende verbeteringen aan deze projecten gedaan die ook aan de open-source community zijn doorgegeven. Zo hebben we Doctrine bijvoorbeeld zelf geschikt gemaakt om sites als de onze mogelijk te maken, waarbij verschillende websites met verschillende talen op één basis draaien.


Veel grote sites wereldwijd maken de overstap naar het Symfony 2 framework. Hardware.Info is in Nederland één van de eersten.

Het nieuwe framework zorgt ervoor dat Hardware.Info veel schaalbaarder en beter te onderhouden is. Nieuwe functionaliteit is sneller te maken en we hoeven ons geen zorgen te maken of de site overeind blijft als veel meer mensen ons leren kennen.

De templates zijn op veel plekken vernieuwd en maken nu gebruik van allerhande HTML5 en CSS3 trucs, zoals bijvoorbeeld verbeterde formvalidatie.

Voor de globale zoekfunctie maken we gebruik van Elasticsearch, een extreem krachtig en ongekend snel zoekpakket gebaseerd op Lucene. Op Hardware.Info 4.0 maakten we gebruik van een zwaar aangepaste MySQL Full Text Search implementatie voor zoekopdrachten, maar door de overstap naar professionele zoeksoftware gaan zoekopdrachten nu ongekend veel sneller.


Elasticsearch is in de woorden van de ontwikkelaars "cool, bonsai cool"...

Snelheid tenslotte was ook een belangrijk aspect bij Hardware.Info 5.0. Bijna alle pagina's worden vrijwel compleet gecached met behulp van Varnish 3.0. Dat maakt dat pagina's veel sneller op je scherm staan dan bij Hardware.Info 4.0. Uiteraard worden delen van de site die snel veranderen korter gecached dan relatief statische pagina's.

Gedurende de ontwikkeling van Hardware.Info 5.0 hebben we al onze servers al geüpgrade naar CentOS 6.0, PHP 5.3.8 en Percona 5.5.17 als database. De machine waar onze database en zoeksoftware op draait is inmiddels voorzien van 16 cores en 128 GB geheugen.

Op naar de toekomst!

Veel van het harde werk van de programmeurs is niet direct zichtbaar voor bezoekers, maar het belangrijkste gevolg van de vergaande code rewrite is dat Hardware.Info 5.0 (veel) sneller, schaalbaarder en betrouwbaarder is dan Hardware.Info 4.0. Gedurende het project om de site opnieuw te ontwikkelen hebben we bovendien veel functionaliteit nog eens tegen het licht gehouden, verbeterd en in sommige gevallen zelfs geheel vernieuwd.

We schreven het al in de inleiding: we zien Hardware.Info 5.0 meer als vertrekpunt dan als eindstation. Het nieuwe framework biedt ons de mogelijkheid om veel sneller dan voorheen nieuwe functies aan de site toe te voegen. Onze lijst met ideeën is gigantisch en vanaf morgen gaan onze vijf developers er vol gas mee aan de slag!

Bovenal horen we graag jullie feedback: wat vind je van de nieuwe frontpage? Hoe vind je de werking van de nieuwe vergelijkingstabellen en wensenlijsten? Is het aanmaken van user systemen en user benchmarks inderdaad eenvoudiger geworden? Alle feedback én natuurlijk ideeën voor toekomstige verbeteringen zijn welkom in de reacties. Alvast bedankt en veel plezier op Hardware.Info 5.0!

Let op: omdat we foto's vanaf Hardware.Info 5.0 op een andere manier opslaan, moeten alle foto's van user systemen geconverteerd worden. Het script hiervoor draait de hele dag, vanaf het moment dat de site live staat. Het kan echter zijn dat je even geen foto's bij de user systemen - inclusief je eigen syste(e)m(en) ziet. Schrik dus niet, die komen in de loop van vandaag weer tevoorschijn!

Eventuele bugs kun je melden in dit subforum.

0
*