Tweakers.net remake

[creative8500]

Tweakers.net remake

De pagina:

Vorige maand kwam ik op het idee om de site van Tweakers.net te herschrijven in XHTML en CSS, om verschillende redenenen, waaronder het testen van mijn vaardigheden, een opvallende status van Tweakers.net binnen de mark-up-weblog-community, en vanwege het nut dat zo'n grote site als voorbeeldfunctie heeft.

Hierop ben ik meteen begonnen met de code bestuderen, waarbij ik flink werd belemmerd door de JavaScript-code: er was nauwelijks HTML-code... Na de site allereerst HTML 4.01-valid te maken ben ik from scratch herbegonnen, om vervolgens zelf de mark-up samen te stellen. Dat ging véél vlotter dan het herschrijven, en als spoedig kon ik alle data verwerken in het ontwerp van HTML-code.

Toen ik een correcte samenstelling had van HTML-code kon ik aan de slag met CSS. Eerst de site ingedeeld in vakken, om de positionering te verzorgen. Vervolgens per sectie aan de slag gegaan met de layout, waarbij ik alle andere div's op display: hidden; instelde. Het algemene beeld terugkrijgen ging redelijk vlot, waardoor in de perfectionering het meeste tijd ging steken.

Een aantal punten die belangrijke aandacht hebben gekregen waren de koppen van de Update-tracker, waarvoor ik de zogenaamde Fahrner Image Replacement heb gebruikt. Een tweede punt waren de spacers die werden gebruikt tussen de inleidende paragrafen van artikelen, waar een plaatje werd gebruikt. Het is me gelukt om dat met de hiervoor bedoelde <hr />-tag eenzelfde effect te bereiken. De uitklapbare menuutjes zijn de derde: in Mozilla werken ze op puur CSS, maar in Internet Explorer moest er ook nog DHTML/JavaScript aan te pas komen. Toch is het bij slechts enkele regels JavaScript gebleven (twéé, om precies te zijn).

Al met al is het erg leerzaam geweest voor mij, en ik hoop dat het voor anderen zo mogelijk nog leerzamer kan zijn.

XHTML

De elementen zijn op basis van betekenis gekozen, waardoor bijvoorbeeld <h2>Nieuws</h2> werd verkozen boven <div class='b2'>Nieuws</div>.

Er zijn ordered lists gebruikt voor lijsten (update-, meuktracker) waar de volgorde op basis van tijd was.

Omdat Mozilla nog geen onderstueening voor <colgroup> biedt, heb ik bij twee van de drie kolommen van de headlines-tabel voor td-elementen class="tijd" en class="reacties" gebruikt.

div-elementen zijn alleen gebruikt voor 'sections' binnen dit document, nergens ter vervanging van bestaande elementen, of als loos element om een bepaald effect te bereiken.

Ben je het niet eens met gebruik van elementen? Laat het weten!

JavaScript

Waar eerst JavaScript werd gebruikt om HTML te genereren (mogelijk om bandbreedte te besparen, maar als soortement van template kan het ook gezien worden) wordt met PHP direct de mark-up gegenereerd. Hierdoor zijn de externe JavaScripts x/misc.js.dsp (24Kb) en x/j.js.dsp (33Kb) overbodig.

Het enige effect waarvoor JavaScript is gebruikt wordt via de officeuze CSS-property behavior aangeroepen bij listitems van de menu's, omdat Internet Explorer het :hover-pseudo-element zéér gebrekkig ondersteunt.

CSS

Plaatjes om border-effecten te creëeren, worden uiteraard omgezet naar de CSS-property border. Verder valt er weinig over te zeggen, omdat het gebruik van CSS voor layout volledig is, maar da's logisch. Op speciale elementen en gebruik van CSS zal ik later in dit topic ingaan.

Er zijn natuurlijk veel effecten bereikt met CSS, maar die kan ik natuurlijk onmogelijk allemaal behandelen. Bekijk de code, en als je over een specifiek onderdeel vragen hebt: stel ze.

doel van dit topic

1. uitleggen wat, waarom en hoe ik dit heb gedaan met XHTML en CSS.
2. evangeliseren van XHTML 1.1 strict, CSS 2.1 en Mozilla
3. reacties op het pagina zelf (waaronder debuggen)
4. eye-opener voor mensen die nog niet met CSS werken (zie 2)

Omdat ik dit niet allemaal in de start-post kwijt wil: bekijk de site (code, voornamelijk), als je vragen hebt: stel ze, daar is dit topic voor. Als er interesse voor is zal ik enkele onderdelen uitlichten, en vertellen hoe ik dat met CSS heb bereikt.

Als op-één-na-laatste: dit ontwerp is alleen een losse pagina, het is heel realistisch dat dergelijke code gebruikt zal worden: let alleen maar eens op de besparing van (24 + 33 = ) 57Kb op JavaScripts scheelt heel wat. Bovendien is deze cleane en overzichtelijke code makkelijk in onderhoud.

Remember: dit is allemaal XHTML 1.1 strict valid, er zijn geen tabellen gebruikt, het werkt goed in IE5.01, IE5.5, IE6.0, Mozilla Firebird, etcetera. Met goed gebruik van HTML, CSS, JavaScript en gezond verstand kun je óók sites van dit formaat bouwen. Of: juist zulke sites.

De Link

Niet geheel onbelangrijk: hier staat hij dus

http://www.letselplein.nl/~exemplarisch/tweakers/frontpage.html

[ Voor 104% gewijzigd door crisp op 24-11-2003 22:02 ]

[HunterPro]

ziet er goed uit op het eerste gezicht, alleen de validator zegt:

This page is not Valid XHTML 1.1!

Dus blijkbaar is er toch iets niet helemaal 100%? Maar zo te zien is de code duidelijk, netjes en goed. En dat is toch het belangrijkste, zeker boven validiteit volgens W3C

[crisp]

_{offtopic replies even getrashed, jullie waren er wel snel bij zeg}

Aangezien dit meer is dan een sitecheck heeft creative8500 van mij toestemming gekregen dit topic te openen; ik vond het iig een mooi initiatief met een verbluffend goed resultaat. \o/

[DaOverclocker]

srry voor offtopic;
maar deze remake laad 1000x sneller als de originele Tnet

edit:

Ondertussen is ie wel weer beetje traag geworden. (server load ^^)
Maar ik moet bij tnet altijd wachten op het bovenste plaatje, en dat hoeft hier niet.

[ Voor 52% gewijzigd door DaOverclocker op 24-11-2003 22:25 ]

[HunterPro]

henri schreef op 24 november 2003 @ 22:06:
srry voor offtopic;
maar deze remake laad 1000x sneller als de originele Tnet

geen javascript, en praktisch 0 serverload, en geen parsing vooraf. Could've figured that one out

[Mercarra]

Ik ben niet op de hoogte van alle technieken die je hier gebruikt. Het ziet er goed uit! Tweakers bv. zal er niet blij mee zijn als jij je code prijsgeeft. Zo kunnen namelijk vrij eenvoudig alle banners uit de site worden gesloopt. Of is het vrij onschuldig?

[Twisted]

Deze remake heeft dan nog geen load van honderden users die tegelijkertijd een pagina aanvragen.

Tenminste ... nog niet

[HunterPro]

mercarra schreef op 24 november 2003 @ 22:09:
Ik ben niet op de hoogte van alle technieken die je hier gebruikt. Het ziet er goed uit! Tweakers bv. zal er niet blij mee zijn als jij je code prijsgeeft. Zo kunnen namelijk vrij eenvoudig alle banners uit de site worden gesloopt. Of is het vrij onschuldig?

Deze code kun jij ook opvragen; het is namelijk de code die iedereen van tweakers.net ontvangt teneinde de pagina correct weer te kunnen geven

[sjuk425]

die doorzichtige menutjes zijn ook best ok.
en het is echt grijs allemaal, niet dat vieze bruine tintje.

Ik vind em mooier

[chem]

Uhm, mercarra; het is een statische pagina

[sjaakaq]

1 flauw dingetje:
de echte tweakers.net heeft bij de bovennavigatie (die menuutjes die uitklappen als je muis er overheen gaat) zwarte links met bordaux-rode 'hover'

jouw site heeft rode links met een soort highlight als je er overheen gaat

Als je begrijpt wat ik bedoel.

Ook zijn die menu's bij jouw semi-transparant en op tweakers.net zijn ze niet -transparant

Verder ben ik te nietig om dit te bevatten..

[ Voor 15% gewijzigd door sjaakaq op 24-11-2003 22:14 ]

[T.T.]

sjuk schreef op 24 november 2003 @ 22:10:
en het is echt grijs allemaal, niet dat vieze bruine tintje.

Ik vind em mooier

