Disseny de la columna lateral

La columna lateral consta de tres blocs:

  1. Un bloc anomenat Latest tweets, on el contingut es generat per l'activitat de l'usuari o usuària al servei de microblogging Twitter
  2. Un bloc anomenat Flickr, on el contingut es generat per l'activitat de l'usuari o usuària al servei de fotografies i videos Flickr
  3. Un bloc anomenat Tags o núvol de descriptors -com ja heu vist al mòdul 2- del bloc.

Seguint el nostre model, cadascun dels blocs tindrà una amplada de 276px, és a dir, coincidirà amb la dimensió horitzontal de 5 columnes de la retícula.

L'alçada de cada bloc és relativa al contingut de cada bloc i, per aquesta raó, la mida vertical és arbitrària.

Finalment, abans de continuar, creeu dos subcapes: latest_tweets i tags sota la capa lateral.

No és necessari explicar el bloc Flickr ja què és redundant i no aporta cap informació nova. Us deixem a vosaltres aquesta tasca -opcional, és clar-.

Creació del bloc "latest_tweets"

Seleccioneu la capa latest_tweets com la capa activa creeu les següents subcapes:

  • fons_latest_tweets: on dibuixareu el rectangle de color #ffffff. Les mides seràn 276px d'amplada i 460px -aproximadament- d'alçada. També afegireu l'icona del servei Twitter
  • text_latest_tweets: on incorporareu el contingut textual del bloc. Aquest test segueix l'estil del text del cos dels articles, és a dir:
    • Capçalera del bloc:
      • Mida: 23px
      • Tipus: Times New Roman
      • Color: #00ABEF
      • Estil: itàlica
    • Text dels tweets:
      • Mida: 11px
      • Tipus: Arial
      • Color: #333333
      • Estil: normal

Seleccioneu la subcapa fons_latest_tweets i creeu el rectangle a partir de les característiques que us hem assenyalat abans.

No us oblideu d'incorporar el logotip del servei Twitter a la cantonada superior dreta del rectangle!

Seleccioneu ara la subcapa text_latest_tweets i creeu el text de la capçalera del bloc (Latest Tweets).

Creeu finalment el text de cada tweet. Alineu-lo o justifiqueu-lo en relació del límit esquerra de la capçalera anterior.

Creació del bloc "tags"

La creació del bloc tags és idèntica en realització al bloc anterior. Creeu dos subcapes, fons_tags i text_tags per diferenciar el rectangle que servirà de fons del bloc (a la capa fons_tags) i el text que representaran els descriptors (a la capa text_tags).

El resultat seria el següent:

Visualització

Desactiveu la visibilitat de les retícules, graelles i qualsevol rectangle-guia i comproveu el resultat final.