Utilitzeu CSS per modelar un núvol d'etiquetes
El núvol d'etiquetes és una representació visual d'una llista d'elements. Sovint veuràs núvols d'etiquetes als blocs. Es va fer popular per llocs com Flickr.
Els núvols d'etiquetes són una llista d'enllaços que canvien de mida i de pes (de vegades també de color) depenent d'algun atribut mesurable. La majoria dels núvols d'etiquetes es basen en la popularitat o la quantitat de pàgines etiquetades amb aquesta etiqueta en particular. Però podeu crear un núvol d'etiquetes a partir de qualsevol llista d'elements del vostre lloc que tinguin almenys dues maneres de mostrar-los. Per exemple:
- Una llista d'articles en ordre alfabètic amb els estils que indiquen la popularitat dels articles.
- Una llista de llocs web en ordre alfabètic amb els estils que indiquen els que més us agraden.
- Una llista d'editors web que figuren en l'ordre de preus amb els estils que indiquen el tancament de cadascun d'ells amb un conjunt de criteris predefinits.
- Una llista d'amics amb els estils que indiquen la distància de la seva casa als seus.
Què necessites per crear un núvol d'etiquetes?
És fàcil construir un núvol d'etiquetes, només necessiteu dues coses:
- Una llista d'articles (com ara articles web, llocs web o els vostres amics)
- Una mesura per a cadascun dels elements (com ara visualitzacions de pàgines per dia, el vostre rànquing 1-10 o la distància a la vostra casa).
La majoria dels núvols d'etiquetes són llistes d'enllaços, de manera que ajuda si cada element té una URL associada. Però això no és necessari per crear una jerarquia visual.
Passos per crear un núvol d'etiquetes de vincles populars
El meu lloc té articles que obtenen visualitzacions de pàgines cada dia, i aquesta és una mètrica senzilla per poder utilitzar per crear un núvol d'etiquetes. Per tant, per a aquest exemple, crearem un núvol d'etiquetes a partir d'una llista d'articles, els 25 millors articles del meu lloc per a la setmana de l'1 de gener de 2007.
- Determineu quants nivells voleu a la vostra jerarquia.
- Tot i que és possible tenir tants nivells al vostre núvol com si tinguessis articles a la vostra llista, això es fa tediós al codi i les diferències poden ser molt mínimes. Recomano no tenir més de 10 nivells en la teva jerarquia.
- Decideix sobre els punts tallats per a cada nivell.
- Pot ser tan senzill com reduir les visites de la pàgina per dia a 1/10 rodes, és a dir. si la pàgina més gran del vostre lloc obté 100 pàgines vistes al dia, podríeu tallar-les com 100 +, 90-100, 80-90, 70-80, etc. Vaig tallar les visualitzacions de la pàgina d'aquesta manera.
- Feu una llista dels vostres articles a l'ordre de visualització de la pàgina i feu-los un rang basat en el pas 2
- No us preocupeu si no teniu cap element en algunes de les ranures, això només fa que el núvol sigui més interessant.
- Recorreu la vostra llista per ordre alfabètic (o el segon tipus que vulgueu utilitzar).
- Això fa que el núvol sigui interessant. Si ho deixeu ordenat per rang, només serà una llista amb els elements més grans de la part superior fins al més petit de la part inferior.
- Escriviu el vostre codi HTML perquè el rang sigui un número de classe. class = "tag4"> Afegir fitxers d'àudio en temps real
Una vegada que tingueu l'HTML per a cada element de la llista individual i l'ordre que voleu mostrar, necessiteu prendre una decisió. Podeu col·locar els enllaços en un paràgraf i s'haurà fet. Però això no estaria marcat de forma semàntica, i qualsevol que no tingui CSS que arribi al vostre núvol d'etiquetes vagi a veure un gran apartat d'enllaços. L'HTML d'aquest tipus de llista es veuria així:
Afegir fitxers d'àudio en temps real Etiquetes bàsiques per a un lloc web Millor programari de disseny web Creació d'una pàgina web per al total perdut Simbolisme de colors En canvi, us recomano que creeu el vostre núvol d'etiquetes amb una llista desordenada. Es tracta d'algunes línies més de codi HTML i CSS, però assegura que el contingut serà llegible sense importar qui vingui a veure-ho. L'HTML es veuria així: Ara arribem a la part divertida: els estils CSS. Quan escriviu un núvol d'etiquetes, normalment canvieu la mida de la font i el pes de la lletra. També podeu canviar el color de la font o el fons o qualsevol altre atribut d'estil, però la mida i el pes són tradicionals. Necessiteu 10 classes d'estil, una per a cada rang d'etiqueta: M'agraden incloure alguns estils al voltant del núvol: centreu el text del núvol, estableixi una alçada de línia perquè el núvol sigui llegible i assegureu-vos que les etiquetes d'ancoratge no tinguin relliscades: Finalment, si esteu utilitzant el mètode de disseny semàntic (és a dir, la llista desordenada), haureu d'afegir dues línies més de CSS de manera que la llista no tingui bales i no estigui sagnat:
Però on són els estils per al núvol d'etiquetes