Gebruik CSS om 'n Tag Cloud te vorm
tag wolk is 'n visuele voorstelling van 'n lys van items. Jy sal dikwels merkwolke op blogs sien. Dit is gewild gemaak deur webwerwe soos Flickr.
Tag wolke is 'n lys van skakels wat verander in grootte en gewig (soms ook kleur), afhangende van sommige meetbare eienskappe. Die meeste tag wolke is gebou op grond van gewildheid of die aantal bladsye wat gemerk is met daardie spesifieke tag. Maar jy kan 'n merkwolk uit enige lys items op jou webwerf skep wat ten minste twee maniere bevat om dit te vertoon. Byvoorbeeld:
- 'N Lys van artikels in alfabetiese volgorde met die style wat die gewildheid van die artikels aandui.
- 'N Lys van webwerwe in alfabetiese volgorde met die style wat aandui watter jy die beste hou.
- 'N Lys van webredakteurs wat in prysopdrag voorkom, met die style wat aandui hoe naby elkeen by 'n voorafbepaalde stel kriteria kom.
- 'N Lys van vriende met die style wat die afstand van jou huis tot hul s'n aandui.
Wat het jy nodig om 'n Tag Cloud te bou?
Dit is maklik om 'n merkwolk te bou, jy benodig net twee dinge:
- 'N Lys van items (soos web artikels, webwerwe of jou vriende)
- 'N Meting vir elk van die items (soos bladsye per dag, jou posisie 1-10, of die afstand na jou huis).
Die meeste tag wolke is lyste van skakels, so dit help as elke item 'n URL het wat daarmee verband hou. Maar dit is nie nodig om 'n visuele hiërargie te skep nie.
Stappe om 'n Tag Cloud te bou van Gewilde Skakels
My webwerf het artikels wat elke dag bladsyvertonings kry, en dit is 'n maklike metrieke vir my om te gebruik om 'n tagwolk te skep. So vir hierdie voorbeeld, sal ons 'n merkwolk maak uit 'n lys artikels, die top 25 artikels op my webwerf vir die week van 1 Januarie 2007.
- Bepaal hoeveel vlakke jy in jou hiërargie wil hê.
- Alhoewel dit moontlik is om soveel vlakke in jou wolk te hê as wat jy items in jou lys het, word dit vervelig om te kode, en die verskille kan baie min wees. Ek beveel aan dat jy nie meer as 10 vlakke in jou hiërargie het nie.
- Besluit op die afsnypunte vir elke vlak.
- Dit kan dalk net so maklik wees om jou bladsy aansigte per dag in 1/10 snye te sny - dit wil sê. As die grootste bladsy op jou werf 100 bladsy aansigte per dag kry, kan jy dit as 100+, 90-100, 80-90, 70-80, ens. sny. Ek het my bladsye so geknip.
- Lys jou items in bladsybeskouing en gee hulle 'n rang gebaseer op stap 2
- Moenie bekommerd wees as jy nie enige items in sommige van die gleuwe het nie, wat net die wolk meer interessant maak.
- Plaas jou lys in alfabetiese volgorde (of enige tweede soort wat jy wil gebruik).
- Dit is wat die wolk interessant maak. As jy dit volgens rang gesorteer word, sal dit net 'n lys wees met die grootste items boaan tot by die kleinste onderaan.
- Skryf jou HTML sodat die rang 'n klasnommer is. class = "tag4"> Streaming-oudiolêers by te voeg
Sodra jy die HTML vir elke individuele lysitem het, en die volgorde wat jy wil vertoon, moet jy 'n besluit neem. Jy kan die skakels in 'n paragraaf plaas en jy sal gedoen word. Maar dit sal nie semanties gemerk word nie, en enigiemand sonder CSS wat na jou tagwolk kom, sal net 'n groot paragraaf skakels sien. Die HTML vir hierdie tipe lys sal soos volg lyk:
Streaming-oudiolêers byvoeg In plaas daarvan beveel ek jou aan om jou merkwolk te skep met 'n ongeordende lys. Dit is 'n paar meer lyne HTML- en CSS-kode, maar dit verseker dat die inhoud leesbaar maak, ongeag wie dit kom om dit te sien. Die HTML sal só lyk: Nou kry ons die prettige deel-die CSS-style. Wanneer jy 'n tagwolk styl, verander jy gewoonlik die lettergrootte en die lettertipe gewig. U kan ook die kleur van die font of die agtergrond of enige ander style kenmerk verander, maar grootte en gewig is tradisioneel. Jy benodig 10 styl klasse, een vir elke merker rang: Ek hou daarvan om 'n paar style rondom die wolk in te sluit: sentreer die wolk teks, stel 'n lynhoogte sodat die wolk leesbaar is en maak seker dat die ankermerke nie op hulle is nie: Ten slotte, as jy die semantiese stileringsmetode gebruik (dws die ongeordende lys), moet jy nog twee lyne van CSS byvoeg sodat die lys nie kolletjies het nie en nie ingedruk is nie:
Maar waar is die style vir die Tag Cloud?