Dat kan je gewoon instellen in je layout settings, ik heb alles standaard op grijs staan. Maar daar gaat het niet echt over, het gaat er over dat je met XHTML en CSS een prima site kunt bouwen zonder je toevlucht te nemen tot javascript.

edit: Linkje naar je stylesheet.css toegevoegd.

[ Voor 44% gewijzigd door T.T. op 24-11-2003 22:33 ]

[Glashelder]

Chem: T.Net frontpage toch ook? Ik dacht dat die elke 5 minuten opnieuw geschreven werd ofzo ?

Onderste link van de GoT tracker is grijs tot je er met je muis overheen gaat.

[HunterPro]

leokennis schreef op 24 november 2003 @ 22:13:
1 flauw dingetje:
de echte tweakers.net heeft bij de bovennavigatie (die menuutjes die uitklappen als je muis er overheen gaat) zwarte links met bordaux-rode 'hover'

jouw site heeft rode links met een soort highlight als je er overheen gaat

Als je begrijpt wat ik bedoel.

Ook zijn die menu's bij jouw semi-transparant en op tweakers.net zijn ze niet -transparant

Verder ben ik te nietig om dit te bevatten..

hmm, bij zijn die menu'tjes echt semi-transparant hoor is een setting

kunnen we alsjeblieft ophouden over hoe het er uit ziet, en verder gaan over hoe hij deze klus heeft voltooid?

[ Voor 3% gewijzigd door HunterPro op 24-11-2003 22:17 ]

[David]

De invulveldjes van de TweakDSL Checker zijn wel erg onduidelijk. Ik moet zeggen dat de look and feel van de menuutjes met een meehoverende achtergrond beter is dan die van de huidige frontpage. Net werk!

[Anoniem: 28333]

menu's werken niet in opera 7.21 , voor mij al een reden om tegen 'te stemmen'

[Anoniem: 94369]

Misschien handig om te vermelden, bij mij werken onder Opera 7.21 die "Leuk grijze menu-tjes" niet. Verder ziet het er wel top uit. Ik zou willen dat ik wat "opbouwende kritiek" zou kunnen leveren, maar mij moet je niets vragen over programmeren ....


ARRRgghhhh alweer te laat

PS: de menu's helemaal onder aan de pagina (contact, zoeken etc.) doen het hier zowel onder IE als Opera niet

[ Voor 32% gewijzigd door Anoniem: 94369 op 24-11-2003 22:25 ]

[Twisted]

- De menutjes (Frontpage, Meuktracker e.d.) reageren veel sneller dan op de "echte" Tweakers.net

- Beneden op het einde vand e pagina worden de sponsors niet weergegeven: Als je met de muis over de velden heen gaat waar ze eigenlijk zouden moeten zijn geweest dan verschijnt er wel een pop-up net zoals op de "echte: tweakers.net

Voor de rest: Heel goed gedaan!

[Shakespeare2000]

dual-zip schreef op 24 november 2003 @ 22:14:
Chem: T.Net frontpage toch ook? Ik dacht dat die elke 5 minuten opnieuw geschreven werd ofzo ?

Onderste link van de GoT tracker is grijs tot je er met je muis overheen gaat.

Volgens mij zijn de bezochte links grijs in de Got Tracker . Trouwens jammer dat die links niet in een nieuw venster worden geopend. En het zoeken menuutje werkt nog niet, maar voor de rest: Petje af !

[DeadMetal]

Erg mooi
Vooral de menus zijn beter, klappen veel sneller open en zien er beter uit.

Bij je remake missen alleen de lijntjes boven en onder de nieuwsitems.

Bugje (IE): als ik mijn muis beweeg over de nieuwsitems, dan verdwijnen de icoontjes ervoor, om na een seconde of 2 weer tevoorschijn te komen.

[ Voor 5% gewijzigd door DeadMetal op 24-11-2003 22:22 ]

[Neus]

Mooi hooi, vooral als je de 'echte' source van de Frontpage met deze vergelijkt.

Wat ik niet wist maar nu wel is dat ik geen TABLES hoef te gebruiken om een opsommend menu te maken. Zelfs javascript zit IN de CSS.

Wat een werk, goed hoor !

[BoAC]

Alleen een probleem bij konqueror (KDE 3.1.4):
Het rechtermenu staat naast het linkermenu dwars over de content heen en de footer staat een stuk omhoog
Verder mijn compimenten!

[Anoniem: 39303]

heb je t al naar femme gemaild?

het grote voordeel is dat je niet niet al te veel javascript gebruikt, op snelle pc's bouwt dat allemaal wel lekker snel op, maar op de iets minder snelle een stuk langzamer.

feit is natuurlijk wel dat de javascripts van femme gecached worden en dat zal met jouw pagina een stuk minder snel gebeuren. Daarnaast bouwen jouw tracker dingen aanmerkelijk minder snel op dan die op de fp

[CH4OS]

Echt heel mooi gedaan dude!!

* CH4OS maakt een diepe, zeer diepe buiging, voor creative8500

Alleen jammer, dat de pagina niet vanzelf update enzo... Dat zou namelijk pas echt mooi zijn...

Kan je er niet gewoon een van die bekende trackers er in zetten, om dat op te lossen?

[ Voor 69% gewijzigd door CH4OS op 24-11-2003 22:41 ]

[Woudloper]

Ik denk dat de problemen zoals ze hierboven beschreven met name te maken hebben met de slechte onderstuening welke er nog op de meeste browsers is op het gebied van XHTML 1.1 en CSS 2.0 al zeg ik hetzelf. Overigens moeten hier nog wel CSS achtige hacks voor te vinden zijn...

Ontopic ziet de source er erg netjes uit en een stuk schoner (zoals hierboven reeds vermeld) in vergelijking tot de echte versie van Tweakers.net. Er zijn hier en daar overigens wel wat opmerkingen te maken, zo werken niet alle onderdelen zoals op de echte tweakers.net site (denk bijvoorbeeld aan: de search, infoboxen onderin (mist overal 1 plaatje), de verschillende nieuwsitems zijn niet onderstreept, e.d). Maar daar gaat het in dit topic niet over.

Heb je overigens voor de dropdowns gebruik gemaakt van het Suckerfish dropdowns artikel zoals deze bij alistapart stond beschreven of heb je deze ergens anders vandaan. Het idee dat je met lists werkt vind ik erg goed. Als ik de site overigens met lynx bekijk ziet deze er ook nog goed uit, echter zou ik dan nog wel een 'skip to content' link toevoegen aangezien dat wel zo gebruiksvriendelijk is voor de visueel gehandicapten, of je moet het menu lager in de source structuur zetten, zoals bij struikelblok.

Had je trouwens ook nog nagedacht over het Poll formulier. Ik loop daar meestel mee te stoeien hoe ik zoiets volgens een zo correct (XHTML, CSS) manier moet maken/weergeven.

[Anoniem: 70016]

ligt et nou aan mij of is het echt dat als je op een link klikt om naar een topic in het forum te gaan geen nieuw venster opent?

[ Voor 3% gewijzigd door Anoniem: 70016 op 24-11-2003 22:45 ]

[Belial_666]

In Opera 7.23 doen de uitklapmenu's het niet

[crisp]

Anoniem: 70016 schreef op 24 november 2003 @ 22:44:
ligt et nou aan mij of is het echt dat als je op een link klikt om naar een topic in het forum te gaan geen nieuw venster opent?

Het target attribuut is in XHTML strict verdwenen; het idee daarachter is dat het aan de user is om te bepalen of een link in hetzelfde venster of in een nieuw venster geopend moet worden (bv door in IE gelijktijdig de ctrl-toets ingedrukt te houden bij het klikken op de link).
Persoonlijk vind ik dat een slechte zaak eigenlijk, voor web applicaties e.d. kan het wel degelijk handig zijn om een ander venster te kunnen targetten, je bent wat dat betreft nu volledig op scripting aangewezen...

Death schreef op 24 november 2003 @ 22:46:
In Opera 7.23 doen de uitklapmenu's het niet

Lees de draad voordat je wat zegt, je bent pas de 3e die dit meldt

[ Voor 13% gewijzigd door crisp op 24-11-2003 22:51 ]

[ViNyL]

Errug nice...! Laadt idd erg snel...

Nieuwgierig mode.... Is dat afgesproken met Tweakers of gewoon eigen initiatief? Want hoe kom je aan alles wat er in de pagina gedaan wordt op PHP gebied etc..of zit dat er niet in in de frontpage ?

[iets]

Die menutjes klappen echt veel sneller open, surft veel beter op die manier (als het kon ).

[Belial_666]

JA duhhhh er word zo snel gepost dat ik dat niet kan bijbenen hoor

[Clay]

!
* Clay gaat daar eens goed naar kijken.
Heb al een paar dingetjes gezien die ik wel ff aan wil stippen

