Nola estekatu Tag Cloud bat

Erabili CSS Tag Cloud estiloan

tag cloud elementuen zerrenda bisuala da. Askotan etiketa hodeien blogetan ikusiko dituzu. Flickr bezalako webguneetan ezaguna zen.

Etiketa hodeiak tamaina eta pisua aldatzen dituzten esteken zerrenda dira (batzuetan kolore gehiegi) atributu neurrigabearen arabera. Etiketa hodei gehienak etiketa horrekin etiketatuta dauden orrialdeen ospea edo etiketa oinarritzen dira. Baina etiketa hodei bat sor dezakezu zure gunean dauden elementuen zerrendatik, gutxienez bi erakusteko moduak izan ditzaten. Adibidez:

• Orden alfabetikoan artikulu zerrenda bat, artikuluen ospea adierazten duten estiloekin.
• Webguneen zerrenda ordena alfabetikoan, zein diren onena gustatzen zaizkizun adieraziz.
• Webguneen zerrenda, prezioen ordenan agertzen diren estiloekin, irizpideen aurrez zehaztutako irizpideak nola ixten diren adierazten du.
• Lagunen zerrenda, zure etxetik etxearen distantzia adierazten duten estiloak.

Zer egin behar duzu Tag Cloud bat?

Etiketa hodeia eraiki erraza da, bi gauza behar dituzu:

• Elementuen zerrenda (Web artikuluak, webguneak edo zure lagunak bezalakoak)
• Elementu bakoitzeko neurketa (eguneko orrialdekako ikuspegiak, zure rankingak 1-10 edo zure etxearen distantziak bezalakoak).

Etiketa hodei gehienak esteken zerrendak dira, beraz, elementu bakoitzak berarekin lotutako URL bat badago laguntzen du. Baina hori ez da behar ikusizko hierarkia bat sortzeko.

Esteka Popularen Tag Cloud bat sortzeko urratsak

Nire gunea eguneko orrien ikustaldiak lortzen dituzten artikuluak ditu, eta hau metriko erraza da etiketa hodei bat sortzeko. Beraz, adibide honetarako, etiketa hodei bat sortuko dugu artikulu zerrenda batean, 2007ko urtarrilaren 1eko astean, nire webgunean top 25 artikuluak.

1. Zehaztu zenbat maila nahi dituzun zure hierarkian.
   1. Zure hodeian maila asko izan ditzakezu zure zerrendako elementu gisa, kode hori lapurtera joaten da eta desberdintasunak oso gutxien izan ditzake. Gomendatzen dut zure hierarkiaren 10 maila baino gehiago izatea.
2. Maila bakoitzerako moztu puntuak erabakitzeko.
   1. Zure orrialderen eguneko ikustaldiak 1/10 xerra sartu ebaztea bezain sinplea da - hau da. zure webguneko orrialde handiena orrialde bakoitzeko 100 orrialde lortzen badituzu, 100 +, 90-100, 80-90, 70-80, eta abar bezalakoa izan liteke. Nire orrialdeak modu horretan moztu ditut.
3. Zerrendatu zure elementuak orrialde ikuspegiko ordenan, eta eman pausoan oinarritutako 2. mailan
   1. Ez kezkatu slot batean dagoen elementurik ez baduzu, hodeia interesgarria bihurtzen du.
4. Berritu zure zerrenda orden alfabetikoan (edo erabili nahi duzun bigarren motakoa).
   1. Hau da hodeia interesgarria bihurtzen duena. Ordena mailaren arabera sailkatuta uzten baduzu, beheko aldean txikiena den elementurik handieneko zerrenda izango da.
5. Idatzi zure HTML kodea sailkapena da. class = "tag4"> Streaming audio fitxategiak gehitzea

Behin zerrendako elementu bakoitzaren HTMLa eta agerraldia nahi duzun ordenean, orduan erabaki behar duzu. Paragrafo batean estekak jar ditzakezu eta egin beharko zenituzke. Baina hau ez litzateke semantikoki markatuko, eta zure CSS etiketa hodeian etortzen denik ere ez luke esteken zati handi bat ikusi. Zerrenda mota honetarako HTML hau itxura hau izango litzateke:

Streaming audio fitxategiak Best Web Design Software Webgune bat eraiki guztiz galdu Kolore simbolismoa

Horren ordez, zure etiketa hodeia sortzea aholkatzen dizuet. HTML eta CSS kode lerro batzuk baino gehiago da, baina edukia irakurgarria dela ziurtatzen du. HTML itxura hau izango litzateke:

• Streaming audio fitxategiak gehitzea
• Web guneko oinarrizko etiketak
• Best Web Design Software
• Webgune bat eraikitzea guztiz galdu
• Koloreen sinboloak

  Baina Non daude Estekak Tag Cloud-ekin

  Orain fun part-a lortu nahi dugu: CSS estiloak. Etiketa hodei bat estilizatzen duzunean, letra-tipoaren tamaina eta letra-tipoaren pisua normalean alda ditzakezu. Letra-tipoaren edo atzeko planoaren edo beste edozein estiloaren atributua ere alda dezakezu, baina tamaina eta pisua ohikoak dira.

  10 estiloko klaseak behar dituzu, bat etiketa bakoitzeko bakoitzeko:

  #cloud a.tag1 {font-size: 0.7em; font-weight: 100; } #cloud a.tag2 {font-size: 0.8em; font-weight: 200; } #cloud a.tag3 {font-size: 0.9em; font-weight: 300; } #cloud a.tag4 {font-size: 1.0em; font-weight: 400; } #cloud a.tag5 {font-size: 1.2em; font-weight: 500; } #cloud a.tag6 {font-size: 1.4em; font-weight: 600; } #cloud a.tag7 {font-size: 1.6em; font-weight: 700; } #cloud a.tag8 {font-size: 1.8em; font-weight: 800; } #cloud a.tag9 {font-size: 2.2em; font-weight: 900; } #cloud a.tag10 {font-size: 2.5em; font-weight: 900; }

  Hodeian zehar dauden estilo batzuk sartzea gustatuko litzaidake: zentratu hodeiko testua, lerro altuera bat ezarri hodeia irakurgarria izateko eta ziurtatu ainguraketen etiketak ez dituztela betetzen.

  #cloud {padding: 2px; lerro-altuera: 3em; text-align: center; } #cloud a {padding: 0px; }

  Azkenik, estandar semantikoaren metodoa erabiltzen baduzu (hau da, agindu gabeko zerrenda), bi CSS lerro gehiago gehitu behar dituzu, zerrendak ez baitu balak eta koska ez dauka:

  #cloud {marjina: 0; } #cloud li {erakutsi: lerroan; }