[Anoniem: 45909]

zo zeg dat laad ff stuk sneller dan originele T.Net
erg goed werk, ik hoop dat het strax ook allemaal toegepast word !

mijn complimenten !

edit: ik krijg kruisjes onderin bij het "powered by" link gedeelte (als je met je muis over een sponsor gaat)

IE 6

[ Voor 30% gewijzigd door Anoniem: 45909 op 24-11-2003 23:04 ]

[crisp]

vriendelijk verzoek alleen iets te posten als je ook echt inhoudelijk iets te melden hebt

[IschaGast]

Puik werkie hoor dat zonder meer. Waar haal je alle vrije tijd vandaan in godsnaam?

Wat ik ook erg jammer vind is dat de menuutjes nog niet werken in opera 7.21. Das wat ik zo kan zien het enige wat ik nog mis in opera.

Je moet alleen nog wel ff in je openingpost weghalen dat je geen <tables> hebt gebruikt. Ik zie namelijk wel een paar tables in de code maar daar kon je ook eigenlijk niet onderuit. Verder ziet het er zeker netjes uit.

Hoe lang ben je er eigenlijk mee bezig geweest?

En verder zou ik zeggen "Ga zo door!"

Als ik je pagina door websiteoptimization haal dan is jou page toch echt trager dan tweakers zelf. En niet zo'n beetje ook. Kan natuurlijk verschillende oorzaken hebben daar niet van.

[ Voor 21% gewijzigd door IschaGast op 24-11-2003 23:04 ]

[creative8500]

HunterPro: This page is not Valid XHTML 1.1!

Ik had daarnet (met de hand) alle data van vanmiddag 17:55 erin gezet, maar daarna niet meer gecontroleerd. Nu blijkt inderdaad dat ik een aantal maal "&" was vergeten om te zetten naar "&amp", en drie eurotekens naar "€".

henri: deze remake laad 1000x sneller als de originele Tnet
HunterPro: geen javascript, en praktisch 0 serverload, en geen parsing vooraf. Could've figured that one out

HunterPro heeft gelijk, maar henri ook. Het renderen van deze pagina duurt korter, omdat de posities van elementen binnen diep geneste tabellen vele malen lastiger zijn te berekenen. Het ontbreken van JavaScript moet je niet afdoen als reden, maar als kracht zien van dit ontwerp, zo lijkt mij.

Twisted_Bunny: Deze remake heeft dan nog geen load van honderden users die tegelijkertijd een pagina aanvragen. Tenminste ... nog niet

Mijn (zelfgeschreven) teller geeft nu 230 unieke bezoekers aan.

sjuk: en het is echt grijs allemaal, niet dat vieze bruine tintje.

Dat heb ik van het origineel overgenomen, de zilverkleurige skin kun je instellen.

leokennis schreef over het menu

Transparantie is al aanwezig bij de huidige versie, alleen niet bij alle browsers, en niet bij alle users. Het menu heb ik grafisch inderdaad gewijzigd, omdat ik de huidige zelf niet kan waarderen.

DiMension: De invulveldjes van de TweakDSL Checker zijn wel erg onduidelijk.

Ik heb nu de achtergrondkleur veranderd naar wit.

Twisted_Bunny over het menu

Daar ben ik mij van bewust, en ik vindt dit een van de grootst usability-verbeteringen.

Twisted_Bunny over de sponsors
DeadMetal over bugs en glitches

Welke browser gebruik je, op welk besturingsysteem, en welke versies?
Zou je een screenshot kunnen maken?

Shakespeare2000: Trouwens jammer dat die links niet in een nieuw venster worden geopend. En het zoeken menuutje werkt nog niet.

Het openen in een nieuw venster is de keuze van de gebruiker, en zou ik alleen willen gebruiken als instelling van MyTweakers. Bovendien is het target-attribuut in XHTML verdwenen, dus deze is niet bruikbaar. Hiervoor zou dus een, optioneel te activeren, W3C-DOM script voor gebruikt moeten worden.
Over het zoeken: het meeste was af, en ik wilde het hier nu al wel kwijt.

Anoniem: 39303 schreef op 24 november 2003 @ 22:34:
heb je t al naar femme gemaild?

het grote voordeel is dat je niet niet al te veel javascript gebruikt, op snelle pc's bouwt dat allemaal wel lekker snel op, maar op de iets minder snelle een stuk langzamer.

feit is natuurlijk wel dat de javascripts van femme gecached worden en dat zal met jouw pagina een stuk minder snel gebeuren. Daarnaast bouwen jouw tracker dingen aanmerkelijk minder snel op dan die op de fp

Ik heb Femme al een maand geleden hierover gemaild, maar tot op heden geen reactie. Daarom heb ik het nu maar zonder overleg met hem op GoT gepost. Vorige maand noemde ik hier mijn remake al, maar ik wilde Femme toch de eerste blik gunnen.

Over het cachen van JavaScripts: ik heb een pagina die 1Kb kleiner is dan het origineel, waarbij ik bovendien niet gebruik maak van die 57Kb gecachede JavaScript. Dat houd in dat alle content met gemak weergegeven kon worden zonder JavaScript.

En de update-tracker bouwt langzaam op, omdat deze helemaal aan het einde van het document staat, en hij de rest direct gerenderd kan worden als de data binnen is. De huidige site wordt pas gerenderd wanneer het volledige HTML-bestand binnen is, als ik mij niet vergis.

ThePerfectCell over de :visited-pseudo-selector

Handig hè? De usability wordt er inderdaad sterk door verbeterd.

Woudloper schreef op 24 november 2003 @ 22:42:
Ik denk dat de problemen zoals ze hierboven beschreven met name te maken hebben met de slechte onderstuening welke er nog op de meeste browsers is op het gebied van XHTML 1.1 en CSS 2.0 al zeg ik hetzelf. Overigens moeten hier nog wel CSS achtige hacks voor te vinden zijn...

Ontopic ziet de source er erg netjes uit en een stuk schoner (zoals hierboven reeds vermeld) in vergelijking tot de echte versie van Tweakers.net. Er zijn hier en daar overigens wel wat opmerkingen te maken, zo werken niet alle onderdelen zoals op de echte tweakers.net site (denk bijvoorbeeld aan: de search, infoboxen onderin (mist overal 1 plaatje), de verschillende nieuwsitems zijn niet onderstreept, e.d). Maar daar gaat het in dit topic niet over.

Heb je overigens voor de dropdowns gebruik gemaakt van het Suckerfish dropdowns artikel zoals deze bij alistapart stond beschreven of heb je deze ergens anders vandaan. Het idee dat je met lists werkt vind ik erg goed. Als ik de site overigens met lynx bekijk ziet deze er ook nog goed uit, echter zou ik dan nog wel een 'skip to content' link toevoegen aangezien dat wel zo gebruiksvriendelijk is voor de visueel gehandicapten, of je moet het menu lager in de source structuur zetten, zoals bij struikelblok.

Had je trouwens ook nog nagedacht over het Poll formulier. Ik loop daar meestel mee te stoeien hoe ik zoiets volgens een zo correct (XHTML, CSS) manier moet maken/weergeven.

De site is inderdaad ook nog gewoon te openen met Netscape 2 op mijn Windows XP-computer. Ik heb niet gebruik gemaakt van A List Apart, hooguit inspiratie opgedaan van Eric Meyer's voorbeeld; al had ik zelf dit systeem ook bedacht toen ik Mozilla installeerde en bemerkte dat :hover niet alleen op een link kon worden toegepast.

Over de skip-link: door correct gebruik te maken van headers is dit overbodig; gebruikers van Jaws kunnen meteen skippen naar de volgende, of een specifieke header. Over het lager positioneren in de source zal ik mijn gedachten laten gaan.

Over de poll heb ik al wel nagedacht, ik heb er ook al een aantal ideëen voor, maar die zijn van latere zorg.

Clay: Heb al een paar dingetjes gezien die ik wel ff aan wil stippen

Mooi, degelijk commentaar op de code kan ik zeer waarderen.

[Booster]

Mijn complimenten

De code ziet er op het eerste gezicht erg netjes uit, het laad snel, maakt minder gebruik van javascript, etc. Een stukje code dat ik zeker eens ga bekijken binnen nu en afzienbare tijd.

Ook in lynx zou T.net zeer goed te bekijken zijn met deze code. (woei! )

Hoe lang heb je in totaal nu besteed aan het omzetten?

Ik moet zeggen dat ik best benieuwd ben naar een reactie van Femme, zij het positief of negatief

[ Voor 10% gewijzigd door Booster op 24-11-2003 23:12 ]

[Anoniem: 36226]

Cool Ziet er lekker uit. In Safari (1.1) werkt het meeste ook wel. Zelfs de uitklap menu's (alleen de tweede regel wil niet altijd wegklappen). Op zich vreemd, ik denk dat ik die 's tot op het bot ga uitzoeken, voor onze vriend Dave Hyatt.

Maar daar we toch met standaarden bezig zijn, je CSS valideert niet.

Op zich niet zo gek, want ivm compatibiliteit zoek je je toevlucht naar custom properties. Eigenlijk vind ik dat die validator ook een modus moet hebben waarbij alle niet herkende properties niet gecontroleerd worden: dus als je een CSS property gebruikt, gebruik 'm dan goed (dus "width:0" is gewoon fout).

Maar ik zie ook veel properties die met een underscore beginnen. Dat heb ik nog niet eerder gezien, waar is dat voor?

Anyways, ik ga er morgen verder naar kijken, ik denk dat er een bugje of wat voor Safari uit voort gaan komen....

[Anoniem: 59586]

http://www.alistapart.com/articles/slashdot/

Hier remaken ze /. ook met xhtml, met wat statistiekjes over de gewonnen serverload en responsetijden onderin. Erg gaaf initiatief, leuk dat je het gedaan hebt, alleen, zorg er wel voor dat alles 100% wordt overgenomen. Je pagina is aardig, maar is grafisch nog niet identiek aan tweakers.net zoals het nu is.

In Internet Explorer 6 tenminste

[creative8500]

IschaGast: Als ik je pagina door websiteoptimization haal dan is jou page toch echt trager dan tweakers zelf.

Laatst heb ik dit ook gedaan, en ik kan mij herinneren dat dit vooral kwam doordat de plaatjes die via de externe JavaScript-bestanden uiteraard niet werden herkend door weboptimization. Ik denk wel dat het verstandig kan zijn om de illustraties naast de tekst over de sponsors via het DOM te laden, en pas wanneer de rest van de pagina is geladen, of zoals nu, bij een onmouseover.

Booster: Hoe lang heb je in totaal nu besteed aan het omzetten?

Ik ben zo'n 15 uur bezig geweest met wat je nu ziet, en daarna heb ik nog een keer de CSS volledig herschreven, waardoor het totaal op 20 á 22 uur komt.

Doekman: Maar ik zie ook veel properties die met een underscore beginnen. Dat heb ik nog niet eerder gezien, waar is dat voor?

De 'underscore hack', zie webgraphics - CSS: The Underscore MSIE-Only Hack.
Ik heb de volgende vorm gebruikt:

code:

element
{
    property: value;1 /* Mozilla, e.a. *.
    _property: value2 /* IE 5.x (IE6 ook, maar die reset ik) */
    _prop\erty: value1; /* IE6 only */
}

Syntaxis: alleen, zorg er wel voor dat alles 100% wordt overgenomen. Je pagina is aardig, maar is grafisch nog niet identiek aan tweakers.net zoals het nu is.

Waarom zou ik dát nou weer willen?

[Twisted]

Twisted_Bunny schreef op 24 november 2003 @ 22:20:
- Beneden op het einde vand e pagina worden de sponsors niet weergegeven: Als je met de muis over de velden heen gaat waar ze eigenlijk zouden moeten zijn geweest dan verschijnt er wel een pop-up net zoals op de "echte: tweakers.net

De fout komt na een CTRL-F5 niet meer voor. Maw, alles werkt weer correct

(Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6a) Gecko/20031030)

[We Are Borg]

Wat kan ik zeggen behalve: damn wat netjes

Ik heb de code gedownload + alle andere files (JS, CSS) om eens te kijken hoe jij bepaalde dingen hebt gedaan. De code ziet er gewoon super uit.

Ben benieuwd wat femme hier van vind.

Maakt het trouwens een verschil dat je de regels wit in de CSS zoveel mogelijk hebt weg gehaald en dat alles zoveel mogelijk op elkaar gepropt is. Is dat voordelige met laden van de website?

[ Voor 30% gewijzigd door We Are Borg op 25-11-2003 00:04 ]

[Anoniem: 49158]

heel gaaf!
misshien iets overgeslagen met lezen in dit topic maar:
- alleen werkt die zoekbox niet bij mij, ik krijg hem niet te zien.
win2000 IE6
- en als ik op een item klik en weer terug ga via "back" verschijnt eerst die flashbanner (die in het midden) links midden op de pagina en schiet dan pas op zijn plek.

[ Voor 12% gewijzigd door Anoniem: 49158 op 24-11-2003 23:58 ]

[Anoniem: 36226]

creative8500 schreef op 24 november 2003 @ 23:33:
De 'underscore hack', zie webgraphics - CSS: The Underscore MSIE-Only Hack.

Hmm, grappig. Ik ben helemaal niet zo op de hoogte van de CSS hacks, eigenlijk. Ik wil eigenlijk niets met die hacks te maken hebben.

Maar als je de mark-up netjes wilt houden, dan moet je wel. Maar nu m'n vraag: denk je dat de situatie xHTML+CSS-hacks beter is dan HTML/js-hacks alleen?

Waarom zou ik dát nou weer willen?

Geen reden natuurlijk. Maar ik denk wel dat je afgerekend wordt op het feit dat de pagina in alle browsers werkt, of bij de kleinere browsers (opera,safari) werkbaar is.

[Anoniem: 59586]

Waarom zou ik dát nou weer willen?

Jij misschien niet, maar als ik Femme was zou ik toch zeker een remake zien die niet aan mijn layout loopt te rukken

No offense, gewoon een vriendelijk bedoelde raad, MITS je dit door wilt zetten naar een live versie op T.net zelf...

Nogmaals, no offense

[Johnny]

crisp schreef op 24 november 2003 @ 22:48:
[...]

Het target attribuut is in XHTML strict verdwenen; het idee daarachter is dat het aan de user is om te bepalen of een link in hetzelfde venster of in een nieuw venster geopend moet worden (bv door in IE gelijktijdig de ctrl-toets ingedrukt te houden bij het klikken op de link).
Persoonlijk vind ik dat een slechte zaak eigenlijk, voor web applicaties e.d. kan het wel degelijk handig zijn om een ander venster te kunnen targetten, je bent wat dat betreft nu volledig op scripting aangewezen...

Bij webapplicaties ben je meestal op scripting aangewezen. Ik vind het niet erg, ik ga me steeds meer storen aan pagina;s die nieuwe vensters openen, ik heb ze liever in een tab, en dan beslis ik het zelf (middelste muisknop). Hopelijk krijgen nieuwe Mozilla versies de optie waarmee je nieuwe vensters standaard in een tab kan laten laden.

Dit design is natuurlijk een mooi begin, maar T.net heeft een behoorlijk aantal subpagina's. Het lijkt me daarom logisch dat men niet alleen de frontpage gaat vernieuwen, maar de gehele website in 1 keer, en dan is er altijd nog de matige browserondersteuning...

[jvaneijk]

Echt super en super netjes vooral die code is super overzichtelijk

[Willem]

Hmm misschien is dit wel een beetje op zaken vooruit lopen waarover ik 1) weinig weet en 2) weinig te zeggen heb, maar; is dit ook niet een beetje in de richting waarvoor Cheatah de functie van templatedevver heeft?

Als ik het mij goed herinner gaat hij de GoT-templates in XHTML opzetten, en wie weet ging (of gaat) t.net ook wel volgen.

Maar neemt niet weg dat ik het er mee eens ben dat het niet zou misstaan

[Tomsworld]

creative8500 schreef op 24 november 2003 @ 21:55:Als op-één-na-laatste: dit ontwerp is alleen een losse pagina, het is heel realistisch dat dergelijke code gebruikt zal worden: let alleen maar eens op de besparing van (24 + 33 = ) 57Kb op JavaScripts scheelt heel wat. Bovendien is deze cleane en overzichtelijke code makkelijk in onderhoud.

T voordeel van het js gebeuren is dat de client deze cached dus je mag die maar 1 keer tellen eigenlijk, dus aan dat argument van minder verkeer twijfel ik.

Voor de rest heel mooi gedaan.

[MAZZA]

Na het bekijken van de pagina, waarvoor mijn complimenten , vroeg ik mij af waarom je voor de menu's links op de pagina's geen (Un)Ordered Lists hebt gebruikt.

Ik heb het over deze teksten:

17:02 Tom's Hardware test Epson, HP en ...
17:00 Citogroep ontwikkelt toets voor comp...

Begrijp ik verkeerd en zou dat een verkrachting zijn van de bedoeling van lists of is er een reden waarom tabellen in dit geval de data beter beschrijven?

Ik vraag mij dit met name af omdat ik de laatste tijd steeds vaker pagina's zie spelen met lists. Zo is hier ook door Woudloper verwezen naar een menu gebasseerd op een unordered list die onlangs bij ALA werd behandeld.

Hierdoor heb ik begrepen dat deze lijsten een vrij brede inzet hebben. Vandaar mijn nieuwsgierigheid waarom dat in dit geval dan ook niet gebruikt kon worden

/edit:
In het artikel CSS Design: Taming Lists wordt ook het volgende vermeld:

What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. For example, I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

Of course the reason that we don’t mark them up in that way is that we don’t want a bullet in front of every link in our navigation area.

Enerzijds wordt er verteld dat het daadwerkelijk lijsten zijn met links maar dat het niet veel gebruikt wordt omdat er bullets voor de link komen. Hoewel dat ook op te lossen is wat het misschien weer ranzig maakt

De vraag blijft echter nog wat het beste die data beschrijft?

[ Voor 79% gewijzigd door MAZZA op 25-11-2003 02:04 ]

[joint_me]

Wow gaaf initiatief

FF een buggje, als ik de news-topics bekijk, staat er af en toe een tweede blokje voor de tijd deze verdwijnen na een mouseover.

Ik ga zeker deze nog eens doornemen, zipje zou handig zijn van de volledige folder

[IschaGast]

Als je toch een link wilt openen in een nieuw window is dit misschien iets: sitepoint site

[We Are Borg]

IschaGast schreef op 25 november 2003 @ 08:20:
Als je toch een link wilt openen in een nieuw window is dit misschien iets: sitepoint site

Mwah, het aanpassen van de links zodat ze een target blank mee krijgen is denk ik geen probleem voor de TS'er. Het is alleen 'jammer' dat er JS bij moet komen, omdat hij dat juist zo heeft weten te beperken vergeleken met de huidige T.net

[Woudloper]

We Are Borg, je hebt helemaal gelijk. Daarbij maak je de XHTML source zoals deze door de browser is gedownload weer non-XHTML door er middels javascript een target aan toe te voegen. Verder is het wellicht wel een idee om aan te geven of het een externe of een interne link is. Ik weet niet of XHTML daar een oplossing voor biedt, al helemaal niet of er iets over staat in de specs, maar ik kan mij zo voorstellen dat je als bezoeker externe links wel in een nieuw venster wilt laten openen en interne links gewoon in het huidige venster. Zoals crisp al eerder in het topic aangeeft is het idee achter de links dat je de gebruiker het zelf kan laten bepalen...

[crisp]

Woudloper schreef op 25 november 2003 @ 08:35:
We Are Borg, je hebt helemaal gelijk. Daarbij maak je de XHTML source zoals deze door de browser is gedownload weer non-XHTML door er middels javascript een target aan toe te voegen. Verder is het wellicht wel een idee om aan te geven of het een externe of een interne link is. Ik weet niet of XHTML daar een oplossing voor biedt, al helemaal niet of er iets over staat in de specs, maar ik kan mij zo voorstellen dat je als bezoeker externe links wel in een nieuw venster wilt laten openen en interne links gewoon in het huidige venster. Zoals crisp al eerder in het topic aangeeft is het idee achter de links dat je de gebruiker het zelf kan laten bepalen...

Ik gebruik heel vaak scripting om extra properties aan elementen toe te voegen, daarbij staat de X in XHTML nog steeds voor eXtensible en het doet niets af aan de wellformedness van je document. Een UA negeert die attributen gewoon (zoals het hoort), maar het maakt het geheel wel flexibeler. Dat het niet meer valideerd... tsja pech

[creative8500]

We Are Borg: Maakt het trouwens een verschil dat je de regels wit in de CSS zoveel mogelijk hebt weg gehaald en dat alles zoveel mogelijk op elkaar gepropt is. Is dat voordelige met laden van de website?

Het scheelt naar mijn mening voor de overzichtelijkheid. Ik heb ook vaak een overbodige aanduiding gebruikt, bijvoorbeeld:

code:

#top-menu #menuNieuws { width: 67px; }
#update-tracker #zoeken form { height: 100px; }
#content #headlines td a:visited { color: #B4B4B4; }

Dit om het bestand in te delen, zodat je snel vind wat je zoekt. Met name nuttig in een geval als deze, waarin veel anderen de code bekijken.

zkywalker:
- alleen werkt die zoekbox niet bij mij, ik krijg hem niet te zien.
win2000 IE6
- en als ik op een item klik en weer terug ga via "back" verschijnt eerst die flashbanner (die in het midden) links midden op de pagina en schiet dan pas op zijn plek.

"Over het zoeken: het meeste was af, en ik wilde het hier nu al wel kwijt."
Wat je vertelt over de flash-banner: lijkt mij een bug van de browser.

Doekman: Maar ik denk wel dat je afgerekend wordt op het feit dat de pagina in alle browsers werkt, of bij de kleinere browsers (opera,safari) werkbaar is.

Uiteraard, maar omdat ik niet beschik over Linux en OS X kan ik dit niet alleen.

Syntaxis: MITS je dit door wilt zetten naar een live versie op T.net zelf...

Daar doe ik de moeite niet voor, bovendien is het niet in alle gevallen mogelijk. Verbeteringen die ik doorgevoerd heb haal ik niet weg, en users zijn er na een week toch al aan gewend. GoT was na de overstap naar React ook sterk veranderd, dus dat heeft mijns inziens geen zin.

Johnny: Dit design is natuurlijk een mooi begin, maar T.net heeft een behoorlijk aantal subpagina's. Het lijkt me daarom logisch dat men niet alleen de frontpage gaat vernieuwen, maar de gehele website in 1 keer, en dan is er altijd nog de matige browserondersteuning...

Je zult begrijpen dat ik voordat ook maar iemand zich gaat bezigen met subpagina's er een reactie van gezaghebbende creweleden moet zijn.

willem169: Hmm misschien is dit wel een beetje op zaken vooruit lopen waarover ik 1) weinig weet en 2) weinig te zeggen heb, maar; is dit ook niet een beetje in de richting waarvoor Cheatah de functie van templatedevver heeft?

Waar doel je op met deze opmerking?

MAZZA: Na het bekijken van de pagina vroeg ik mij af waarom je voor de menu's links op de pagina's geen (Un)Ordered Lists hebt gebruikt.

Kijk eens beter:

code:

<h3><span>nieuws</span></h3>
<ol>
    <li>17:02 <a href="">Tom's Hardware test Epson, HP en ...</a></li>
    <li>17:00 <a href="">Citogroep ontwikkelt toets voor comp...</a></li>
    <li>16:48 <a href="">Microsoft zet tien miljard dollar opzij...</a></li>
</ol>

joint_me over een browser-bug en: Ik ga zeker deze nog eens doornemen, zipje zou handig zijn van de volledige folder.

Kom laat in de middag nog eens langs in dit topic.

IschaGast en We Are Borg: over het target-attribuut en de JavaScript-workaround.

Ik ken het artikel, en daarom heb ik deze oplossing zelf al genoemd:

creative8500: Het openen in een nieuw venster is de keuze van de gebruiker, en zou ik alleen willen gebruiken als instelling van MyTweakers. Bovendien is het target-attribuut in XHTML verdwenen, dus deze is niet bruikbaar. Hiervoor zou dus een, optioneel te activeren, W3C-DOM script voor gebruikt moeten worden.

Woudloper: Verder is het wellicht wel een idee om aan te geven of het een externe of een interne link is.

Uiteraard is het verstandig, maar dan moeten ook de nieuwsposters er gebruik van maken. Al is het in PHP natuurlijk makkelijk te laten automatiseren.

code:

<a href="http://www.hardware.nl" rel="external">Hardware.nl</a>

[Willem]

creative8500:
Waar doel je op met deze opmerking?

Dat als er daadwerkelijk sprake zou zijn van een "remake", het misschien handig is als er een eventuele samenwerking zou zijn tussen jou (vanwege dit initiatief) in dit geval en Cheatah die bezig is met de templates voor GoT.

Verder wil ik 1) niet op zaken vooruitlopen, 2) geen voorbarige conclusies trekken en 3) me niet met dingen bemoeien waar ik niets mee te maken heb maar misschien is het praktisch om dit even in gedachten te houden.

Catch my drift?

[crisp]

willem169 schreef op 25 november 2003 @ 08:58:
[...]
Catch my drift?

Cheatah doet niets met de huidige templates, maar is/gaat bezig met de opzet voor de nieuwe layout die een heel ander uiterlijk zal krijgen. Ikzelf doe het onderhoud van de huidige templates, en zal later betrokken zijn bij het omzetten van de nieuwe layout naar de templates

GoT krijg je ook niet makkelijk XHTML strict compliant, al is het alleen maar omdat de React RML output dat niet altijd is.

[ Voor 26% gewijzigd door crisp op 25-11-2003 09:10 ]

[Willem]

offtopic:

_{Mja niet de layout in de grafische zin als je 't mij vraagt, maar echt de templates die die layout moeten gaan weergeven, toch? En uit je laatste zin maak ik op dat hij dus eigenlijk niet echt een rol speelt in het hele gebeuren? Hmm confusing...}

[crisp]

willem169 schreef op 25 november 2003 @ 09:10:

offtopic:

_{Mja niet de layout in de grafische zin als je 't mij vraagt, maar echt de templates die die layout moeten gaan weergeven, toch? En uit je laatste zin maak ik op dat hij dus eigenlijk niet echt een rol speelt in het hele gebeuren? Hmm confusing...}

_{In ieder geval de omzetting van de nieuwe layout naar (X)HTML code, mij is gevraagd mee te helpen met het omzetten daarvan naar de templates omdat Cheatah dat niet in z'n eentje kan bolwerken - we praten ook over zo'n 200 templates waar veel logica in moet komen. Hoe dat verder gaat lopen is nu nog niet aan de orde, en dit is dus allemaal speculatief (en ook niet aan mij om iets over te zeggen - er valt ook nog niet veel over te zeggen); voorlopig kunnen we ons beter richten op de huidige layout en eventuele derivaten daarvan (denk aan alternatieve styles)}

[ Voor 6% gewijzigd door crisp op 25-11-2003 09:15 ]

[Willem]

_{Ik heb me ook vast op gebied begeven waar ik niet midden inzit, dus sorry maar vroeg het me af.. Cheatah heeft inmiddels ook wat duidelijkheid verschaft}

[Anoniem: 2935]

Bijzonder mooi gedaan. Code ziet er erg netjes uit, al had je voor een studie-object (wat dit toch min of meer is) de CSS wel iets duidelijker kunnen maken. Deel het desnoods in meerdere bestanden op, nu is er erg lastig iets van te leren.

Nog één puntje: Door de schone HTML is hij ook fantastisch browse-baar in text-only browsers als Lynx (ja, ik gebruik ook Lynx)...zou je bovenaan een menu kunnen maken zodat je direct naar de meest belangrijke stukken kan springen?

[T.T.]

Ik heb de pagina ook even op m'n pda (Palm Tungsten C / Web Browser) getest en dan werkt hij helaas minder goed dan de huidige frontpage.

• Hardware Software Games Internet Business Technologie, staan bijvoorbeeld onder elkaar

• Dropdown-menu's, zoals het menu aan de bovenkant van de pagina, zie je helemaal niet.

• Grijze scheidingsbalken tussen categoriën aan de linkerkant zie je niet.

• Geen tekst bij de eerste review (Topspeed-waterkoelingsysteem review)

• Menu'tjes aan de rechterkant (zoals Software updates enz) komen door de tekst heen.

[ Voor 10% gewijzigd door T.T. op 25-11-2003 09:51 ]

[BtM909]

Errug stoer gemaakt..... Wat ik grappig vind om te zien, is dat een hoop tags echt gebruikt zijn zoals bedoeld, wat de code een stuk over- / inzichtelijk maakt.

[creative8500]

Anoniem: 2935 schreef op 25 november 2003 @ 09:42:
Code ziet er erg netjes uit, al had je voor een studie-object (wat dit toch min of meer is) de CSS wel iets duidelijker kunnen maken. Deel het desnoods in meerdere bestanden op, nu is er erg lastig iets van te leren.

Nog één puntje: Door de schone HTML is hij ook fantastisch browse-baar in text-only browsers als Lynx (ja, ik gebruik ook Lynx)...zou je bovenaan een menu kunnen maken zodat je direct naar de meest belangrijke stukken kan springen?

Ik zal de CSS-code niet splitsen, maar ik zal wel even kort laten zien wat ik heb gedaan, zal ik vanmiddag een begin mee maken. Dat menu zal ik dan ook maken.

T.T.: Ik heb de pagina ook even op m'n pda (Palm Tungsten C / Web Browser) getest en dan werkt hij helaas minder goed dan de huidige frontpage.

http://pda.tweakers.net/

[Anoniem: 52632]

Zit er erg goed uit. Ik wil mijn sites in de toekomst ook op deze manier gaan maken.
Ik vraag me alleen af waarom je bij de nieuws items voor tabellen hebt gekozen en niet voor een andere oplossing. Niet dat ik de huidige oplossing niet goed vind werken. Maar ik hoor zoveel dingen over dat tabellen beter niet gebruikt kunnen worden.

kan je mij hier enige duidelijkheid over geven.

[Woudloper]

Ik heb net zoals andere ook ff naar de CSS source gekeken, maar moet ook zeggen dat het niet heel erg overzichtelijk is. En in het kader van het feit dat het een leerproject was lijkt het mij handig om er wel een soortement van structuur in aan te brengen.

Verder moet ik zeggen dat er wel heel erg veel style zaken in de CSS staan. Toen ik er in eerste instantie naar keek dacht ik wat is het veel en kan dat niet een stuk eenvoudiger...

[McVirusS]

Anoniem: 52632 schreef op 25 november 2003 @ 11:26:
Zit er erg goed uit. Ik wil mijn sites in de toekomst ook op deze manier gaan maken.
Ik vraag me alleen af waarom je bij de nieuws items voor tabellen hebt gekozen en niet voor een andere oplossing. Niet dat ik de huidige oplossing niet goed vind werken. Maar ik hoor zoveel dingen over dat tabellen beter niet gebruikt kunnen worden.

kan je mij hier enige duidelijkheid over geven.

Tabellen zijn niet eens taboe of iets dergelijks maar ze moeten wel goed gebruikt worden. Tabellen dus NIET gebruiken voor layout doeleinden maar voor weergeven van data die in tabellen hoort.

Overigens is hier genoeg over te vinden via de search en daarom zou ik het op prijs stellen als die discussie niet weer gevoerd wordt in deze thread.

[Anoniem: 52632]

McVirusS schreef op 25 november 2003 @ 11:42:
[...]


Tabellen zijn niet eens taboe of iets dergelijks maar ze moeten wel goed gebruikt worden. Tabellen dus NIET gebruiken voor layout doeleinden maar voor weergeven van data die in tabellen hoort.

Overigens is hier genoeg over te vinden via de search en daarom zou ik het op prijs stellen als die discussie niet weer gevoerd wordt in deze thread.

Het was niet mijn bedoeling een discussie op te starten over tabellen in het algemeen. Het enige dat ik wou weten waarom er voor tabellen is gekozen en niet voor iets anders.

Verder bedankt voor het antwoord.

[T.T.]

creative8500 schreef op 25 november 2003 @ 11:20:
http://pda.tweakers.net/

Dat weet ik ook wel, maar vaak gebruik ik de frontpage omdat er op pda.tweakers.net geen reacties staan, geen bronvermelding enz.
Ik noemde de fouten (ongetwijfeld van de browser op mn pda), om je er op te wijzen dat xhtml/css niet altijd fantastisch werkt en dat dus een pluspuntje van jscript is (een praktisch voordeel).

[ Voor 3% gewijzigd door T.T. op 25-11-2003 11:59 ]

[Anoniem: 53023]

Ik heb niet dit hele topic doorgelezen dus het kan wezen dat het al gezegd is, maar het lijkt wel of dit veel sneller is (in Firebird/win32) dan de officiele frontpage?

Knap gedaan

[BtM909]

Anoniem: 53023 schreef op 25 november 2003 @ 12:43:
Ik heb niet dit hele topic doorgelezen dus het kan wezen dat het al gezegd is, maar het lijkt wel of dit veel sneller is (in Firebird/win32) dan de officiele frontpage?

Doe dat voortaan dan wel

oa. hier: HunterPro in "Tweakers.net remake"

[Blaise]

Zijn er inmiddels al plannen van de crew om creative8500's code (gedeeltelijk) over te nemen?

[Anoniem: 97824]

T.T. schreef op 25 november 2003 @ 11:58:
[...]

Dat weet ik ook wel, maar vaak gebruik ik de frontpage omdat er op pda.tweakers.net geen reacties staan, geen bronvermelding enz.
Ik noemde de fouten (ongetwijfeld van de browser op mn pda), om je er op te wijzen dat xhtml/css niet altijd fantastisch werkt en dat dus een pluspuntje van jscript is (een praktisch voordeel).

Een pluspuntje van JS? Beetje raar lijkt me aangezien je met JS geen site kunt bouwen. Er wordt nog altijd HTML gegenereerd (waar XHTML nauwelijk van verschilt). Ik denk dat het meer de CSS die weinig wordt ondersteund.

Mooi gedaan trouwens! (maar dat had ik al eerder gezegd geloof ik :-))

[Woudloper]

Creative, klopt het trouwens dat het dropdown menu onder IE6 (op Windows 2000) soms wat schokt. Als ik het goed had had ik bij het commentaar van het Suckerfish Dropdown topic op 'A List Apart' hierover ook al wat gelezen, of iemand daar een oplossing voor had weet ik niet meer. Moet het nog even doorlezen als ik tijd heb...

[Anoniem: 59586]

Woudloper schreef op 25 november 2003 @ 15:15:
Creative, klopt het trouwens dat het dropdown menu onder IE6 (op Windows 2000) soms wat schokt. Als ik het goed had had ik bij het commentaar van het Suckerfish Dropdown topic op 'A List Apart' hierover ook al wat gelezen, of iemand daar een oplossing voor had weet ik niet meer. Moet het nog even doorlezen als ik tijd heb...

Ligt aan de cashe van IE, zet dit op "automatisch" en 't is weg

[We Are Borg]

Blaise schreef op 25 november 2003 @ 13:36:
Zijn er inmiddels al plannen van de crew om creative8500's code (gedeeltelijk) over te nemen?

Het topic bestaat pas net 1 dag, dus nu zeker nog niet denk ik . Ik ben wel benieuwd wat femme van deze code vind, maar ik heb zo'n gevoel dat hij dit topic ook met een bezoekje komt vereren

Zelf zou ik ook graag alles in 1 zipje willen hebben, want ik wil me hier erg graag in verdiepen

[BtM909]

We Are Borg schreef op 25 november 2003 @ 15:49:
Het topic bestaat pas net 1 dag, dus nu zeker nog niet denk ik . Ik ben wel benieuwd wat femme van deze code vind, maar ik heb zo'n gevoel dat hij dit topic ook met een bezoekje komt vereren

Woei, Femme in dit topic

Zelf zou ik ook graag alles in 1 zipje willen hebben, want ik wil me hier erg graag in verdiepen

Rechtermuisknop... Save as... ook goed?

Frontpage
Stylesheet
JavaScript
_{Ik kan alleen die favicon.ico niet tevoorschijn toveren}

[ Voor 7% gewijzigd door BtM909 op 25-11-2003 15:57 ]

[McVirusS]

We Are Borg schreef op 25 november 2003 @ 15:49:
Het topic bestaat pas net 1 dag, dus nu zeker nog niet denk ik . Ik ben wel benieuwd wat femme van deze code vind, maar ik heb zo'n gevoel dat hij dit topic ook met een bezoekje komt vereren

Heb Femme een mailtje gestuurd dus hopelijk komt hij hier even langs .

[Woudloper]

We Are Borg en BtM909, ik denk dat je dat aan creative moet overlaten aangezien hij de source ergens lokaal heeft staan. BtM909 heeft al een goede suggestie gedaan, maar hij vergeet in dit geval alle .htc codes. Deze heeft creative namelijk gemaakt om IE wel het :hover element te laten ondersteunen....

Overigens zou hier clay zijn idee van .htc erg goed van pas kunnen komen

[BtM909]

Woudloper schreef op 25 november 2003 @ 16:00:
BtM909 heeft al een goede suggestie gedaan, maar hij vergeet in dit geval alle .htc codes. Deze heeft creative namelijk gemaakt om IE wel het :hover element te laten ondersteunen....

fluck, you're right... Nou ja.. wachten op TS dan maar...

[We Are Borg]

BtM909 schreef op 25 november 2003 @ 16:02:
[...]

fluck, you're right... Nou ja.. wachten op TS dan maar...

Toch bedankt

creative8500 schreef op 25 november 2003 @ 08:44:
[...]

Het scheelt naar mijn mening voor de overzichtelijkheid. Ik heb ook vaak een overbodige aanduiding gebruikt, bijvoorbeeld:

code:

#top-menu #menuNieuws { width: 67px; }
#update-tracker #zoeken form { height: 100px; }
#content #headlines td a:visited { color: #B4B4B4; }

Dit om het bestand in te delen, zodat je snel vind wat je zoekt. Met name nuttig in een geval als deze, waarin veel anderen de code bekijken.

Het is dus puur layout technisch en niet vanwege laden van de pagina te versnellen? Persoonlijk vind ik wat enters en wat comments overzichtelijker, maar als dat de laadtijd van de pagina negatief beinvloed, dan kan ik je beslissing begrijpen

Daarnaast nog het vraagje van ik dacht Doekman waar je nog niet op in was gegaan; je CSS is niet vallid. Niet dat het resultaat er minder mooi om is, maar als dat nu ook vallid was dan was het helemaal geweldig . Is er een reden voor dat het niet vallid is of moet je er nog naar kijken?

enermax schreef op 25 november 2003 @ 16:08:
Ik denk dat Femme er helemaal niet op zit te wachten dat t.net wordt herschreven.
Kan het ook helemaal mis hebben.

Dat weet 1 persoon en dat is Femme . Het gaat mij ook niet persoonlijk om het feit of het wordt overgenomen bij de T.net frontpage, maar wat hij van de code vind. Zou grappig zijn als het werd overgenomen, maar daar zit nog veel meer werk aanvast voordat alles is veranderd.

[ Voor 99% gewijzigd door We Are Borg op 25-11-2003 16:12 ]

[enermax]

Ik denk dat Femme er helemaal niet op zit te wachten dat t.net wordt herschreven.
Kan het ook helemaal mis hebben.

[Woudloper]

enermax, ik denk ook niet dat je het zo moet zien. Het is a. een oefenproject van creative en b. is het gewoon leuk om te zien wat er allemaal kan door goe gebruik te maken van XHTML en CSS.

Ik zie het zelf meer in de lijn van het ReUsit geheel. Ik denk namelijk ook niet dat Jacob Nielsen zat te wachten op een nieuwe versie van zijn website. Maar de suggestie (de deelnemers bedoel ik) die zijn gedaan waren wel erg goed en net gebruik van XHTML en CSS.

[SchizoDuckie]

Hmmm ziet er erg mooi uit allemaal als ik het ff zeggen mag...

Maar ik kan me natuurlijk voorstellen dat tweakers.net méér is dan de frontpage, dat het modulair opgebouwd is... Lijkt me nogal een rampenwerk om alles om te katten...

[disjfa]

het is een rampenwerk. alleen een rampenwerk wat zowizo toch een keer gedaan moet worden. waarom dan niet laten helpen door een selecte groep enthousiaste forum bezoekers.

ik bedoel crisp en cheetah zijn al bezig met het forum.

en het staat eigenlijk mooi als technische site om natuurlijk met het nieuwste van het nieuwste te komen. dus ook de scripts.

[Willem]

Er moet niks gedaan worden en
XHTML is niet het nieuwste van het nieuwste.

[BtM909]

Woudloper schreef op 25 november 2003 @ 16:22:
enermax, ik denk ook niet dat je het zo moet zien. Het is a. een oefenproject van creative en b. is het gewoon leuk om te zien wat er allemaal kan door goe gebruik te maken van XHTML en CSS.

Ik zie het zelf meer in de lijn van het ReUsit geheel. Ik denk namelijk ook niet dat Jacob Nielsen zat te wachten op een nieuwe versie van zijn website. Maar de suggestie (de deelnemers bedoel ik) die zijn gedaan waren wel erg goed en net gebruik van XHTML en CSS.

Waar haal jij de tijd vandaan om al die weblogs bij te houden Moet je niet aan 't werk ofzo

[Anoniem: 97824]

willem169 schreef op 25 november 2003 @ 16:36:
Er moet niks gedaan worden en
XHTML is niet het nieuwste van het nieuwste.

Euh? Wat dan wel? (op het gebied van markup uiteraard)

[Woudloper]

BtM909: Waar haal jij de tijd vandaan om al die weblogs bij te houden Moet je niet aan 't werk ofzo

Tuurlijk wel, maar even wat afwisseling. Daarbij heb je daar ook [i]Loglezers/i] voor (welke ik dus ook gebruik) en deze werken erg handig al zeg ik hetzelf. Je kan ze zelfs gebruiken voor GoT als je wilt.

Mochten mensen het geheel willen downloaden, dan had een ieder dit natuurlijk al kunnen achterhalen door wat creatief te surfen, want dan zie je gewoon wat er in de directory listing staan en kan je één voor één alle bestanden downloaden al zeg ik hetzelf. Zo kan je daar ook makkelijk het .htc bestand downloaden waar Anne met lof over spreekt op zijn weblog.

[eghie]

BtM909 schreef op 25 november 2003 @ 15:53:
[...]

Woei, Femme in dit topic


[...]

Rechtermuisknop... Save as... ook goed?

Frontpage
Stylesheet
JavaScript
_{Ik kan alleen die favicon.ico niet tevoorschijn toveren}

Fav icoon is deze: Fav icoon

[creative8500]

McVirusS beantwoordde de vraag van armaniac

Woudloper: Verder moet ik zeggen dat er wel heel erg veel style zaken in de CSS staan. Toen ik er in eerste instantie naar keek dacht ik wat is het veel en kan dat niet een stuk eenvoudiger...

Bedenk dat "border-bottom: 1px solid black;" minder data is dan een GIF-plaatje. Bovendien zul je toch begrijpen dat wanneer je een property uit de CSS schrapt er meteen gebreken zullen opduiken in de layout.

annevankesteren beantwoordde de vraag van T.T.

Syntaxis beantwoordde de vraag van Woudloper

We Are Borg: Daarnaast nog het vraagje van ik dacht Doekman waar je nog niet op in was gegaan; je CSS is niet vallid. Niet dat het resultaat er minder mooi om is, maar als dat nu ook vallid was dan was het helemaal geweldig . Is er een reden voor dat het niet vallid is of moet je er nog naar kijken?

Hij had zijn vraag zelf al beantwoord:

Doekman: Op zich niet zo gek, want ivm compatibiliteit zoek je je toevlucht naar custom properties. Eigenlijk vind ik dat die validator ook een modus moet hebben waarbij alle niet herkende properties niet gecontroleerd worden: dus als je een CSS property gebruikt, gebruik 'm dan goed (dus "width:0" is gewoon fout).

Papa Eend: Maar ik kan me natuurlijk voorstellen dat tweakers.net méér is dan de frontpage, dat het modulair opgebouwd is... Lijkt me nogal een rampenwerk om alles om te katten...

Als de huidige PHP-code netjes object-georentieerd is lijkt me dat wel mee vallen, bovendien is een groot gedeelte nu al gedaan. De overstap naar nieuwe code hoeft niet meteen volledig te zijn: je kunt ook stuk voor stuk onderdelen verbeteren. Eerst de Frontpage en de nieuwsberichten, vervolgens de rest.

BtM909: Waar haal jij de tijd vandaan om al die weblogs bij te houden?

FeedDemon


Een voor degene, die er zo om heeft gesmacht:

• tweakers-code.zip [14Kb]
• tweakers-full.zip [235Kb]

[Anoniem: 36226]

creative8500 schreef op 25 november 2003 @ 19:27:
Hij had zijn vraag zelf al beantwoord:
[...]

Ik heb idd de neiging hard op na te denken, en dat type ik dan ook nog in

Maar omdat ik de problematiek even wat beter wilde begrijpen heb ik even een analyse gedaan, hierbij het verslag.

In verband met beperkte CSS ondersteuning van sommige browsers, worden de volgende custom properties gebruikt:
• -moz-box-sizing (mozilla)
• -moz-opacity (mozilla)
• filter (ie)
• behavior (ie)
en de volgende CSS hacks
• _margin-left (ie5+)
• _margin-\left (ie6+)
• _wi\dth (ie6+)
• _display (ie5+)
• _overflow (ie5+)

Als je die verwijdert krijg je valide CSS. De CSS validator van w3c geeft nog een warning op box-sizing die ik niet begrijp (all warnings, no special profile, all media):

w3c validator
property box-sizing does not exist for this profile, but is validated conforming to another profile

Bovenstaande wisten we eigenlijk al. Maar het gaat me even om doel 2 van dit topic:

2. evangeliseren van XHTML 1.1 strict, CSS 2.1 en Mozilla

De xHTML kun je gewoon met een programma valideren. Maar bij CSS kan dit dus niet zonder meer. Mijn vragen:
• Zijn er tools die hiermee rekening houden
• En belangrijker, wat is eigenlijk goed. _width:0 is goed, maar is _width:1 ook goed? En als je -moz-box-sizing opgeeft, maar box-sizing niet, is dat ook goed?

Nog even dit: ik kwam er net achter dat je niet altijd de eenheid in CSS lengtes hoeft op te geven (zoals ik in m'n eerste post zei), bij de lengte 0 mag je 'm weglaten. Maar bijv. IE5 accepteert width:1, terwijl het in Mozilla (terecht) geskipt wordt. Bedankt dat iedereen opgelet heeft

[tomato]

Anoniem: 36226 schreef op 25 november 2003 @ 20:22:
Als je die verwijdert krijg je valide CSS. De CSS validator van w3c geeft nog een warning op box-sizing die ik niet begrijp (all warnings, no special profile, all media):

box-sizing bestaat niet in CSS2, wel (voorlopig) in de CSS3 working draft.

Bovenstaande wisten we eigenlijk al. Maar het gaat me even om doel 2 van dit topic:

[evangaliseren van ...]

De xHTML kun je gewoon met een programma valideren.

Volgens mij las je het woord 'evangaliseren' als 'valideren'

[ Voor 6% gewijzigd door tomato op 25-11-2003 23:25 ]

[Anoniem: 36226]

tomato schreef op 25 november 2003 @ 23:24:
Volgens mij las je het woord 'evangaliseren' als 'valideren'

Dat bedoel ik niet helemaal. Ik redeneer als volgt: als je xHTML wilt gebruiken moet je perfect XML specificeren, alleen de xHTML tags en attributen gebruiken (en anders een correcte namespace opgeven voor additionele attributen geloof ik) en je moet de xHTML tags betekenisvol gebruiken.

Hier wordt CSS op een "goede manier" gebruikt. Toch voldoet de stylesheet niet aan de grammatica van CSS (ivm CSS hacks). Verder bestaan die custom properties in geen enkel profiel bij de validator van w3c, dus worden ze daar fout gerekend.

Maar bovenstaand is inderdaad valideren, maar dat heeft toch met evangeliseren te maken?

Een van mijn vragen zou dus zijn: moet een CSS validator bij een niet herkende property gaan klagen? Is het voorbeeld eigenlijk wel goed gebruik van CSS, er wordt namelijk niet voldaan aan de RFC? Of gelden er voor CSS andere regels dan voor xHTML?

Die vragen moeten gesteld worden, denk ik...

[Anoniem: 56669]

enermax schreef op 25 november 2003 @ 16:08:
Ik denk dat Femme er helemaal niet op zit te wachten dat t.net wordt herschreven.
Kan het ook helemaal mis hebben.

Nou ben ik helemaal niet bekent met website building, maar nou moet je mij vertellen waarom ?
Volgens mij heeft Femme meer een hekel aan mensen die de FAQ niet lezen, want ergens op tweakers.net staat dat de site 'volledig' gekopieerd mag worden.

[BtM909]

Anoniem: 56669 schreef op 26 november 2003 @ 09:49:
[...]


Nou ben ik helemaal niet bekent met website building, maar nou moet je mij vertellen waarom ?
Volgens mij heeft Femme meer een hekel aan mensen die de FAQ niet lezen, want ergens op tweakers.net staat dat de site 'volledig' gekopieerd mag worden.

offtopic:
Dit staat bovenin het reply-venster:
Reageer ontopic, plaats geen onzinnige berichten en ga niet flamen of uitlokken (trollen).

Ik reageer nu even offtopic, maar let vooral op de laatste paar woorden van bovenstaande zin. Gewoon negeren dus

[ Voor 5% gewijzigd door BtM909 op 26-11-2003 09:57 ]

[Justice]

Waarom heb je gebruik gemaakt van die underscore en geslashde properties? Ik heb het dus niet over de werking ervan, ik ben er mee bekend, maar het feit dat je ze in een persoonlijk project gebruikt om de slechte werking van de browsers te omzeilen. Heb je eerst geprobeerd om zonder deze syntax het geheel min of meer werkend te krijgen in deze browsers? Of zit er foutieve ondersteuning in?

Bij foutieve ondersteuning snap ik dat deze correcties nodig zijn, echter bij gebrek van ondersteuning van een css property (bijv. max-width) vind ik niet dat je dat moet compenseren door width vast te zetten. (bij persoonlijke sites dan, uit zakelijk oogpunt tellen zulke dingen wat zwaarder). Zelfde geld voor FIR/JIR etc, dat kan door middel van de content property. Op deze manier zorg je ervoor dat er geen reden is om betere browsers uit te brengen.

[ Voor 7% gewijzigd door Justice op 26-11-2003 10:22 ]

[Woudloper]

Justice, het lijkt het aardig op dat je het artikel van Peter-Paul Kock hebt gelezen, welke als titel heeft: "Keep CSS Simple". Hierin roept hij webdevelopers op om goed na te denken waneer ze CSS Hacks gaan toepassen en wel rekening moeten houden met het feit (dat in een ideale wereld) de fouten in een volgende versie (of update) de fouten zijn opgelost en dat je dan niet hack op hack gaat maken...

[HawVer]

Hm. Netjes hoor! Lijkt me toch wel een hell of a job om alles strics xhtml te maken. Ik ben benieuwd hoe femme erop reageerd.