Relatório de Desenvolvimento Da Plataforma Wedraw - PT

unlversldade de Avelro | ueCA | n1C | ro[ecLo 3 Ano
8elaLrlo de ro[ecLo
2010/2011

Docentes:
rof. 8en[amln !unlor
rof. Margarlda Almelda
rof. nuno 8lbelro
rof. edro Amado
Cr|entadores:
rof Ana veloso
rof. edro Amado
D|scentes:
Andre PorLa - 46236
lranclsco lerrelra - 46110
!oo 1avares - 46681
aulo Alves - 47661

1

weuraw | ro[ecLo | n1C | ueCA | unlversldade de Avelro | !ulho 2011
!"#$%&'() +" ,')-".%)
Ind|ce
lndlce de llguras ........................................................................................................................... 3
AgradeclmenLos ............................................................................................................................ 4
8esumo .......................................................................................................................................... 4
AbsLracL ......................................................................................................................................... 4
/$01%2#) 3 45%')+267) ................................................................................................................ 3
1.1 - CaracLerlzao do ro[ecLo .............................................................................................. 3
1.2 - roposLa lnlclal ................................................................................................................. 3
1.3 - LsLado da ArLe .................................................................................................................. 6
1.4 - ubllco-Alvo ...................................................................................................................... 7
1.3 - 8equlslLos funclonals ........................................................................................................ 7
1.6 - vlabllldade 1ecnlca ........................................................................................................... 8
CaplLulo 2 - ueslgn lunclonal ........................................................................................................ 9
2.1 - Lspeclflcao .................................................................................................................... 9
2.1.1 - nome ......................................................................................................................... 9
2.1.2 - Logo ......................................................................................................................... 10
2.1.3 - SlsLema vlsual e LayouL ........................................................................................... 10
2.1.4 - Cores ........................................................................................................................ 11
2.1.3 - 1lpografla ................................................................................................................. 12
2.2 - roLoLlpagem .................................................................................................................. 13
2.2.1 - uemo Crflca ........................................................................................................... 13
2.2.2 - roLLlpo de AlLa-fldelldade .................................................................................... 13
2.3 - verso 8eLa .................................................................................................................... 14
2.4 - verso llnal .................................................................................................................... 14
CaplLulo 3 - ueslgn Lecnlco ......................................................................................................... 13
3.1 - Lspeclflcao .................................................................................................................. 13
3.1.1 - ArqulLecLura do slLe ................................................................................................. 13
3.1.2 - Mapa de navegao ................................................................................................ 13
3.1.3 -lluxogramas ............................................................................................................. 16
3.1.4 - Mdulos CMS .......................................................................................................... 17
3.2 - roLoLlpagem .................................................................................................................. 18
3.2.1 - uemo 1ecnlca .......................................................................................................... 18
3.2.2 - roLLlpo de AlLa-ueflnlo ..................................................................................... 18
3.3 - verso 8eLa .................................................................................................................... 21
3.4 - verso llnal .................................................................................................................... 24

2

!"#$%&'() +" ,')-".%)
CaplLulo 4 - SlnLese dos LesLes efecLuados ................................................................................. 27
4.1 - 1lpos de LesLes ................................................................................................................ 27
4.2 - 8esulLados ...................................................................................................................... 27
4.2.1 - LlsLagem de bugs enconLrados ................................................................................ 27
4.2.2 - 1esLes de segurana ................................................................................................ 28
4.2.3 - 1esLes de compaLlbllldade ...................................................................................... 32
4.2.4 - 1esLes de usabllldade .............................................................................................. 33
CaplLulo 3 - SlnLese da esLraLegla de manuLeno e suporLe .................................................... 36
CaplLulo 6 - Anllses llnals ......................................................................................................... 36
6.1 - Anllse CrlLlca ................................................................................................................. 36
6.2 - SugesLes de desenvolvlmenLos fuLuros ....................................................................... 37
6.3 - roblemas LnconLrados e Solues ............................................................................... 38
CaplLulo 7 - Concluses .............................................................................................................. 39
8efernclas 8lbllogrflcas ........................................................................................................... 39
8lbllografla .............................................................................................................................. 39
Webgrafla ................................................................................................................................ 39
Anexos ......................................................................................................................................... 40

3

!"#$%&'() +" ,')-".%)
Ind|ce de I|guras
llg. 1 - Logo ................................................................................................................................. 10
llg. 2 - 1rs Colunas .................................................................................................................... 10
llg. 3 - SlsLema 960.gs ................................................................................................................ 10
llg. 4 - Crelha llnal ..................................................................................................................... 11
llg. 3 - aleLa de Cores ............................................................................................................... 11
llg. 6 - Lxemplos 1lpografla ........................................................................................................ 12
llg. 7 - ulmenses em uso .......................................................................................................... 12
llg. 8 - Seco da ArqulLecLura ................................................................................................... 13
llg. 9 - Mapa llnal ...................................................................................................................... 16
llg. 10 - lluxograma para download .......................................................................................... 16
llg. 12 - Lscolha de ramos a desenvolver ................................................................................... 19
llg. 11 - ulagrama de lnLeraco ................................................................................................ 18
llg. 13 - LsLado do desenvolvlmenLo aps proLoLlpagem .......................................................... 21
llg. 14 - reas de desenvolvlmenLo para a verso 8eLa ............................................................ 21
llg. 13 - 8esposLa do slsLema a valores lnvlldos ....................................................................... 29
llg. 16 - 8eglsLo de acLlvldade .................................................................................................... 31
llg. 17 - ulsposlLlvos ................................................................................................................... 32
llg. 18 - SlsLemas CperaLlvos ..................................................................................................... 32
llg. 19 - 8rowsers ....................................................................................................................... 32
llg. 20 - 1empo vs aco (uLlllzadores) ...................................................................................... 33
llg. 21 - 1abela de erros ............................................................................................................. 33

Ind|ce de 1abe|as
1abela 1 - CaraLerlsLlcas a lnLegrar ............................................................................................... 7
1abela 2- 1abela de bug Lracklng ................................................................................................ 27
1abela 3 - 8esolues .................................................................................................................. 33

4

!"#$%&'() +" ,')-".%)
Agradec|mentos
AnLes de comear gosLarlamos de agradecer aos nossos orlenLadores pelo apolo presLado ao
longo do desenvolvlmenLo desLa apllcao e aos docenLes da dlsclpllna de ro[ecLo.
Agradecemos Lambem a professora Cllnda MarLlns e aos esLudanLes de deslgn por se Lerem
dlsponlblllzado a parLlclpar nos nossos LesLes de usabllldade e ao rofessor Pelder Calxlnha
que se mosLrou sempre presLvel em relao as nossas duvldas. or flm agradecemos Lambem
aos nossos colegas que de uma forma ou ouLra nos foram a[udando ao longo desLe camlnho.

kesumo
LsLe documenLo apresenLa e descreve uma apllcao Web de desenho vecLorlal desenvolvlda
no mblLo da dlsclpllna de ro[ecLo, do 3 ano do curso de novas 1ecnologlas da Comunlcao
(n1C) na unlversldade de Avelro duranLe o ano lecLlvo de 2010/2011. nesLe relaLrlo
apresenLamos as solues Lecnlcas e grflcas adopLadas ao longo da consLruo desLe
pro[ecLo. AdlclonalmenLe, e descrlLa a evoluo dos nossos concelLos e ldelas, as dlflculdades
por ns enconLradas e os passos Lomados para as resolver. or flm, Lambem e descrlLo Lodo o
processo de Lrabalho desde a ldela lnlclal aLe a concluso da verso flnal.
no 1 caplLulo caracLerlzamos o pro[ecLo, comparamos o mesmo com a proposLa lnlclal e
descrevemos o esLado da arLe e o publlco-alvo. no 2 caplLulo crlamos uma anllse da
evoluo das solues grflcas desde o lnlclo aLe a verso flnal, enquanLo que no 3 caplLulo e
felLo o mesmo para as solues Lecnlcas. no 4 caplLulo anallsamos os Llpos de LesLes
efecLuados a apllcao e os resulLados obLldos. C 3 caplLulo lr cenLrar-se em quesLes de
suporLe e slsLemas de a[uda, enquanLo que o 6 caplLulo e dedlcado a uma anllse mals crlLlca
sobre o pro[ecLo desenvolvldo. or flm no 7 caplLulo so anallsadas as malores dlflculdades
enconLradas e solues uLlllzadas e com o 8 caplLulo efecLuamos algumas reflexes flnals.

Abstract
1hls documenL lnLroduces and descrlbes a vecLor drawlng web appllcaLlon developed ln
Lhe ro[ecLo (ro[ecL) class, of Lhe 3rd year of Lhe novas 1ecnologlas da Comunlcao course
(new CommunlcaLlon 1echnologles) aL Lhe unlverslLy of Avelro durlng Lhe academlc year of
2010/2011. ln Lhls reporL we presenL Lhe Lechnlcal and graphlcal soluLlons adopLed LhroughouL
Lhe consLrucLlon of Lhls pro[ecL. AddlLlonally we descrlbe Lhe evoluLlon of our concepLs and
ldeas, Lhe dlfflculLles we encounLered and Lhe sLeps Laken Lo resolve Lhem. llnally, Lhe
enLlre work process from Lhe lnlLlal ldea Lo Lhe compleLlon of Lhe flnal verslon ls descrlbed.

3

!"#$%&'() +" ,')-".%)
"#$%&'() * +,&-).'/0)
1.1 Caracter|zao do ro[ecto
LsLe pro[ecLo fol reallzado no mblLo da dlsclpllna de ro[ecLo e Lm por base elaborar uma
apllcao Web soclal 2.0 de desenho vecLorlal colaboraLlvo com o nome weuraw.
um dos concelLos chaves da Web 2.0 e o foco nos uLlllzadores: as lnLeraces enLre os mesmos
e a colaborao e a parLllha de uma mulLlpllcldade de ldelas dlferenLes em comunldades
onllne. Levar a que os uLlllzadores se[am no s consumldores esLLlcos, mas Lambem os
prlnclpals produLores de conLeudo do slLe. reLende-se enLo que os uLlllzadores possam crlar
documenLos de desenho vecLorlal - LanLo onllne e dlrecLamenLe na apllcao como off-llne - e
parLllh-los com a resLanLe comunldade. Ao serem submeLldos, esses flchelros podem ser
su[elLos a revlses e crlLlcas por parLe de ouLros uLlllzadores, ou enLo aproprlados para
lnsplrao, lncorporao em documenLos da sua auLorla ou slmplesmenLe para ver o processo
ou Lecnlcas uLlllzadas na sua concepo.
AdlclonalmenLe, o slLe Lambem adqulre uma componenLe semelhanLe as dlversas wlkls
exlsLenLes, permlLlndo que os auLores possam aproprlar-se das crlaes uns dos ouLros e
uLlllz-las como base de lnsplrao para as suas prprlas obras ou aprender novas Lecnlcas
Sendo para lsso necessrlo que Lodos os conLeudos se[am aberLos e edlLvels, segulndo a
lglca do modelo Wlkl. 1odas as submlsses podem Lambem ser comenLadas, crlLlcadas e
voLadas por ouLros uLlllzadores. LxlsLem Lambem espaos de dlscusso para lncenLlvar a
parLlclpao na comunldade e parLllhar ldelas e LuLorlals, prlnclpalmenLe sobre desenho
vecLorlal mas Lambem sobre ouLros lnLeresses para forLalecer a comunldade. or flm, exlsLem
Lambem espaos de compeLlo para desaflar os arLlsLas a serem cada vez melhores e lrem
alem do que [ esLo hablLuados, LenLando crlar algo novo.

1.2 roposta In|c|a|
A proposLa orlglnal no brleflng proposLo pelo rof. edro Amado e pela rof. Ana veloso, com
o nome Wlklgrflca, Llnha como Lema a crlao de uma plaLaforma onllne de desenho vecLorlal
que permlLlsse a crlao, parLllha e lnLeraco enLre os seus uLlllzadores. Mals
especlflcamenLe, preLendla-se uma apllcao Web 2.0 de parLllha de lnformao em que os
uLlllzadores fossem consumldores e produLores de conLeudos. Cs ob[ecLlvos preLendldos eram
a crlao e revlso de desenhos vecLorlals. A crlao de porLefllos de desenhos. A lnLeraco

6

!"#$%&'() +" ,')-".%)
e parLllha dos mesmos e por flm. A posslbllldade de se aproprlar e recrlar os dlversos flchelros
vecLorlals.
C grupo deparou-se enLo com o seu prlmelro dllema. A apllcao Web lrla necesslLar de dols
grandes componenLes, a ferramenLa de desenho vecLorlal em sl e Loda a comunldade e
lnLeraco envolvenLe. vlsLo o Lempo no posslblllLar o desenvolvlmenLo de ambas as parLes,
aps dellberao enLre o grupo e [unLamenLe com os orlenLadores, opLou-se por fazer
dlferenclar a apllcao pelo aspecLo mals soclal e wlkl" vlsLo essa componenLe ser a mals
lncomum de momenLo.

1.3 Lstado da Arte
uuranLe o levanLamenLo do esLado da arLe relaLlva ao nosso pro[ecLo, o grupo opLou desde o
lnlclo por no resLrlnglr a pesqulsa apenas a pro[ecLos slmllares, mas Lambem em alargar as
nossas perspecLlvas e pesqulsar comunldades exlsLenLes de parLllha de vrlos Llpos de medla.
1endo enLo em conslderao as premlssas lnlclals para esLe pro[ecLo, o grupo dedlcou-se a
lnvesLlgao e anllse de Lodas as apllcaes onllne enconLradas, organlzando-as numa Labela
para melhor processar os dados e focar as caracLerlsLlcas mals relevanLes de cada uma para o
nosso pro[ecLo, no s para o manLer compeLlLlvo como Lambem para a[udar a superar a
concorrncla.
ue enLre as comunldades anallsadas, deu-se desLaque a plaLaformas e Al's de desenho onllne
(blLmap e vecLorlal), formas de parLllhar e edlLar conLeudos, formas de lnLeraco enLre
uLlllzadores e os meLodos usados para aLlnglr os publlcos-alvo e lncenLlv-los a vlslLar
regularmenLe o slLe em quesLo.
ue enLre os meLodos para lncenLlvar os uLlllzadores, desLacam-se formas de recompensa como
slsLemas de repuLao, uLlllzados em con[unLo com badges" e ranklngs para premlar
uLlllzadores por conLrlbules a comunldade. 8elaLlvamenLe a esLruLura, desLacou-se a
posslbllldade de crlar galerlas pessoals para uLlllzar como porLefllo dlglLal.
CuanLo as apllcaes de desenho, a posslbllldade de edlLar conLeudo dlrecLamenLe no slLe
revela-se mulLo lmporLanLe, mas a capacldade de lmporLar flchelros crlados off-llne em
lllusLraLor ou programas semelhanLes Lambem e uma caracLerlsLlca essenclal, delxando
aqueles que se quelram envolver no slLe, mas que preflram usar ouLras ferramenLas, possam
parLlclpar. or flm, quanLo ao suporLe, a malorla dos slLes anallsados assenLa em plaLaformas
de CMS, em deLrlmenLo de wlkls ou ouLros formaLos (a Labela com o Lrabalho desenvolvldo
nesLa fase, enconLra-se no anexo 1).

7

!"#$%&'() +" ,')-".%)
Conslderaram-se as segulnLes apllcaes onllne como exemplos que lnLegram as
caracLerlsLlcas mals lmporLanLes a lnLegrar no nosso pro[ecLo:
Nome da
Ap||cao
Lndereo UkL Caracter|st|cas.
SLack Cverflow hLLp://sLackoverflow.com/
Slldo slsLema de ponLuao e slsLema de
badges.
newgrounds
hLLp://www.newgrounds.com
/
SlsLema de ponLuao lnovador e grande
colaborao na parLllha de maLerlals crlaLlvos
por enLre os uLlllzadores, crlando obras
colaboraLlvas.
uevlanLArL hLLp://www.devlanLarL.com/
lnLeraces soclals e organlzao de galerlas e
ponLuao.
Avlary
hLLp://www.avlary.com/Lools/
vecLor-edlLor
Apllcao de desenho vecLorlal mulLo bem
desenvolvlda. lnsplrao e concorrncla
dlrecLa.
1abe|a 1 - Carater|st|cas a |ntegrar
1.4 b||co-A|vo
arLe lmporLanLe do desenvolvlmenLo de um produLo e o esLabeleclmenLo de um publlco-alvo
a aLlnglr. no caso da weuraw, consldera-se Ler como publlco-alvo alunos e arLlsLas grflcos,
cu[as caracLerlsLlcas lncluem alguma llLeracla Lecnolglca, esplrlLo cooperaLlvo, maLurldade e
gosLo por aprender mals. u-se especlal desLaque aos que esLe[am em lnlclo de carrelra, vlsLo
Lerem mals nsla de aprender dlversos Lruques e dlcas para melhorar e faclllLar o seu Lrabalho,
mas sem desculdar arLlsLas mals experlenLes, com carrelras esLabelecldas e gosLo pelo
desenho vecLorlal, pela parLllha e por experlmenLar colsas novas.

1.S kequ|s|tos func|ona|s
AnLes de averlguar a vlabllldade Lecnlca, fol prlmelro necessrlo deLermlnar os requlslLos
funclonals para o pro[ecLo. ara Lal, crlou-se uma Labela como uma llsLagem de Lodas as
aces que serlam dese[adas no produLo flnal e de segulda dlvldlu-se essa Labela em Lrs reas
de colunas: os 8equlslLos proprlamenLe dlLos, os erfls de uLlllzador e rlorldade/lmporLncla,
aLrlbulda aos vrlos requlslLos de acordo com as perspecLlvas de vrlas !"#$%&'$,
represenLaLlvas do publlco-alvo. Com esLa dlvlso, preLendemos averlguar o que cada Llpo de

8

!"#$%&'() +" ,')-".%)
uLlllzador poderla querer da apllcao e asslm adequ-la para aLralr o malor numero posslvel
de pessoas. na coluna dos 8equlslLos, llsLaram-se as funclonalldades dese[adas no produLo
flnal. LsLes foram dlvldldos em fronL-end e back-end, e posLerlormenLe agrupadas em
con[unLos semelhanLes de funclonalldade.
No front-end:
8equlslLos relaLlvos aos f|che|ros: operaes que envolvam a uLlllzao da ferramenLa de
desenho vecLorlal. Ldlo, o (!)%'*, o *%+&)%'*, eLc.
8equlslLos relaLlvos a |nteraco: operaes dlrecclonadas para a componenLe soclal da
comunldade, funes de lnLeraco enLre os dlversos uLlllzadores.
8equlslLos pessoa|s: operaes fundamenLals para a lnLeraco do uLlllzador com o slLe.
lnclul Lodas as funes de crlao de conLa, alLerao de perfll, logln, logouL, eLc.
8equlslLos relaLlvos a a[uda: operaes com vlsLa a dlmlnulo da dlflculdade na uLlllzao
do slLe.
8equlslLos relaLlvos a pesqu|sa: operaes de pesqulsa por parLe do uLlllzador. vlsa a
locallzao de flchelros, pessoas, eLc.
No back-end:
lnclulram-se as operaes de melhorla do funclonamenLo do slLe (como edlo geral,
mensagens globals, eLc) asslm como as de desenvolvlmenLo da comunldade (aLrlbulr
recompensas, lnlclar compeLles). Aps a crlao de uma prlmelra verso da llsLagem dos
requlslLos funclonals, o grupo deparou-se com o desaflo de como fllLrar a lnformao al
recolhlda. A soluo passou pela crlao de arqueLlpos de uLlllzadores: personas baseadas nos
vrlos Llpos de uLlllzadores crlados anLerlormenLe e represenLanLes do publlco-alvo.
Lncarnando enLo cada uma dessas personas, para cada requlslLo represenLado na Labela fol
aLrlbulda uma ponLuao, a parLlr da qual fol felLa uma medla relaLlvamenLe a sua
lmporLncla.
lol enLo posslvel ver que a seco de lnLeraco e pessoal se relevaram as mals lmporLanLes,
esLando o publlco-alvo poLenclalmenLe mals lnLeressado nos aspecLos comunlLrlos, do que na
ferramenLa de desenho em sl, apesar de esLa Lambem deLer basLanLe lmporLncla. 1endo por
flm esLes resulLados, verlflca-se enLo que a rea mals essenclal para o sucesso da apllcao - e
poLenclalmenLe a mals complexa - e a con[ugao da ferramenLa de desenho com a
comunldade. A Labela compleLa pode ser vlsuallzada em anexo.

1.6 V|ab|||dade 1cn|ca
8ecorrendo a llsLagem (anexo 3) dos requlslLos necessrlos e Lendo os mesmos em
conslderao, o grupo parLlu em busca das melhores Lecnologlas a uLlllzar. ulvldlu-se enLo em

9

!"#$%&'() +" ,')-".%)
quaLro caLegorlas necessrlas para pesqulsar: Llnguagens Server-Slde, Llnguagens CllenL-Slde,
CMSs e Als de desenho vecLorlal. Convem menclonar a necessldade de um suporLe flslco em
sl para a apllcao, no caso desLe pro[ecLo esse suporLe so os servldores llnlab da uA, vlsLo
serem os que nos esLavam mals facllmenLe dlsponlvels.
8elaLlvamenLe as llnguagens Server-Slde, exlsLe uma pleLora de solues posslvels de
lmplemenLar. LnLre elas enconLram-se: P, AS, Coldluslon e Lasso. Aqul a opo recalu
sobre o P pols ser a llnguagem que nos era mals famlllar e fcll de uLlllzar.
As llnguagens CllenL-Slde lnclulam como solues llash, SllverllghL e !avascrlpL. ara manLer
boas prLlcas de uLlllzaes, opLou-se por uma comblnao de P1ML+CSS+!avascrlpL,
consegulndo asslm alcanar o malor numero de uLlllzadores e dlsposlLlvos posslvels.
ue forma a faclllLar no s o Lrabalho de crlao como Lambem o de manuLeno, opLou-se
por uLlllzar um CMS ou plaLaforma de consLruo de redes soclals, aqul novamenLe o grupo
dlspunha de vrlas opes, sendo elas: Wordpress, urupal, !oomla!, Llgg e llgg. ue enLre eles,
o urupal aparenLou ser o mals versLll e robusLo de eles Lodos, pelo que fol ele o CMS
adopLado.
or flm, uma das componenLes mals lmporLanLes era a Al de desenho vecLorlal. Aqul o grupo
dlspunha de duas solues. A prlmelra era o SvC-edlL, uma Al open source de desenho
vecLorlal sem resLrles de uso. A segunda opo era a Al de desenho vecLorlal da Avlary, o
8aven. LsLa ulLlma para ser uLlllzada preclsava de um conLraLo de uso para ser uLlllzada. vlsLo a
falLa de Lempo para ver se serlamos auLorlzadas a uLlllz-la e a falLa de vonLade de uLlllzar as
ferramenLas da concorrncla, a escolha recalu naLuralmenLe sobre a Al SvC-edlL.

Cap|tu|o 2 - Des|gn Iunc|ona|
2.1 Lspec|f|cao
2.1.1 Nome
C prlmelro passo para a consLruo da ldenLldade do nosso pro[ecLo fol a declso sobre qual
lrla ser o nome, vlsLo ser uma das componenLes mals lmporLanLes da ldenLldade de um slLe,
preclsando de ser sonanLe, reconheclvel e fcll de dlzer. ara Lal, o grupo comeou por anallsar
os nomes [ exlsLenLes no mercado e procurar nomes que passassem a ldela das duas grandes
componenLes do pro[ecLo. A parLlr dessa pesqulsa crlou-se uma llsLa com dlversos Lermos
relaclonados, que se LenLaram comblnar em um novo nome. Aps vrlas lLeraes e sesses

10

!"#$%&'() +" ,')-".%)
de bralnsLormlng, [unLamenLe com alguma colaborao por parLe dos CrlenLadores, chegmos
a uma llsLa flnal de clnco nomes: uraw lL!, Canvas 2.0, Canvanlze, 1abula 8asa, weuraw.
no flm, a escolha recalu sobre o ulLlmo nome, vlsLo a con[ugao das palavras we" e draw"
passar a ldela de um local onde se desenha em con[unLo, Locando asslm LanLo a componenLe
da comunldade e colaborao, [unLamenLe com a do desenho e arLe.

2.1.2 Logo
C logo weuraw reLlrou a sua lnsplrao de um dos Lermos que se
uLlllzou duranLe a crlao do nome e Lambem em um dos
concelLos Web 2.0. LsLe Lermo e o Cloud. no Lendo sldo usado
como nome por haver apllcaes semelhares [ usando o nome,
opLou-se por o usar na consLruo do logLlpo. uessa forma,
Lemos aqul represenLado o aspecLo da comunldade aLraves de
uma nuvem, que slmbollza concelLos lnLerneL, parLllha e Lrabalho
colaboraLlvo. !unLamenLe com a nuvem foram adlclonadas plngas" de LlnLa, delxando
Lransparecer o aspecLo arLlsLlco de desenho aqul presenLe.
or flm, Lemos o prprlo nome lnserldo no logLlpo, fazendo recurso a fonLe Plruko 8lack
AlLernaLe", devldo as suas formas slmples e arredondadas, que LanLo se adequam com o
prprlo desenho da nuvem, como com a ldela de vecLorlal (consLruo do logo demonsLrada
no anexo 4).

2.1.3 S|stema V|sua| e Layout
A base do slsLema vlsual do pro[ecLo e o slsLema 960gs (960 grld
sysLem) de 12 colunas. C que lsLo slgnlflca e que o layouL do
weuraw possul uma largura de 960px, dlvldldos em 12 colunas,
cada uma com uma largura de 60px e uma margem de 10px em
cada um dos lados. lsLo efecLlvamenLe leva a que exlsLa uma
margem de 10px em cada um dos lados do layouL, uma goLelra
de 20px enLre as colunas e uma rea uLll de 940px de largura.
AdlclonalmenLe, uLlllzou-se uma grelha de ,'$")-&" com
lnLervalos de llnha deflnldos em 13px como forma de melhor
organlzar e allnhar os conLeudos de LexLo com os conLeudos de
I|g. 1 - Logo
I|g. 3 S|stema 960.gs
I|g. 2 1rs Co|unas

11

!"#$%&'() +" ,')-".%)
lmagem e dlsposlLlvos de lnLeraco. A malor vanLagem da uLlllzao desLe slsLema de grelha e
a sua modulao, podendo ser usado em dlferenLes conflguraes. no caso da weuraw,
opLou-se por um slsLema de 3 colunas, cada uma com 300px. A parLlr dal, pudemos crlar vrlos
esLudos de clnzenLos para decldlr efecLlvamenLe o layouL de cada uma das pglnas e consLrul-
lo a pouco e pouco, ao longo de vrlas lLeraes que evolulram desde o demo grflca aLe ao
produLo flnal onde pequenos a[usLes foram efecLuados. or flm, crlou-se um LemplaLe no
drupal do nosso pro[ecLo e segulndo o esLudo de clnzenLos e desenhos de layouL, fazendo
recurso a css, php e os prprlos mdulos do drupal.

I|g. 4 Gre|ha I|na|
2.1.4 Cores
A ldela lnlclal que se Leve para o esquema cromLlco
era a da apllcao ser como uma Lela onde os vrlos
auLores se pudessem expressar e porLanLo no
sobrecarregar a vlso com mulLas cores nem com
cores forLes. CpLou-se enLo por usar basLanLe o espao em branco. Como no se pode Ler um
slLe somenLe em branco no enLanLo, usou-se um clnzenLo-escuro para a barra do .%%/"# e para
os LexLos. ara os LlLulos e ouLras reas da apllcao opLou-se por um azul semelhanLe ao de
logo e prxlmo do clano. Lscolheu-se essa cor por se acredlLar que e uma cor agradvel a vlsLa
e ser prxlma de uma das cores bslcas do slsLema CM?k. or flm, para obLer algum conLrasLe
e desLaque nos )-&0$, usa-se de forma basLanLe conservadora o magenLa, que Lambem e uma
componenLe do slsLema CM?k LanLo usado em apllcaes vecLorlals. Asslm consegulmos obLer
um conLrasLe agradvel e suave ao olhar.
I|g. S a|eta de Cores

12

!"#$%&'() +" ,')-".%)

2.1.S 1|pograf|a
1raLando-se de uma apllcao Web, e lmporLanLe escolher fonLes que se[am comuns aos
dlversos slsLemas operaLlvos e verses alLernaLlvas semelhanLes as orlglnals para quando essas
no esLlverem dlsponlvels, de forma a manLer a coerncla do slLe. LxlsLem enLo dols Llpos de
fonLes usados: Clll Sans M1 para os LlLulos como prlmelra opo, com a 1rebucheL MS como
alLernaLlva caso a prlmelra no esLe[a presenLe no slsLema. ara os resLanLes LexLos, usa-se
verdana como prlmelra opo, seguldo de PelveLlca. Lm ulLlmo caso, se nenhuma das opes
esLlver presenLes, o defaulL para Lodos os LexLos e LlLulos e a Arlal.

I|g. 6 Lxemp|os 1|pograf|a
or flm deflnlram-se as segulnLes dlmenses para os LexLos, sempre com um leadlng de 13px:
36pL para os LlLulos de malor dlmenso,
18pL para os elemenLos na barra de navegao,
16pL para os LlLulos de menor dlmenso,
12pL para os LexLos resLanLes e )-&0$,

I|g. 7 D|menses em uso

13

!"#$%&'() +" ,')-".%)
um caso unlco e a uLlllzao de LexLo a 11pL no .%%/"# a clnzenLo com lnformao weuraw.
2.2 rotot|pagem
2.2.1 Demo Grf|ca
ara o desenvolvlmenLo do proLLlpo de balxa fldelldade o grupo alnda no dlspunha de
LemplaLes desenhados, Lendo slmplesmenLe llsLas de requlslLos e um slmples mapa de slLe.
CpLou-se enLo por no comear [ a fazer recurso das vrlas llnguagens de programao e
consLruo de slLes no desenvolvlmenLo da parLe grflca do proLLlpo, mas slm por fazer um
vldeo. C passo lnlclal fol enLo o de fazer vrlos 1%20(!$ de uma )'&*-&3 !'3" para a
apllcao, acabando por se opLar o que possula um aspecLo mals neuLro e cu[o layouL nos
pareceu mals lnLeressanLe. SeguldamenLe, deflnlram-se dols percursos de lnLeraco para as
!"#$%&'$ crladas (Art|sta Novato e Art|sta exper|ente, os perfls deLalhados com mapas
concepLuals de Lodas as personas podem-se enconLrar em anexo) e crlaram-se 1%20(!$ para
as seces que lrlam ser vlslLadas por cada um. or flm, crlou-se uma anlmao em flash,
narrada, que apresenLou as duas !"#$%&'$ que serlam seguldas ao longo do vldeo, as razes
para uLlllzarem a apllcao e o seu percurso ao lnLeraglrem com a apllcao, [unLamenLe com
breves expllcaes sobre os passos que fazlam e um pouco de humor para melhor capLar a
aLeno. um exemplo do mockup enconLra-se no anexo 3.
2.2.2 rott|po de A|ta-f|de||dade
AnLes do desenvolvlmenLo da verso 8eLa, fol anLes necessrlo crlar um proLLlpo de alLa-
fldelldade. C que lsso slgnlflcou fol a necessldade de deflnlr concreLamenLe um esLllo grflco
para a apllcao, comeando por rever o )%%0 '&* ."") dos 1%20(!$ para os Lransformar em
algo que pudesse ser usado na verso flnal. A verso dos 1%20(!$ fazla grande uso de cores
escuras e clnzenLos, mas como lsso dava um aspecLo algo sombrlo, opLou-se por lnverLer as
cores e fazer uso do branco, [unLando enLo a paleLa as cores menclonadas anLerlormenLe.
Asslm consegulu-se um aspecLo mals fresco e acolhedor. 8elaLlvamenLe ao layouL, manLeve-se
essenclalmenLe semelhanLe aos 1%20(!$, havendo a[usLes ao longo de Lodas as pglnas, em
especlal a de flchelro e o desenvolvlmenLo de novos LemplaLes para as pglnas no Locadas
anLerlormenLe e algumas alLeraes no .%%/"#. no geral, fol lmplemenLado com sucesso o
esLllo vlsual apresenLado na fase de especlflcao grflca, LanLo a nlvel de cores e Llpos de
leLras como a nlvel de uLlllzao da grelha que nos compromeLemos a respelLar.
AdlclonalmenLe, Loda a esLruLura da lnLerface orlglnal da ferramenLa de desenho fol alLernada
para maxlmlzar o conforLo e a funclonalldade. AdopLmos um aspecLo o mals semelhanLe

14

!"#$%&'() +" ,')-".%)
posslvel a ferramenLas a que o publlco-alvo esLe[a [ hablLuado a uLlllzar (lllusLraLor, Avlary,
eLc). 1ambem nesse senLldo opLmos por uLlllzar uma verso ')!5' da ferramenLa, por esLa
oferecer um grande numero de funclonalldades que achamos fundamenLals, como:
en Lool,
Crelhas,
8ulers,
8lghL-cllck menu com funclonalldades cllpboard e ordenao de flchelros,
Color plcker,

2.3 Verso 8eta
Aps flnallzado o proLLlpo de alLa-fldelldade, parLlu-se para a consLruo da verso beLa. Al,
Lendo em conslderao as crlLlcas efecLuadas ao proLLlpo e a adlo de funclonalldades em
falLa e algumas novas, foram efecLuadas novas, pequenas alLeraes ao longo de Loda a
apllcao, com vlsLa a melhorar o seu aspecLo, mas sem alLerar de forma slgnlflcaLlva o layouL,
de forma a lnclulr lnLegrao com redes soclals, melhor poslclonamenLo dos dlsposlLlvos de
voLos, uma melhor organlzao dos perfls e formas de edlLar os mesmos. A parLlr desLa alLura,
[ se enconLra algo fechado o deslgn, pelo que no exlsLem profundas mudanas
relaLlvamenLe ao crlado anLerlormenLe.

2.4 Verso I|na|
1endo chegado a verso flnal, relaLlvamenLe ao deslgn e esLllos grflcos da apllcao as unlcas
alLeraes efecLuadas, so com o lnLulLo de fazer um numero de correces grflcas, para
corrlglr alguns bugs vlsuals e Lornar as aces dos uLlllzadores mals lnLulLlvas e os resulLados
das mesmas mals percepLlvels, aumenLando a qualldade do feedback devolvldo, Lendo como
base falhas deLecLadas duranLe as fases de LesLes. 8elaLlvamenLe aos conLeudos, foram
adlclonados os elemenLos que esLavam em falLa e alguns LexLos alLerados para Lornar as suas
funes mals percepLlvels.

13

!"#$%&'() +" ,')-".%)
Cap|tu|o 3 Des|gn tcn|co
3.1 Lspec|f|cao
3.1.1 Arqu|tectura do s|te
A especlflcao comea com a arqulLecLura do slLe. nela, o grupo LenLou da melhor forma
descrever as relaes enLre as vrlas componenLes do pro[ecLo, com especlal aLeno a
relao enLre o CMS e a ferramenLa de desenho e, denLro do prprlo CMS, aos dlversos
mdulos escolhldos para a lmplemenLao dos requlslLos funclonals deflnldos. C dlagrama
compleLo enconLra-se em anexo 6.

I|g. 8 Seco da Arqu|tectura
3.1.2 Mapa de navegao
ue segulda apresenLamos o mapa de navegao do slLe. LsLe pesa por alguma complexldade,
lnerenLe a complexldade do pro[ecLo. Como Lal, enconLra-se legendado, quer por Llpo de
funclonalldades como por nlvel de acesso, fazendo-se al a dlsLlno enLre uLlllzador no
reglsLado, uLlllzador reglsLado e moderador/admlnlsLrador.
Ao longo do seu desenvolvlmenLo, o mapa fol sofrendo pequenas alLeraes ao longo do seu
desenvolvlmenLo, nomeanLe nas reas que esLarlam acesslvels a cada pessoa e a adlo ou
remoo de reas que esLavam, respecLlvamenLe, em falLa, ou desnecessrlas. um exemplo
dlsso e a consolldao de Lodos os Llpos de Calerlas em uma s. A verso compleLa do mapa e
ouLras verses podem ser vlsuallzadas nos anexos 7.

16

!"#$%&'() +" ,')-".%)
3.1.3 I|uxogramas
1endo em conLa que e na lnLegrao da ferramenLa com o CMS que [az o desaflo cenLral
Lecnlco da execuo do pro[ecLo, os fluxogramas so cenLrados nas funclonalldades relevanLes
a gravao, upload e download de
documenLos vecLorlals, servlndo como
forma de melhor compreender o
funclonamenLo dos scrlpLs presenLes e
os passos necessrlos para concreLlzar
Larefas. CuLras funclonalldades sero
conseguldas recorrendo a dlversos
mdulos [ exlsLenLes e sero
reallzadas pelo urupal de um modo
quase auLomLlco e, de cerLa forma,
algo opaco, pelo que no foram
crlados fluxogramas para as funes
relaclonadas com pesqulsa, back offlce,
pessoal ou lnLeraco.
uos fluxogramas crlados o mals
complexo e, de longe, o relaLlvo a
gravao de documenLos vecLorlals.
Lssa quesLo fol [ abordada anLerlormenLe, onde se lnclulu uma expllcao lnlclal do
processo. LsLe fluxograma deLalha de forma mals aprofundada o processo de crlao de um
flchelro represenLaLlvo do documenLo vecLorlal e a lnLeraco com a base de dados do urupal
e com o CMS em sl, aquando da crlao de ns. Consldera quesLes como a auLenLlcao de
I|g. 9 Mapa I|na|
I|g. 10 I|uxograma para down|oad

17

!"#$%&'() +" ,')-".%)
sesso, a ldenLlflcao das crlaes e a gravao de verses - essenclals LanLo para a deflnlo
do hlsLrlco de um documenLo como para a crlao de documenLos novos a parLlr de uma
base [ exlsLenLe, o chamado .%#0-&36
CuLro dos fluxogramas crlados, deLalha a funclonalldade de upload de documenLos vecLorlals
no formaLo SvC e Lambem deLalhada e lncorpora em sl o scrlpL de gravao de documenLos
vecLorlals. or ulLlmo, o fluxograma relaLlvo ao download quer de documenLos vecLorlals quer
das respecLlvas represenLaes blLmap, em formaLo nC (anexo 8).

3.1.4 Mdu|os CMS
ara o desenvolvlmenLo do pro[ecLo e aps uma exausLlva pesqulsa, crlou-se uma llsLa sobre
quals os mdulos do urupal a uLlllzar, asslm como as suas funclonalldades e dependnclas. L
lmporLanLe referlr que alguns mdulos necesslLam de ouLros para funclonar. Cs mdulos pal"
so: vlews, lmageAl, ConLenL ConsLrucLlon klL e voLlngAl.
Construo do s|te
cck (ConLenL ConsLrucLlon klL) - permlLe a crlao de nodes" personallzados asslm como a
sua lmplemenLao,
! llnklmage - permlLe Lransformar lmagens em llnks,
dhLml menu - lmplemenLao de dropdown menus,
paLhauLo - slmpllflcao de urls,
Lagadellc - gesLor de Lags
lmageAl - LoolklL" para lmagens,
! lmagecache - processador de lmagens,
! lmagefleld - exLeno de funclonalldades de ns do Llpo lmagem
! Lhlckbox - overlay de moldura" para lmagens,
vlews - crlao de querles personallzadas e mosLrar os resulLados,
qulckLabs - crlao de blocos de conLeudo com vrlas Labs,
essoa|
conLenL proflle - exLenso das funclonalldades de crlao de perfls (depende do mdulo
ConLenL ConsLrucLlon klL),
loglnLoboggan - exLenso das funclonalldades de logln,
acLlvlLy - permlLe que uLlllzadores slgam a acLlvldade dos amlgos
node_gallery - crlao de galerlas de lmagens
Interaco
organlc groups - permlLe crlar grupos de uLlllzadores e respecLlvas pglnas de grupo,
slmplenews - permlLe crlar e publlcar newsleLLers,
prlvaLemsg - permlLe envlo de mensagens prlvadas enLre uLlllzadores,
voLlngAl - LoolklL" para slsLemas de voLos,

18

!"#$%&'() +" ,')-".%)
! plus1 - slsLema de voLos,
! flvesLar - slsLema de raLlng (depende do mdulo vlews),
! buddyllsL2 package - pacoLe para gerlr amlzades,
Advanced lorum
llaL lorum
L alnda lmporLanLe referlr que Lodas esLas especlflcaes so relaLlvas e lnserldas no conLexLo
da especlflcao Lecnlca lnlclal do pro[ecLo.

3.2 rotot|pagem
3.2.1 Demo 1cn|ca
ara o desenvolvlmenLo da uemo 1ecnlca, o prlmelro passo fol enunclar os passos que lrlam
ser demonsLrados, para Lermos uma melhor ldela do que, ao cerLo, serla necessrlo fazer. Cs
passos decldldos foram enLo os segulnLes:
lunclonamenLo de ferramenLa de edlo vecLorlal ,
Cravao de documenLo vecLorlal,
LlsLagem de documenLos vecLorlals crlados pelo uLlllzador,
8ecuperao de documenLos gravados,
ara concreLlzar o vldeo e demonsLrar os efelLos das aces,
uLlllzou-se o MySCL workbench para aceder a base de dados e
comprovar que o scrlpL P crlado para llgar o SvCedlL ao urupal
[ se enconLrava em funclonamenLo. um dlagrama fol usado para
llusLrar de cerLa forma as aces a concreLlzar e um vldeo
narrado para expllcar os passos e o que esLa a aconLecer ao cerLo
(C dlagrama pode ser vlsuallzado no anexo9).

3.2.2 rott|po de A|ta-Def|n|o
1endo em vlsLa os ob[ecLlvos para o desenvolvlmenLo do proLLlpo de alLa-fldelldade,
uLlllzmos o mapa do slLe prevlamenLe consLruldo e decldlmos sobre quals as funclonalldades
a lmplemenLar. Sendo um proLLlpo de alLa-fldelldade, a sua consLruo ser em 1". Como
demonsLrado na flgura segulnLe, Lodas as pglnas derlvadas da pglna prlnclpal sero
consLruldas, conLudo, o deLalhe de cada uma delas ser dlferenLe.
I|g. 11 D|agrama de Interaco

19

!"#$%&'() +" ,')-".%)

I|g. 12 Lsco|ha de ramos a desenvo|ver
uenLro da prlmelra caLegorla, exlsLem dols nlvels de prlorldade. Cs lLens marcados com
"prlorldade alLa" so os que foram desenvolvldos com vlsLa a que Lodos os seus requlslLos
funclonals flquem compleLamenLe lmplemenLados. or ouLro lado, lLens marcados como
Lendo "prlorldade balxa" s foram Lrabalhados ao pormenor caso Lodos ou ouLros se[am
fechados. nas pglnas caLegorlzadas como "conLeudo esLLlco", apenas o layouL fol
Lrabalhado, sendo que, em Lodas as regles onde aparecerla conLeudo dlnmlco, esLe fol
subsLlLuldo por !)'2"5%)*"#$.
As pglnas a que foram dadas o nlvel de prlorldade mxlma foram: ed|tor, f|che|ros, ga|er|as e
perf|s. LsLas formavam, na nossa oplnlo, o nucleo do nosso slLe, permlLlndo ao uLlllzador
crlar, parLllhar, comenLar e vlsuallzar lmagens. 1ambem so as seces de malor complexldade
Lecnlca, envolvendo a lnLeraco enLre a ferramenLa de crlao vecLorlal e o CMS, asslm como
a organlzao das lmagens em vrlos Llpos de galerlas.
1endo esLabelecldo o que serla necessrlo fazer, comemos por abordar os elemenLos de
malor prlorldade, com especlal aLeno ao desaflo da lnLeraco enLre a ferramenLa de edlo
vecLorlal SvC-edlL e o CMS urupal. LsLa lnLeraco, revelou-se nesLe ponLo com Loda a sua
complexldade, obrlgando ao grupo desenvolver cdlgo largamenLe orlglnal e fora do conforLo
de LuLorlals ou documenLao exlsLenLe. Salvo algumas lnconslsLnclas funclonals o desaflo fol
ulLrapassado. Alnda asslm, as dlflculdades na sua concreLlzao acabaram por aLrasar ouLras
reas do proLLlpo e algumas funclonalldades como o hlsLrlco de flchelros e .%#0-&3 flcaram
momenLaneamenLe por desenvolver.

A nlvel do CMS, o malor desaflo fol a falLa de famlllarldade com o amblenLe de
desenvolvlmenLo, nomeadamenLe alguns mdulos mals complexos mas fundamenLals para
crlar um slLe dlnmlco e lnLeressanLe. uos resLanLes elemenLos conslderados de alLa
prlorldade, o que flcou de longe mals desenvolvldo fol a pglna de perfll.

20

!"#$%&'() +" ,')-".%)
Al foram lmplemenLadas funclonalldades como uma galerla das lmagens crladas pelo
uLlllzador, carregada dlnamlcamenLe, mecanlsmos de subscrlo e subscrles, noLlflcaes de
acLlvldade recenLe e vrlo conLeudo carregado dlnamlcamenLe. C prprlo layouL da pglna fol
felLo com recurso a um mdulo, 7'&")$8 que permlLe crlar )'9%(/$ complexos de forma rplda.
A nlvel das lnLeraces, o urupal suporLa de ralz um slsLema e mensagens de feedback que
aprovelLamos, asslm como %:"#)'9$ para formulrlos de logln, reglsLo e conLacLo. or flm, o
prprlo menu e anlmado para Lornar a sua navegao mals slmples e agradvel.
uos elemenLos proposLos como sendo de balxa prlorldade, exlsLlram Lambem alguns confllLos
relaLlvos aos mdulos do urupal, pelo que a seco dos osLs" Lendo demorado um pouco
mals para flcar compleLa. ue resLo e Llrando a pglna prlnclpal que, aps reunlo com os
orlenLadores, se decldlu manLer apenas como conLeudo esLLlco, os resLanLes elemenLos
foram concluldos. AdlclonalmenLe, as seces de dlscusses e de mensagens prlvadas flcaram
compleLamenLe funclonals, preclsando apenas de alguns reLoques grflcos.

or flm o back offlce, sendo provldenclado pelo prprlo urupal, Lambem a esLe ponLo se
enconLrava compleLamenLe funclonal.
CuLro ob[ecLlvo a que nos Llnhamos proposLo era o de Lraduzlr Loda a apllcao para uma s
llngua, [ que SvC-edlL e urupal se enconLravam em llnguas dlferenLes. 1endo opLado pelo
porLugus, Lraduzlmos o SvC-edlL e o prprlo urupal e respecLlvos conLeudos, reforando o
dese[o de que esLa se[a uma comunldade de porLugueses e para porLugueses. no enLanLo,
alguns mdulos revelaram-se mals compllcados de alLerar o que, [unLamenLe com as
dlflculdades [ referldas, resulLaram numa Lraduo menos que perfelLa.
ue forma geral e apesar dos dlversos conLraLempos enconLrados, especlalmenLe Lendo em
conLa as dlflculdades de lnLegrar e lnLerllgar a ferramenLa de edlo vecLorlal e o urupal, fol
felLo um progresso consldervel nesLa fase do pro[ecLo, ao longo das dlversas reas da
apllcao, preparado o camlnho para as fases segulnLes. Aclma de Ludo, fol adqulrlda uma
quanLldade consldervel de experlncla na crlao e edlo de conLeudos no urupal,
nomeadamenLe na uLlllzao dos mdulos 7'&")$ e ;-"+$, responsvels pela esLruLurao de
)'9%(/$ complexos e pela ln[eco de conLeudos, respecLlvamenLe.
Lm [elLo de comparao com o mapa apresenLado anLerlormenLe, fol elaborado o mapa com o
esLado de desenvolvlmenLo da apllcao aps a fase de proLoLlpagem, o mesmo pode ser
vlsuallzado com malores dlmenses em anexo.

21

!"#$%&'() +" ,')-".%)

I|g. 13 Lstado do desenvo|v|mento aps protot|pagem
Algumas aspecLos menos bem conseguldos e/ou bugs a Ler em conslderao, nesLa verso da
apllcao:
uevldo a falLa de Lempo para soluclonar Lodos os problemas, a apllcao e melhor
vlsuallzada no llrefox. CuLros browsers apresenLam problemas a nlvel da ferramenLa de
edlo vecLorlal,
Como se decldlu que a pglna prlnclpal deverla ser delxada como esLLlca e sendo ela
prlnclpalmenLe uma agregao de )-&0$, o )-&0 do logo nesLa verso levava o uLlllzador
lmedlaLamenLe a pglna de perfll, ao lnves de para a pglna prlnclpal.
um bug presenLe no svg-edlL prevlne que o campo de password esLe[a encrlpLado, pols se
asslm esLlver, ao lnserlr a password, lr ao mesmo acLlvar as ferramenLas do svg-edlL
aLraves dos aLalhos do Leclado. ! conLacLmos a comunldade de desenvolvlmenLo do
mesmo, mas aLe a hora desLa enLrega no Llvemos resposLa a nossa quesLo.

3.3 Verso 8eta
arLlmos para a verso beLa com ob[ecLlvos amblclosos a nlvel da lmplemenLao de
funclonalldades que na alLura esLavam por desenvolver ou em desenvolvlmenLo.

I|g. 14 reas de desenvo|v|mento para a verso 8eta

22

!"#$%&'() +" ,')-".%)
8elaLlvamenLe as componenLes marcadas como sendo de prlorldade urgenLe (glna prlnclpal,
flchelros, verses anLerlores, edlLor e compeLles), s o desenvolvlmenLo das compeLles fol
delxado para a verso flnal, dada a sua complexldade malor que o lnlclalmenLe prevlsLo. Cs
resLanLes componenLes flcaram [ basLanLe prxlmos das suas verses flnals, com as segulnLes
melhorlas/lmplemenLaes relaLlvas a verso anLerlor:
g|na pr|nc|pa|:
C logln do uLlllzador normal redlrecclona para esLa pglna,
lnformao relaLlva a acLlvldade recenLe dos uLlllzadores a que o uLlllzador com sesso
lnlclada subscreve,
lnformao relaLlva aos posLs mals recenLes no frum,
Calerla com as crlaes mals recenLes dos uLlllzadores subscrlLos,
Calerla com as crlaes mals recenLes de Loda a comunldade,
g|na de f|che|ro:
8oLes no Lopo da lmagem para abrlr a mesma no edlLor, ver a lmagem em Lamanho
lnLelro (num overlay), fazer o download da lmagem (nC), edlLar as proprledades da
lmagem (nome, descrlo, Lags, s aparece caso o uLlllzador se[a o auLor da lmagem Cu o
admln) e apagar a lmagem (mesmas resLrles que a opo anLerlor)
lmplemenLao de Lags funclonals assocladas a lmagem
lmplemenLao de uma galerla com as verses anLerlores da lmagem, permlLlndo
acompanhar a evoluo da mesma. L posslvel, com um cllque sobre qualquer uma das
verses, abrl-la no edlLor,
MonlLorlzao no numero de vlsuallzaes de uma lmagem (para posLerlormenLe se poder
crlar, por exemplo, uma galerla com as lmagens mals vlsLas),
lmplemenLao de slsLema de voLos nas lmagens,
lmplemenLao de llnks de parLllha da lmagem em vrlas redes soclals, lnclulndo o 1wlLLer
e o lacebook, com opo de fazer )-0" a lmagem,
AspecLo grflco dos comenLrlos compleLamenLe revlsLo, em conformldade com o que fol
ldeallzado na fase de especlflcao grflca
SlsLema de voLos ((! '&* *%+&) nos comenLrlos, sendo que comenLrlos que flquem
abalxo de um deLermlnado numero de voLos negaLlvos flcam aclnzenLados,

23

!"#$%&'() +" ,')-".%)
Verses anter|ores:
lunclonalldade compleLamenLe lmplemenLada. Se o auLor de uma deLermlnada lmagem a
abrlr com o edlLor e volLar a gravar, e crlada uma nova verso da mesma. Se o uLlllzador a
gravar a lmagem no for o auLor, a lmagem e gravada como uma lmagem nova, havendo
lnformaes relaLlvas a mesma a refernca a lmagem da qual a nova fol derlvada.
Ld|tor:
leedback de que o flchelro esL a ser gravado,
Correo dos bugs mals graves da verso anLerlor, com desLaque aqueles que
compromeLem a gravao de lmagens,
no edlLor, novamenLe flcou por resolver os bugs relaLlvos a uLlllzao de campos de password,
nos formulrlos e a vlsuallzao de )'9"#$ novas. edlu-se a a[uda a comunldade relaLlvamenLe
ao prlmelro, mas no se obLeve qualquer Llpo de resposLa. uado que nenhum desLes bugs
compromeLla a uLlllzao da ferramenLa nem a reallzao dos LesLes de usabllldade da mesma,
a sua resoluo fol delxada para a verso flnal da apllcao. ue resLo, Lodos os bugs deLecLados
na verso anLerlor foram corrlgldos, com excepo do bug de prlorldade balxa relaLlvo ao
envlo do formulrlo de conLacLo.
volLando ao que fol desenvolvldo para a verso beLa, passamos para os que foram marcados
como sendo de prlorldade alLa:

erf|s:
lmplemenLao de um campo com a acLlvldade mals recenLe do uLlllzador do perfll. Cs
lLens da acLlvldade mals recenLe aparecem escrlLos na segunda pessa se o uLlllzador
que esLlver a ver o perfll for o a que o perfll perLence,
Adlo de um campo que mosLra um !#":-"+ do posL mals recenLe do blog do
uLlllzador,
Adlo de um boLo para edlLar o perfll, vlslvel ao uLlllzador a que o perfll perLence e
ao admln,
8eferncla ao numero de seguldores e subscrles que o uLlllzador Lem. Lssas
lnformaes Lm um llnk assoclado que redlrecclona para pglnas com a llsLa dos
seguldores/subscrles.

24

!"#$%&'() +" ,')-".%)
Cs comenLrlos ao flchelro e as llsLas de amlgos [ foram referenclados. lora o bug aclma
menclonado, os componenLes enconLravam-se a esLa alLura compleLamenLe lmplemenLados.
Cs componenLes menclonados como sendo de prlorldade normal e balxa foram, regra geral,
delxados para a verso flnal, [unLando-se a funclonalldade de compeLles mas com uma
complexldade de execuo, comparaLlvamenLe, basLanLe balxa.
ue forma geral, as componenLes comunlLrlas da apllcao enconLravam-se [ Lodas
lmplemenLadas ou, no esLando alnda lmplemenLadas, com o camlnho preparado para as
lmplemenLar.
ara a verso flnal flcaram, enLo, por lmplemenLar, as segulnLes componenLes:
CompeLles
noLlclas
A[uda
uocumenLao
CuLros componenLes, [ parclalmenLe lmplemenLados, preclsam apenas de serem aprlmoradas
relaLlvamenLe aos seus layouLs (Mensagens pessoals e pesqulsa).

3.4 Verso I|na|
C desenvolvlmenLo da verso da verso flnal fol marcado por Lrs fases basLanLe dlsLlnLas.

A prlmelra fase resulLou da mudana do servldor llnlab onde o slLe esL apllcado. Lssa
mudana Lrouxe bugs no funclonamenLo da apllcao, nomeadamenLe a nlvel da lnLegrao
enLre o SvC-edlL e o urupal.

ue forma a no s volLar a colocar a apllcao ao nlvel de funclonamenLo anLerlor, mas
Lambem a garanLlr que Lals erros no se volLem a verlflcar, Lodas funes referenLes a
gravao de lmagens foram opLlmlzadas com vlsLa a permlLlr o seu funclonamenLo em
qualquer servldor sem ser necessrlo edlLar cdlgo.

CuLro problema com a mudana de servldor prendla-se com os llnks, assoclados a cada
lmagem, para abrlr a mesma de novo no SvC-edlL. Como esLes llnks so lnLroduzldos
manualmenLe na base de dados e no so llnks relaLlvos, no havla manelra de os alLerar

23

!"#$%&'() +" ,')-".%)
auLomaLlcamenLe aquando de uma mudana de servldor. ara colmaLar esLa falha fol escrlLo
um pequeno scrlpL em P que permlLe acLuallzar esLas llgaes auLomaLlcamenLe.

8esolvldos esLes problemas lnesperados, fol posslvel enLrar na segunda fase de
desenvolvlmenLo da verso flnal. nesLa fase, cenLrmos a aLeno na funclonalldade de
compeLles.

LsLa revelou-se mals dlflcll de lmplemenLar do que o lnlclalmenLe prevlsLo. Apesar de exlsLlrem
dlversos mdulos para a voLao de conLeudo e para a consLruo de galerlas de lmagens, no
exlsLe nenhum (h excepo do CompeLlLlon hLLp://drupal.org/pro[ecL/compeLlLlon, que no e
compaLlvel com a verso 6 do urupal usada por ns) que permlLa fazer as compeLles como
deflnldas por ns, que conslsLem em:

AdmlnlsLrador crla uma compeLlo,
uLlllzadores podem submeLer uma lmagem [ crlada na compeLlo,
uLlllzadores voLam na galerla de lmagens submeLldas (Llpologla de voLos +1/-1),
AdmlnlsLrador fecha compeLlo,
lmagem vencedora aparece em desLaque na pglna da compeLlo fechada.

Sendo asslm, recalu sobre o grupo a responsabllldade de crlar de ralz as funclonalldades aclma
descrlLas. C resulLado presenLe assemelha-se mals a uma prova de concelLo que a uma verso
flnallzada da funclonalldade, mas responde [ de forma saLlsfaLrla aos prlmelros 3 passos,
aLraves de uma comblnao de cdlgo-fonLe crlado de ralz por ns com funclonalldades de
mdulos [ lnsLalados.

LsLando mlnlmamenLe lmplemenLada a funclonalldade cu[a ausncla era mals grlLanLe,
passmos para a ulLlma fase de desenvolvlmenLo. nesLa fase, o Lrabalho passou mals pela
resoluo de bugs de prlorldade menor e da adlo de pormenores de menor lmporLncla mas
que, [unLos, resulLam numa melhorla slgnlflcanLe da experlncla de uLlllzao do slLe. LsLas
melhorlas so:

8ack off|ce]adm|n|strao:
1. 8arra de navegao para o perfll de admlnlsLrador,
2. Crlao de um Llpo de conLeudo para dlvulgar noLlclas sobre o slLe, !#"$$ #")"'$"$,
acLuallzaes, eLc.,

26

!"#$%&'() +" ,')-".%)

8arra de navegao:
3. Adlo de llnks no sub-menu comunldade: b|ogues, not|c|as, compet|o, ||sta de
ut|||zadores,
4. Adlo de um formulrlo de pesqulsa,
5. Adlo da opo escrever mensagem" no sub-menu de mensagens",

g|na pr|nc|pa|:
6. noLlflcao de mensagens prlvadas novas recebldas,
7. 8loco de lnformao com as noLlclas mals recenLes publlcadas pelo admlnlsLrador do slLe,
8. 8loco de dlscusses recenLes com llnk para o frum

erf||:
9. Adlo de boLo para envlar mensagem prlvada ao uLlllzador
10. Adlo de boLes para segulr/delxar de segulr o uLlllzador
11. Ldlo dos LexLos das reas LnLrada mals recenLe no blog" e AcLlvldade recenLe". C
uLlllzador que esLe[a a ver o seu prprlo perfll e apresenLado al com vrlos llnks para crlar
conLeudo ou parLlclpar no slLe,
12. glnas com llsLas de subscrles e seguldores funclonam correcLamenLe e Lm um llnk
para regressar ao perfll

g|na de f|che|ro:
13. voLao em crlaes lndlvlduals (Llpologla de 3 esLrelas),
14. 8oLes de parLllha com vrlos servlos e redes soclals,
15. SlsLema de comenLrlos reflnado vlsualmenLe e com posslbllldade de voLar nos
comenLrlos (up/down, com comenLrlos abalxo de deLermlnado llmlLe negaLlvo de voLos a
flcarem aclnzenLados),

or lmplemenLar flcou apenas a seco de a[uda e de documenLao. 1ambem o aspecLo
vlsual de alguns componenLes do slLe pode alnda ser melhorado.

27

!"#$%&'() +" ,')-".%)
Cap|tu|o 4 S|ntese dos testes efectuados

4.1 1|pos de testes
A fase de LesLes Lem como ob[ecLlvo prlnclpal a lnvesLlgao e uLlllzao da apllcao, em
conLexLo, para enconLrar seus defelLos. na /-1")-&" do pro[ecLo, a fase de LesLes esL
relaclonada com a verso beLa. uesLa forma, os resulLados apresenLados sero Lodos relaLlvos
a esLa verso. Com o ob[ecLlvo de melhorar o pro[ecLo nas suas varlas componenLes,
reallzamos uma llsLagem dos bugs enconLrados, LesLes de compaLlbllldade enLre ,#%+$"#$,
slsLemas operaLlvos e resolues de ecr, LesLes de segurana e LesLes de usabllldade.

4.2 kesu|tados
4.2.1 L|stagem de bugs encontrados
Aps uma anllse ao proLLlpo de alLa-fldelldade, elaboramos uma llsLa dos bugs enconLrados.
LsLa llsLa fol consLrulda uLlllzando a ferramenLa code.ua, no s para bug Lracklng mas Lambem
para conLrolar o desenvolvlmenLo das funclonalldades alnda por lmplemenLar. Cs bugs so
caLegorlzados segundo a sua prlorldade e Llpo. Achmos alnda lmporLanLe dlferenclar se e um
bug do SvC-edlL ou do urupal.

1abe|a 2- 1abe|a de bug track|ng
ara a resoluo dos bugs do SvC-edlL relaclonados com a lnLeraco com o urupal (logln,
eLc.), foram usadas vrlas Lecnlcas de verlflcao de cdlgo em P, nomeadamenLe:
lazer <*(1!< para um flchelro de LexLo de Lodas as varlvels passadas ao longo do cdlgo,
Crlar varlvels de verlflcao que lncremenLem no lnlclo e no flnal de cada funo,
8eLlrar o cdlgo de redlrecclonamenLo para a pglna do n crlado, de forma a poder
examlnar, com recurso ao llrebug e ouLras ferramenLas semelhanLes, os dados passados
por CS1,

28

!"#$%&'() +" ,')-".%)
ComenLar selecLlvamenLe deLermlnados grupos de cdlgo, como forma de chegar mals
perLo da fonLe do problema,
Cs bugs relaclonados com funclonalldades naLlvas ao SvC-edlL, como o das layers, vo
requerer uma pesqulsa a fundo, no cdlgo-fonLe, das zonas de onde o problema possa
orlglnar. AdlclonalmenLe, ser pedldo apolo a comunldade de desenvolvlmenLo da ferramenLa
e os fruns de dlscusso da mesma pesqulsados, na evenLualldade de solues [ exlsLlrem.
8elaLlvamenLe aos erros do urupal, uLlllzando o perfll de admlnlsLrador, lremos verlflcar se
Lodas as permlsses esLo delegadas de acordo com as funclonalldades preLendldas. nos
problemas que no envolvam permlsses, lremos na seco de admlnlsLrar e consLrulr,
modlflcar e a[usLar os parmeLros necessrlos a resoluo dos bugs. ara qualquer problema
que no Lenha uma soluo lmedlaLa, lremos recorrer a a[uda no slLe do CMS e a sua
comunldade.

4.2.2 1estes de segurana
Coplar u8Ls lnLernos sem )%3-& para LenLar aceder as pglnas,
AlLerar parmeLros de url para LenLar aceder a perfls e ouLras reas excluslvas,
Colocar valores lnvlldos nos campos de lnpuL e anallsar a resposLa do slsLema,
1enLar aceder dlrecLamenLe a flchelros e dlrecLrlos,
1esLar ='!/25', submlsses em massa,
ManLer reglsLos de LenLaLlvas falhadas,
verlflcar encrlpLao de palavras-chave e LenLar assegurar a exlsLncla de $')/,
vamos passar a apresenLar os resulLados dos LesLes, asslm como as solues que os problemas
enconLrados nos levaram a lmplemenLar, de forma a aumenLar a segurana no slLe.
1. Cop|ar ur|s |nternos sem |og|n
lellzmenLe, o urupal permlLe conflgurar o acesso quer a pglnas quer a funclonalldades ( de
base ou graas a mdulos) medlanLe o Llpo de uLlllzador. nesLe caso, os uLlllzadores do nosso
slLe dlvldem-se em 3 Llpos: Ut|||zador ann|mo]no reg|stado, Ut|||zador
autent|cado]reg|stado e Adm|n|strador.
Sendo que o uLlllzador annlmo apenas Lem acesso a pglna lnlclal, a ferramenLa de crlao e
aos ns do Llpo lmagem, blog e frum, embora possa apenas vlsuallzar o conLeudo desLes. A
noLar que na verso flnal havero lmagens de desLaque na pglna lnlclal a que o uLlllzador
annlmo poder aceder. Cuando as pglnas de blog e de frum, o acesso a elas ser
bloqueado apenas na verso flnal, no se LraLando no enLanLo de uma falha de segurana de
grande gravldade.

29

!"#$%&'() +" ,')-".%)
2. A|terar parmetros de ur| para tentar aceder a perf|s e outras reas exc|us|vas
1al como no ponLo anLerlor, o acesso a cerLas funclonalldades e reas excluslvas esL llmlLado,
LanLo pelo Llpo de uLlllzador como pela auLorla e relao enLre o uLlllzador com sesso lnlclada
e a pglna a ser vlsuallzada. Asslm, a LlLulo de exemplo, s o uLlllzador a que a pglna de perfll
perLena Lem acesso ao boLo de edlo de perfll no mesmo. ua mesma manelra, e lmposslvel
aceder a pglna prlnclpal de qualquer uLlllzador que no se[a o que Lem a sesso lnlclada, [
que o conLeudo dessa e deLermlnado pelo uLlllzador que Lem a sesso lnlclada.
3. Co|ocar va|ores |nv||dos nos campos de |nput e ana||sar a resposta do s|stema
LsLe era, a parLlda, o ponLo onde poderlam exlsLlr mals problemas. lsLo devldo a lnLegrao do
urupal com a ferramenLa de edlo e, mals especlflcamenLe, aos formulrlos al presenLes que
poderlam no funclonar, em Lermos de verlflcao dos seus dados, ao mesmo nlvel de
segurana dos formulrlos do urupal
Asslm, LesLou-se a submlsso de cdlgo P1ML, P e !avascrlpL, LanLo no formulrlo de )%3-&,
reglsLo e de gravao de lmagem. Lm Lodos os casos, Lodo o cdlgo e passada como LexLo
slmples, no havendo a hlpLese de ln[eco de cdlgo aLraves desLe meLodo. C mesmo
aconLece nos formulrlos naLlvos do urupal.

I|g. 1S kesposta do s|stema a va|ores |nv||dos
4. 1entar aceder d|rectamente a f|che|ros e d|rectr|os
C acesso a dlrecLrlos e lmposslvel (o servldor reLorna um erro 403 - falLa de permlsses).
CuanLo a flchelros, e posslvel a um uLlllzador que Lenha conheclmenLo da esLruLura de
dlrecLrlos e dos nomes dos flchelros aceder aos mesmos, nomeadamenLe a Lodas as lmagens
e flchelros SvC gerados pelo edlLor. ConLudo, h que noLar que esses flchelros so gravados
com o formaLo !"#$ &'&" ( )#'*$# +$," -.),)/'&"0 1 .)#$2.'#+ -!)3 >&?1"#% ?&-2%@ ABC
DEFGHIJEKLM N "B/"&$O% *% .-25"-#%. Asslm, a menos que o uLlllzador Lenha Lldo acesso ao

30

!"#$%&'() +" ,')-".%)
nome do flchelro (denLro de uma sesso lnlclada, por exemplo), ser-lhe-h exLremamenLe
dlflcll de ganhar acesso aos flchelros dlrecLamenLe. Mals, mesmo que conslga Ler asslm acesso
aos flchelros, no ganha com lsso mals do que ganharla se fosse um uLlllzador reglsLado, [ que
esses podem fazer *%+&)%'* desses flchelros de forma llvre. Cuando as permlsses de escrlLa
do servldor, s se enconLram llgadas onde Lal e necessrlo para o funclonamenLo da apllcao,
como na pasLa de flchelros.
S. 1estar Captcha, subm|sses em massa
Convem noLar nesLe ponLo uma mudana lmporLanLe, relaLlva a apllcao LesLada quanLo a
usabllldade. C mdulo usado nesses LesLes, CapLcha, fol abandonado, asslm como o fol o
meLodo de CapLcha aLraves de pergunLas maLemLlcas. no seu lugar, fol adopLado o servlo
anLl-spam Mollom, que oferece mals opes a nlvel de segurana, como por exemplo:
verlflcao auLomLlca do conLeudo submeLldo (se for conslderado spam, o conLeudo e
auLomaLlcamenLe recusado. Caso o conLeudo no se[a obvlamenLe spam nem conLeudo
genulno, e pedldo o preenchlmenLo de um CapLcha),
ersonallzao do Llpo de verlflcao por formulrlo de submlsso (permlLe que alguns
formulrlos se[am conLrolados por CapLcha e ouLros pela anllse de conLeudo),
Mals lnformao sobre o servlo pode ser consulLada aqul: Mollom.
uLlllzando o modo de LesLe do mdulo (que permlLe LesLar o comporLamenLo do mesmo
medlanLe vrlos Llpos de conLeudo), a performance desLe enconLrou-se denLro do
publlclLado".
6. Manter reg|stos de tentat|vas fa|hadas
A resoluo desLe ponLo esLeve lmplemenLada desde a lnsLalao lnlclal do CMS, [ que esLe
conLem de ralz uma serle de Labelas que reglsLam Lodos os evenLos no slsLema, lnclulndo
LenLaLlvas de acesso lnvlldas e, lnLegrado com o mdulo Mollom [ menclonado, esLaLlsLlcas
relaLlvas a LenLaLlvas de $!'1 bloqueadas.

31

!"#$%&'() +" ,')-".%)

I|g. 16 keg|sto de act|v|dade
7. Ver|f|car encr|ptao na base de dados de pa|avras-chave. 1entar assegurar ex|stnc|a de
sa|t
ara garanLlr a encrlpLao das palavras-chave e apesar do urupal [ reallzar uma encrlpLao
Mu3, fol lnsLalado o mdulo Secure assword Pashes, que uLlllza a framework orLable P
password hashlng para passar as palavras-chave gravadas por mulLlplas rondas de hashlng e
salLlng. Lm adlo a Lodos esses parmeLros, o slLe fol passado por duas ferramenLas de LesLes
de segurana de slLes: Websecurlfy e AcuneLlx Web vulnerablllLy Scanner. Ambos passam o
slLe por uma baLerla de LesLes de segurana, lnclulndo:
ln[eco SCL,
Local and 8emoLe llle lnclude,
Cross-slLe scrlpLlng,
Cross-slLe 8equesL forgery,
Sesslon SecurlLy,
Anallzador de scrlpLs (segurana de A!Ax e apllcaes Web 2.0),
1esLe de ferramenLas de peneLrao,
Cs resulLados de ambos foram basLanLe poslLlvos. C P",$"2(#-.9 enconLrou 39 erros, mas
nenhum conslderado grave. Cs erros enconLrados foram relaLlvos a emalls presenLes denLro
de flchelros de $2#-!/ (lnformao relaLlva aos auLores do $2#-!/ geralmenLe lnclulda no lnlclo
do flchelro, comenLada) e a funclonalldade acLlva de auLo-compleLe nos formulrlos de logln e
reglsLo. C AcuLlnex s revelou 4 erros e Lodos relaLlvos a vulnerabllldades no servldor MySCL.
Convm menclonar, por ulLlmo, que fol Lambem lmplemenLado um mdulo que permlLe
conLrolar de forma mals exacLa as sesses, erslsLenL Logln, que lmplemenLa a opo
remember me" aquando do )%3-& que crla um 2%%0-" que conLrola a sesso para o uLlllzador.

32

!"#$%&'() +" ,')-".%)
Se essa opo no for selecclonada, a sesso do uLlllzador e Lermlnada aquando do fecho do
,#%+$"#.

4.2.3 1estes de compat|b|||dade
ara os LesLes de compaLlbllldade foram uLlllzados os
segulnLes dlsposlLlvos:
MonlLor de 24" Wldescreen
MonlLor de 19" 4:3
Androld 3.3"
Magalhes
LeeC
Macbook 13"
lhone 4

1enLmos abranger a malor varledade de dlsposlLlvos
uLlllzados pelo nosso publlco alvo, desde dlsposlLlvos
mvels com ecrs de balxa resoluo, aLe ueskLops com grandes monlLores.
Cs segulnLes slsLemas operaLlvos foram conslderados:
Wlndows ( 7, vlsLa, x)
Mac CSx 10.6
Llnux Calxa Mglca

L os segulnLes browsers:
lnLerneL Lxplorer (7,8,9)
Mozllla llrefox
Coogle Chrome
Safarl
Cpera
8rowser defaulL do Androld
Safarl (lCS)
ara a seleco de browsers, consulLmos os dados
esLaLlsLlcos de uLlllzao mals recenLes do slLe w3schools.com, de modo a saber quals os
,#%+$"#$ mals uLlllzados na acLualldade.
I|g. 17 D|spos|t|vos
I|g. 18 S|stemas Cperat|vos
I|g. 19 8rowsers

33

!"#$%&'() +" ,')-".%)
or flm, as segulnLes resolues foram conslderadas:

1abe|a 3 - keso|ues
C LesLe reallzado conslsLlu no segulnLe percurso:
Logln,
ConsulLa da pglna de perfll,
Crlao de um desenho na ferramenLa. Cravao do mesmo,
ConsulLa do perfll de um ouLro uLlllzador. AberLura e modlflcao de um dos seus
desenhos,
ComenLar uma das crlaes de ouLro uLlllzador,
LogouL.
ue manelra geral, conclulu-se que o slLe weuraw funclona na malorla das comblnaes de
dlsposlLlvos uLlllzados acLualmenLe. no enLanLo, e recomendada a uLlllzao no llrefox ou no
Chrome. L Lambem recomendada uma resoluo lgual ou superlor a 1024x768, [ que o slLe e,
de momenLo, compaLlvel com resolues lnferlores. 1ambem de momenLo a ferramenLa no e
compaLlvel com dlsposlLlvos mvels (smarLphones, pda's), [ que a lnLeraco e o desenho
requerem as funclonalldades de um raLo, no reproduzlvels em ecrs de Loque. Cs resulLados
com malor deLalhe podem ser enconLrados nos anexos (os resulLados desLes LesLes podem ser
vlsuallzados no anexo 10).

4.2.4 1estes de usab|||dade
Iormato dos 1estes
ue forma a comear os LesLes de usabllldade, fol prlmelro necessrlo decldlr qual o formaLo
que lrla ser usado. Aps alguma dellberao, o grupo opLou enLo por usar um gulo cognlLlvo,
seguldo de um curLo lnquerlLo escrlLo ps-LesLe. Cs mesmos podem ser enconLrados no anexo
11.
ue segulda fol decldlda a melhor forma de anallsar os resulLados. ara esse felLo, fez-se
recurso de um programa de capLura de ecr para gravar os LesLes, [unLamenLe com o udlo.
!unLamenLe com cada um dos uLlllzadores esLavam presenLes dols membros do grupo: um

34

!"#$%&'() +" ,')-".%)
para dar apolo em qualquer quesLo ou dlflculdade enconLrada, ouLro para lr anoLando as
observaes em uma grelha de anllse, que mals Larde fol complemenLada com uma anllse
mals compleLa recorrendo aos vldeos capLurados (A grelha enconLra-se em anexo).

Lxecuo
Cs LesLes foram execuLados com alguns conLraLempos, o prlmelro de no Ler havldo sala
dlsponlvel para o dla em que havlam sendo agendados, o segundo de Lermos apenas
conseguldo assegurar um uLlllzadores experlenLe, pelo que Llvemos de usar clnco uLlllzadores
novaLos. Aqul devemos alnda agradecer a 8rbara Macedo, aluna de ueslgn que nos consegulu
arran[ar uLlllzadores suflclenLes para Lermos efecLlvamenLe sels uLlllzadores LesLe.
um ouLro facLor lmporLanLe a Ler em conslderao fol o facLo de Lermos agendado os LesLes
para a sexLa-felra anLes da daLa de enLrega dos mesmos Ler sldo alLerada, sendo nos
lmposslvel remarcar. Asslm Llvemos menos Lempo para angarlar uLlllzadores e assegurar as
melhores condles para reallzar os LesLes, para alem de corrlglr problemas enconLrados
anLerlormenLe.

kesu|tados e An||se I|na|
1endo concluldo os LesLes fol enLo posslvel anallsar os vldeos, [unLamenLe com os lnquerlLos
e as observaes reglsLadas duranLe os mesmos. A esLraLegla uLlllzada fol a de medlr o Lempo
demorado em cada passo conLra o Lempo demorado por um uLlllzador padro. Seguldo de
uma anllse da quanLldade de erros dada em cada passo. Com esLes dols ponLos, esperou-se
consegulr ldenLlflcar as reas problemLlcas na uLlllzao da apllcao. or flm lrla-se fazer
uma anllse cruzada das resposLas ao lnquerlLo, [unLamenLe com observaes reglsLadas na
grelha e em vldeo.

33

!"#$%&'() +" ,')-".%)

I|g. 20 1empo vs aco (ut|||zadores)
nesLe grflco podemos enLo ver o Lempo demorado pelo uLlllzador padro (um dos membros
do nosso grupo), segulndo o mesmo gulo que fol dado aos uLlllzadores de LesLe. ara alem do
uLlllzador padro, enconLram-se represenLados os Lempos demorados em cada passo pelos
sels uLlllzadores e compar-los com os resulLados do uLlllzador padro no grflco anLerlor. L
lmporLanLe noLar que os passos 3, 3 e 7 lmpllcam desenho, pelo que varlam conforme o Lempo
que cada uLlllzador dedlcou a crlar o desenho.
nesLa fase no se deLecLou nenhum problema grave, apesar de se noLarem dlflculdades com o
4 passo e o 8 passo que se verlflca ser por uma cerLa falLa de .""*,'20.

I|g. 21 1abe|a de erros
C grflco aclma mosLra os erros dados por cada uLlllzador em cada um dos passos, assumlndo-
se como erros no se Ler preenchldo um campo essenclal ou navegar para seces conLrrlas
as lndlcadas pelo gulo quando LenLando concreLlzar um dos passos.
Asslm consegulu deLecLar-se problemas em dols dos passos, nos quals vrlos uLlllzadores
deram vrlos erros. Cs passos em que houve problemas foram o olLavo e o nono. Aps a
anllse noLou-se que os erros no 8 passo passavam por uma falha em noLar o campo de

36

!"#$%&'() +" ,')-".%)
capLcha que era necessrlo preencher, enquanLo que no 9 passo, provlnham de uma
comblnao de falLa de .""*,'20 com, novamenLe, o campo Le CapLcha, para alem de uma
falLa de famlllarldade com o funclonamenLo dos frums.

Conc|uso
1endo flnallzado os LesLes e a sua anllse, pode-se conclulr que a malorla dos problemas
enconLrados eram derlvados, no slLe em geral, de uma falLa de .""*,'20 que por vezes
confundla os uLlllzadores, relaLlvamenLe a se Llnham Lldo efelLo as suas aces ou para onde lr
a segulr. no enLanLo, as dlflculdades com a ferramenLa de desenho em sl orlglnavam no de
problemas de .""*,'20 mas de uma falLa de adapLao, sendo que procuravam aLalhos e as
ferramenLas onde se esperarla de os enconLrar em ferramenLas de desenho vecLorlal locals
como o lllusLraLor. um facLo curloso e a falLa de famlllarldade com frums e a uLlllzao do
logo do slLe como )-&0 que redlrecclona para a 5%1"!'3", assumlndo apenas a exlsLncla
dessa funclonalldade o uLlllzador experlenLe.

Cap|tu|o S S|ntese da estratg|a de manuteno e suporte
uma das grandes vanLagens da uLlllzao do urupal, e o backofflce por ele dlsponlblllzado.
uessa forma, e posslvel a qualquer pessoa com prlvlleglos de AdmlnlsLrador, edlLar o conLeudo
presenLe na apllcao e asslm corrlglr qualsquer evenLuals problemas.
Lm suporLe dos uLlllzadores exlsLem as seces de ergunLas lrequenLes, conLendo resposLas
para as duvldas mals comuns. um llnk no fooLer presenLe a Lodos os Lempos abre um
formulrlo de conLacLo para envlar as duvldas dlrecLamenLe aos responsvels pela apllcao.
or flm, exlsLe uma seco no frum dedlcada ao suporLe dos uLlllzadores onde Lambem
podem colocar as suas duvldas ou ver se alguem [ Leve um duvlda semelhanLe e as resposLas
que Leve. or flm, caso se preLenda lnserlr novo conLeudo ou edlLar o [ exlsLenLe, fol crlado
um manual de ldenLldade, conLendo as regras de consLruo, uLlllzao do logo, Llpografla,
slsLema cromLlco e slsLema vlsual.

Cap|tu|o 6 An||ses I|na|s
6.1 An||se Cr|t|ca
Ao longo do desenvolvlmenLo do pro[ecLo, um dos malores obsLculos com que nos
deparmos, fol a lnLegrao da Al do SvC-edlL com o urupal, mas apesar de a nossa soluo

37

!"#$%&'() +" ,')-".%)
Lalvez no ser a mals eleganLe, e sllda e funclonal. SenLlmos que alguns dos problemas e bugs
que o mesmo nos deu Lalvez fossem resolvldos com recurso a comunldade de apolo e
desenvolvlmenLo do SvC-edlL, mas lnfellzmenLe no obLlvemos nenhum apolo da mesma, pelo
que Llvemos de conLar apenas com ns mesmos.
Lm relao ao layouL, olhando para Lrs, vemos sempre formas de o Lornar mals eflclenLe ou
aLracLlvo, apesar de esLarmos conLenLes com o que desenvolvemos, mas lnfellzmenLe, um
#"*"$-3& compleLo da apllcao nas ulLlmas fases de pro[ecLo era slmplesmenLe algo que no
podlamos fazer sem compromeLer as ouLras reas de desenvolvlmenLo e perder mulLo
Lrabalho [ felLo, para alem de no haver nenhum problema grave que o [usLlflcasse.
Lm relao a programao, a uLlllzao do urupal fol LanLo uma vanLagem como uma
desvanLagem. or um lado, permlLlu-nos obLer logo de parLlda um ,'20%..-2" compleLo e
facllldade na consLruo de pglnas e funclonalldades, por ouLro, Lornou mals compllcada a
lnLegrao com o SvC-edlL, mas em ulLlma anllse, conslderamos uma boa escolha Lermos
opLado por esse CMS para esLe pro[ecLo.
or flm, em relao ao grupo, conslderamos que nos consegulmos arLlcular e dlvldlr da melhor
forma para concreLlzar Lodas as Larefas necessrlas, uLlllzando da melhor manelra as
habllldades de cada membro.

6.2 Sugestes de desenvo|v|mentos futuros
Chegando a concluso do pro[ecLo, exlsLem sempre novas ldelas que vo surglndo que no so
lmplemenLadas por falLa de Lempo. uma dessas funclonalldades serla a posslbllldade dos
uLlllzadores crlarem galerlas em con[unLo, funclonando quase como um grupo de amlgos.
CuLras funclonalldades, como sugerldas pelos uLlllzadores de LesLe, serlam a posslbllldade de
um uLlllzador crlar um desenho como resposLa, ao desenho de um ouLro uLlllzador (um
funclonamenLo semelhanLe aos vldeos de resposLa no 9%(/(,"M e uma seco onde surglssem
as crlaes mals voLadas do dla, semana, ms, enLre ouLros.
uma funclonalldade que flcou por lmplemenLar fol a de, Lal como se pode ver a galerla das
verses do flchelro, ver-se Lambem uma com as crlaes derlvadas (ou forks) dele. 1ambem o
formulrlo de conLacLo no se enconLra funclonal, devldo a quesLes do funclonamenLo do
servldor que no Llvemos oporLunldade de esclarecer. Asslm, o desenvolvlmenLo da
funclonalldade de pergunLas frequenLes fol descarLado para uma ocaslo fuLura. Apesar dela
no exlsLlr, esLamos conflanLes que [ exlsLem canals de comunlcao suflclenLes (blogs,

38

!"#$%&'() +" ,')-".%)
noLlclas, comenLrlos, fruns) para dar resposLa a qualsquer duvldas que os uLlllzadores
possam Ler relaLlvamenLe a uLlllzao da ferramenLa de desenho ou do slLe em geral.
8elaLlvamenLe ao layouL, Llvemos ldelas para crlar verses dlferenLes, pelo que fuLuramenLe,
serla uma mals valla crlar )'9%(/$ alLernaLlvos, ou ouLros esquemas de cores e dar aos
uLlllzadores a opo de escolher qual prefere, vlsLo que nem Lodos gosLam da mesma colsa e
LraLando-se lsLo de uma comunldade para arLlsLas, os seus gosLos sero alnda mals varlados.
A Lraduo LanLo dos LexLos orlglnalmenLe em lngls Lambem e um ouLro ponLo que
fuLuramenLe poder ser melhorado, clarlflcando os LexLos e ellmlnando evenLuals erros.
or flm, um dos desenvolvlmenLos fuLuros mals lmporLanLes que se poderla fazer, era
melhorar o funclonamenLo da Al do SvC-edlL, conLrlbulndo para a apllcao que Lornou esLe
pro[ecLo posslvel, ou alnda melhor, desenvolver uma ferramenLa de desenho vecLorlal de ralz
para a weuraw.

6.3 rob|emas Lncontrados e So|ues
Ao longo do desenvolvlmenLo, foram surglndo vrlos problemas e dlflculdades, a malorla de
pequenas dlmenses e facllmenLe resolvldos, ouLros mals graves, requereram uma anllse
mals profunda.
C malor problema com que nos deparmos fol a lnLegrao do urupal com o SvC-edlL e a
passagem de valores enLre ambos. no exlsLla nenhum mdulo que o flzesse por ns, nem
havla qualquer lnformao onllne sobre alguem que o Llvesse anLes, pelo que fol necessrlo
crlar um scrlpL de ralz para fazer a llgao. lnfellzmenLe, LraLando-se de duas componenLes
dlsLlnLas, com pglnas de cdlgo exLenslvas, essa llgao revelou-se por vezes lnsLvel mas
conforme o pro[ecLo fol sendo desenvolvldo, os ,(3$ foram gradualmenLe sendo ellmlnados
aLe flcarmos com um slsLema mulLo funclonal.
CuLro dos problemas enconLrados [ na recLa flnal do pro[ecLo e alnda llgado com o SvC-edlL,
fol a Lroca de servldor do llnlab. vlsLo as refernclas ao mesmo no esLarem consLruldas da
melhor manelra Llveram de ser subsLlLuldas, desLa vez usando varlvels para lndlcar o camlnho
e apenas Ler efecLlvamenLe a morada do servldor num unlco lugar, fcll de alLerar. lsLo lr
permlLlr basLanLe facllldade caso se[a necessrlo Lrocar de servldor fuLuramenLe.

39

!"#$%&'() +" ,')-".%)
Cap|tu|o 7 Conc|uses
ara conclulr, acredlLamos que aLlnglmos de boa manelra Lodos os ob[ecLlvos, LanLo aqueles
que nos havlam sldo proposLos, como aqueles a que nos havlamos ns proposLo. Ao longo do
desenvolvlmenLo desLe pro[ecLo, Lambem crescemos conslderavelmenLe de forma Lecnlca,
desenvolvendo compeLnclas com o urupal, com o qual nenhum ns havla Lrabalhado anLes e
com o desenvolvlmenLo de )'9%(/$, aLraves da uLlllzao de grelhas e do slsLema 960.gs, uma
forma de Lrabalhar que anLerlormenLe desconheclamos.
ue forma geral, Lodos senLlmos Ler aprofundado os nossos conheclmenLos e Lermlnamos esLe
semesLre e esLe pro[ecLo, Lendo desenvolvldo compeLnclas que podemos usar fuLuramenLe
no desenvolvlmenLo de novos pro[ecLos e no melhoramenLo de pro[ecLos crlados
anLerlormenLe.

kefernc|as 8|b||ogrf|cas
8|b||ograf|a
SAlu1C, 8oberL, 8eglnners Culde Lo urupal, 2011
PL88LMAnS, uorlen, urupal 6: ulLlmaLe communlLy SlLe Culde, 2009
Webgraf|a
Coogle - www.google.com
urupal - www.drupal.org
hLLp://drupal.org/node/731826
SLackoverflow - www.sLackoverflow.com
w3schools - www.w3schools.com
urupalconLrlb-hLLp://drupalconLrlb.org/
neL1uLs+-hLLp://neL.LuLsplus.com/LuLorlals/[avascrlpL-a[ax/submlL-a-form-wlLhouL-page-
refresh-uslng-[query/

40

!"#$%&'() +" ,')-".%)
Anexos
lndlce de anexos:
Anexo 1 - CanLL . ............................................41
Anexo 2 - LsLado da arLe .........................................41
Anexo 3 - LlsLagem de requlslLos.....................................42
Anexo 4 - ConsLruo do logo......................................43
Anexo 3 - Mock-ups especlflcao grflca..............................44
Anexo 6 - ArqulLecLura de slsLema......................................43
Anexo 7 - PlsLorlal Mapas de navegao.................................46
Anexo 8 - lluxogramas..........................................47
Anexo 9 - ulagrama de lnLeraco..................................48
Anexo 10 - 8esulLado dos LesLes de compaLlbllldade.........................49
Anexo 11 - lormaLo dos LesLes de usabllldade............................30

41

!"#$%&'() +" ,')-".%)
Anexo 1 - Gantt

Anexo 2 - Lstado da arte
uevldo as suas grandes dlmenses, opLamos por dlsponlblllzar o llnk para a Labela que esL
alo[ada onllne.

42

!"#$%&'() +" ,')-".%)
Anexo 3 - L|stagem de requ|s|tos

- Front End -
1 Criao de documentos vectoriais (editor) 3 3 1 1 1 2
2 --- Criao de shapes pr-definidas 3 3 1 1 1 2
3 --- Criao de shapes originais (pen tool) 3 3 1 1 1 2
4 --- Desenho livre (pencil tool) 3 3 1 1 1 2
5 --- Edio de pontos 3 3 1 1 1 2
6 --- Layers 3 3 1 1 2 2
7 --- Edio/Definio de preenchimento 3 3 1 1 1 2
8 --- Edio/Definio de strokes 3 3 1 1 1 2
9 --- nsero de texto 3 3 1 1 2 2
10 --- Brushes 3 3 1 1 1 2
11 mportao de ficheiros para o editor (SVG) 3 2 1 1 1 2
12 Gravar documentos vectoriais (online) 3 3 1 1 1 2
13 Edio/reviso de documentos vectoriais 3 1 1 1 1 2
14 Acesso ao histrico do documento vectorial 3 3 3 1 1
3
15 Upload de ficheiros para o site (SVG) 3 3 1 1 1 2
16 Download de ficheiros (PNG/SVG) 3 3 1 1 3
3
17 Colocar/remover tags documento vectorial 3 2 2 2 1 2
18 Competies 3 1 2 1 1 2
19 --- Participar em Competies 3 1 1 1 1 2
20 --- Desistir de Competies 1 1 1 1 1 1
21 --- Ver Resultados de Competies 3 2 3 3 3
3
22 Criar Comentrios 3 2 3 2 3
3
23 --- Editar Comentrios 2 1 3 3 3 2
24 --- Apagar Comentrios 2 1 3 3 3 2
25 --- Reportar Comentrios 2 1 1 2 3 2
26 --- Promover Comentrios (karma/reputao) 3 1 3 2 3 2
27 --- Despromover Comentrios 2 1 3 2 3 2
28 Criar Discusses 3 3 3 3 3
3
29 Criar Galerias 3 2 1 1 1 2
30
Promover Discusses/Ficheiros
(karma/reputao)
3 2 3 2 3
3
31 Enviar Pedidos Amizade 3 3 1 1 2 2
32 Aceitar/Recusar Pedidos Amizade 3 3 2 2 2
3
33 Seguir actividade de outros utilizadores 3 3 2 3 2
3
Requisitos Perfis Prioridade / mportncia
# Requisito
Utilizador No
Registado
Utilizador
Registado
Moderador Admin Artista Experiente Artista Novato
Administrador do
site
Moderador do site Crtico
Mdia
(arredondada)
34 Bloquear utilizadores 2 3 3 3 2
3
35 Partilhar links com outras redes 3 2 3 1 2 2
36 Registo 3 3 1 2 2
3
37 Login/Logout 3 3 3 2 2
3
38 Fechar Conta 3 3 1 2 2
3
39 Recuperar Password 3 3 3 2 3
3
40 Editar Perfil 3 3 3 3 2
3
41 Ver Lista de Amigos 3 2 2 2 3 2
42 --- Remover Utilizador da Lista de Amigos 3 3 1 2 3
3
43 Ver Perfis 3 3 3 3 2
3
44 Ver Notcias 3 3 3 3 2
3
45 Ver Galerias 3 3 3 3 3
3
46 Ver Documentos Vectoriais 3 3 3 3 3
3
47 Enviar/Responder/Ver Mensagens Privadas 3 3 3 3 2
3
48 Feedback de interaco 2 3 1 2 1 2
49 Perguntas Frequentes 2 3 1 3 1 2
50 Tooltips/Ajuda Contextual 2 3 1 2 1 2
51 Documentao 3 3 1 3 1
3
52 --- Mapa do Site 2 3 1 3 1 2
53 --- Guias de utilizao do site 2 3 1 3 1 2
54 --- Guias de utilizao da ferramenta de edio 2 3 1 1 1 2
55 --- Termos de utilizao 3 2 1 3 1 2
56 Vdeo/animao introdutria 2 3 1 1 1 2
57 Formulrio de contacto 2 3 2 3 1 2
58 --- Envio de perguntas (a colocar nas FAQs) 2 3 1 3 2 2
59 --- Envio de sugestes 3 3 1 3 2
3
60 --- Envio de reclamaes 3 3 1 3 2
3
61 Pesquisa Documentos Vectoriais 2 2 2 1 3 2
62 Pesquisa Utilizadores 2 2 2 3 2 2
63 Pesquisa Discusses 2 2 2 1 2 2
64 Pesquisa por Tags 3 2 2 2 3 2
65 Organizar resultados pesquisa 2 2 2 2 3 2
66 --- Popularidade (n visualizaes) 2 2 2 2 2 2
# Requisito
Utilizador No
Registado
Utilizador
Registado
Administrador do
site
Mdia
(arredondada)
67 --- Data de criao 2 2 2 2 2 2
68 --- Data de ltima edio 2 2 2 2 2 2
- Back End -
69 Criar Competies 3 1 3 2 1 2
70 --- Fechar Competies 3 1 3 2 1 2
71 Atribuir Recompensas/Karma 2 1 2 1 1 2
72 Editar Contudos 3 1 2 3 1 2
73 --- Editar Comentrios 3 1 2 3 1 2
74 --- Editar Discusses 3 1 2 3 1 2
75 --- Editar Notcias 3 1 3 3 1
3
76 Mover Discusses 3 1 2 3 1 2
77 Banir Utilizadores 1 1 2 3 1 2
78 Enviar Mensagens Globais 3 1 3 3 1
3
79 Criar Notcias 3 1 3 3 1
3
80 Ver Reports (contudo ofensivo, etc) 1 1 2 3 1 2
81 Editar Estatuto Utilizadores 1 1 3 1 1 2
Legenda:
Ficheiros
Editor Grfico
nteraco
Pessoal
Ajuda
Pesquisa
Back End
mportncia/Prioridade:
1 - Pouco mportante
2 - mportante
3 - Muito mportante
# Requisito
Utilizador No
Registado
Utilizador
Registado
Administrador do
site
Mdia
(arredondada)

43

!"#$%&'() +" ,')-".%)
"#$%& ' ()&#*+,-./& 0& 1&2&
C desenvolvlmenLo do logLlpo Leve como base a fonLe Plruko, a parLlr dela a[usLaram-se as
leLras com modlflcaes nos vecLores, com vlsLa a Lorn-las mals lnLeressanLes.

ALraves de uma comblnao de ellpses com sLrokes da prprla leLra, fol enLo posslvel
consLrulr a nuvem para o elemenLo de fundo ao qual foram adlclonadas as goLas.

!unLando Ludo Lm-se enLo flnalmenLe, o nosso logLlpo.

44

!"#$%&'() +" ,')-".%)
"#$%& 3 4&56(-7* 8*7$59:95;./& 2,<:95;
glna rlnclpal
lazendo uso do slsLema de 3 colunas, agrupa menus na coluna esquerda, usando as ouLras
duas em [uno para conLeudos.

lerramenLa de uesenho
1endo em conLa a necessldade de um canvas grande, nesLa pglna opLou-se por usar a largura
lnLelra da [anela em vez de apenas os 940 plxels

43

!"#$%&'() +" ,')-".%)
"#$%& = ( ",>-9+$5+-,; 0$ *9*+$?;

BD
DRUPAL
PHP
DRUPAL
API
CORE
MODULES
COMMUNITY MODULES
SVG
EDIT
INTERNET
Vector art de laptop, servidor, nuvem e bd de: http://www.clker.com
Esta a arquitectura de sistema do projecto weDraw, representativa das
interaces efectuadas a nvel do servidor e entre o servidor e o cliente.
O projecto weDraw pretende criar uma comunidade para artistas, novatos ou
experientes, unindo uma ferramenta de desenho vectorial online robusta com
um sistema de ranking, competies, discusses e mais!
weDraw 2011 - Projecto de NTC - DeCA - UA
SERVIDOR CLIENTE
BROWSER
SITE POST
POST
ARQUITECTURA DE SISTEMA
node
imagem
criada no
drupal
imagem
png
criada
Content
Profile
Organic
Groups
DHTML Menu
Pathauto
Link
Image
Fivestar
Privatemsg
Buddylist2
Tagadelic
Views VotingAPI
Logintoboggan
Node Gallery
QuickTabs
Plus1
Embedded
Media Field
png
gravado
no
servidor
link p/
imagem
adicionado
a BD
(dados da
imagem)
(dados da
imagem)
ImageAPI
ImageCache
ImageField Thickbox
Content Construction Kit
Activity
CCK
Filefield
CCK
Imagefield
A depende de B
Interaco
Pessoal Construo do site

!"

#$%&'# ) *&+,$-.+ ) /01 ) %$12 ) 3456$&758'8$ 8$ 26$5&+ ) 9:;<+ =>??
!"#$%&'() +" ,')-".%)
"#$%& ' ( )*+,&-*./ 0.1.+ 2$ 3.4$5.67&

Pgina Inicial
Pgina Principal Editor
Discusses Galerias
Galerias
Ajuda
Back Office
Gerir Competies Gerir Utilizadores
Gerir Contudos
Utilizadores
Gerir Notcias Reports
Pesquisar
Resultados da
Pesquisar
FAQ Documentao Contacto
Guia de utilizao
da ferramenta
Termos de
Utilizao
Guia de utilizao
do site
Perfis
Lista Amigos
Comentrios
Perfil
Posts
Ficheiros
Verses
Anteriores
Comentrios
Ficheiro
Notcias
Mensagens
Pessoais
Comentrios
noticia
Comentrios
discusso
Competies
MAPA DO SITE
Editor Grfico
Interaco
Pessoal
Ajuda
Pesquisa
Back End
LEGENDA
Acessvel a partir da
pgina inicial (destaques)
a qualquer tipo de utilizador.
Utilizador no registado
Utilizador registado
Moderador/Administrador
ACESSVEIS EM TODAS AS PGINAS E A TODOS OS UTILIZADORES
Footer
Header
Este o mapa de site do projecto weDraw, representativo da pginas constituintes do projecto e
a da relao entre elas. As pginas esto codificadas por funcionalidades. Os caminhos esto codi-
ficados por nvel de acesso.
O projecto weDraw pretende criar uma comunidade para artistas, novatos ou experientes, unindo
uma ferramenta de desenho vectorial online robusta com um sistema de ranking, competies,
discusses e mais!
PROTOTIPAGEM - ESCOLHA RAMOS
Pgina Inicial
Pgina Principal
Editor Discusses Galerias
Galerias
Ajuda Back Office
Gerir Contudos
Utilizadores
FAQ
Documentao
Contacto
Guia de utilizao
da ferramenta
Termos de
Utilizao
Guia de utilizao
do site
Perfis
Lista Amigos
Comentrios
Perfil
Posts
Ficheiros
Verses
Anteriores
Comentrios
Ficheiro
Notcias
Mensagens
Pessoais
Comentrios
noticia
Comentrios
discusso
Competies
O projecto weDraw pretende criar uma comunidade para artistas, novatos ou experientesm,
unindo uma ferramenta de desenho vectorial online robusta com um sistema de ranking, com
Este o mapa do site tendo em conta a especificao dos compontentes da plataforma a serem
desenvolvidos na fase de prototipagem. Esses componetnes esto assinalados a azul.
peties, discusses e mais!
Pesquisar
Resultados da
Pesquisar
MAPA DO SITE
Pgina Inicial
Pgina Principal
Galerias
Ajuda Back Office
Gerir Contudos
Utilizadores
FAQ
Documentao
Contacto
Guia de utilizao
da ferramenta
Termos de
Utilizao
Guia de utilizao
do site
Perfis
Lista Amigos
Comentrios
Perfil
Posts
Ficheiros
Verses
Anteriores
Comentrios
Ficheiro
Notcias
Mensagens
Pessoais
Comentrios
noticia
Comentrios
discusso
Competies
Este o mapa do site tendo em conta a especificao dos compontentes da plataforma a serem
desenvolvidos na fase de prototipagem.
Pesquisar
Resultados da
Pesquisar
Prioridade Alta
Prioridade Baixa
A desenvolver
Layout
(Contudo esttico)
Prototipagem Alta Fidelidade
LEGENDA
MAPA DO SITE - FIM DA FASE DE PROTOTIPGEM
Pgina Inicial
Pgina Principal
Galerias
Ajuda Back Office
Gerir Contudos
Utilizadores
FAQ
Documentao
Contacto
Guia de utilizao
da ferramenta
Termos de
Utilizao
Guia de utilizao
do site
Perfis
Lista Amigos
Comentrios
Perfil
Posts
Ficheiros
Verses
Anteriores
Comentrios
Ficheiro
Notcias
Mensagens
Pessoais
Comentrios
noticia
Comentrios
discusso
Competies
Este o mapa do site tendo em conta a especificao dos compontentes da plataforma que foram
Pesquisar
Resultados da
Pesquisar
Prioridade Alta
Prioridade Baixa
A desenvolver
Layout
(Contudo esttico)
Prototipagem Alta Fidelidade
LEGENDA
VERSO BETA - DESENVOLVIMENTO
Pgina Inicial
Pgina Principal
Galerias
Ajuda Back Office
Gerir Contudos
Utilizadores
FAQ
Documentao
Contacto
Guia de utilizao
da ferramenta
Termos de
Utilizao
Guia de utilizao
do site
Perfis
Lista Amigos
Comentrios
Perfil
Posts
Ficheiros
Verses
Anteriores
Comentrios
Ficheiro
Notcias
Mensagens
Pessoais
Comentrios
noticia
Comentrios
discusso
Competies
Este o mapa do site tendo em conta a especificao dos compontentes da plataforma que foram
Pesquisar
Resultados da
Pesquisar
Prioridade normal
Prioridade baixa
Prioridade urgente
Prioridade alta
Mdulo concludo
LEGENDA
(prioridade de desenvolvimento)

!"

#$%&'# ) *&+,$-.+ ) /01 ) %$12 ) 3456$&758'8$ 8$ 26$5&+ ) 9:;<+ =>??
!"#$%&'() +" ,')-".%)
"#$%& ' ( )*+%&,-./.0

Utilizador est na
pgina do ficheiro
Ficheiro
pblico?
sim
no
utilizador
com
sesso
iniciada?
no
sim
Utilizador
tem permisses
p/ aceder
ficheiro?
no
Enviar pedido
amizade
sim
Carregou
png?
sim
Overlay
login/registo
download png
FIM
Botes download "png
"png" e "svg"
!"#
download svg
Pedido
aceite?
sim no FIM
Este o fluxograma representativo da funcionalidade de download de documentos vecto-
riais e respectivas representaes bitmaps. Os links de download de svg e png recebem os
respectivos dados da tabela Files: dados svg e path da imagem png.
O projecto weDraw pretende criar uma comunidade para artistas, novatos ou experientes,
unindo uma ferramenta de desenho vectorial online robusta com um sistema de ranking,
competies, discusses e mais!
FLUXOGRAMA DE DOWNLOAD DE
DOCUMENTOS VECTORIAIS E FICHEIROS PNG
[Content_type_image]
onde id = ID do node
criado
+Coluna
tabela Files
+Coluna
tabela Files
+
SVG Edit
Extenso
server_opensave
Utilizador grava doc.
vectorial
image data (png)
image data (svg)
require './includes/bootstrap.inc'
drupal_bootstrap
(DRUPAL_BOOTSTRAP_FULL)
Funes necessrias
para interagir com o
Drupal
Acesso a dados
de sesso e base
de dados
Utilizador
tem sesso
iniciada?
Overlay
Login/Registo
Utilizador tem
conta?
no
Registo
Login
sim
no
sim
Ficheiro j foi
gravado?
script
"svg_editor_save.php"
carregado
Overlay gravao
(nome, tags)
no
Form. gravao
submetido
Nome
introduzido?
no
Feedback erro
sim
data/vars
(imagedata, doc
title, tags)
1. VERIFICAO DE SESSO E DADOS ADICIONAIS
MODELO BD DRUPAL (RELAO ENTRE TABELAS RELEVANTES)
2. GRAVAO DE FICHEIRO PNG E DADOS SVG
(Funo criada pelo grupo)
sim
Gravao ficheiro
PNG
Funes
Filesystem
(Criar ficheiro+escrever
dados png)
PNG gravado
como
"doc title"+ timestamp
+".png"
DRUPAL API
Ficheiro j
gravado?
+path, title, svgdata
ref. a id de original
sim
Query
SELECT
[Files]
ID de verso
original
Criao Registo
no
Criao Registo
+path, title, svgdata
3. CRIAO DE NODE NO DRUPAL
Criao array
c/ dados node
Funo Drupal
Criao Node
4. EDIO DE TABELA DE LIGAO ENTRE NODES E FILES
Query
SELECT
[Nodes]
ID do node criado
EXTENSO PHP
FILESYSTEM
Estabelecer
ligao c/ BD
Drupal
Query
UPDATE
+file id
Recuperao de
file id da coluna
criada
Pgina Drupal da imagem
nova
FLUXOGRAMA DE GRAVAO DE
DOCUMENTOS VECTORIAIS
FILES NODES
CONTENT_TYPE_IMAGE
file id
...
svg data
id de verso
original
node id
...
id node id file id
...
Este o fluxograma representativo da funcionalidade de gravao de documentos vecto-
riais criados atravs da ferramenta online. Mostra a integrao indita estabelecida pelo
grupo entre a aplicao SVG Edit e o CMS Drupal.
A extenso activada,
server_open save, includa
com a ferramenta SVG Edit e
permite, aquando da gravao
de um documento, a chamada
de um script PHP.
Dados passados, por
POST, para o script.
Estes so os dados sobre a
imagem passados inicialmente,
assim como os introduzidos
pelo utilizador no formulrio
anterior.
Utilizador escolhe
"Upload" no menu
de navegao
Overlay Upload
Utilizador
submete
form
Ficheiro
escolhido?
Ficheiro
vlido?
(svg)
sim
no
Feedback erro
sim
Nome
introduzido?
no
no
sim
SCRIPT DE GRAVAO
DE DOCS. VECTORIAIS
FIM
Reunir dados a serem
passados p/script gravao
(nome, svg data, png data)
Upload SVG
FLUXOGRAMA DE UPLOAD DE
DOCUMENTOS VECTORIAIS
Este o fluxograma representativo da funcionalidade de upload de documentos vectoriais
criados atravs de ferramentas externas. Utiliza, para a insero da imagem no Drupal, o
script de gravao de documentos vectoriais.

!"

#$%&'# ) *&+,$-.+ ) /01 ) %$12 ) 3456$&758'8$ 8$ 26$5&+ ) 9:;<+ =>??
!"#$%&'() +" ,')-".%)
"#$%& ' ()*+,-+.+ *#/$-+012&

!@

#$%&'# ) *&+,$-.+ ) /01 ) %$12 ) 3456$&758'8$ 8$ 26$5&+ ) 9:;<+ =>??
!"#$%&'() +" ,')-".%)
"#$%& 34 ( 5$678/+9& 9&6 /$6/$6 9$ 0&.:+/*;*8*9+9$

E7 2 3 0 3
Todas as zonas do portal so
acessveis. O login/logout no
revela problemas.
Em termos de aspecto, os rollovers
no funcionam corretamente. A
ferramenta no funciona (no
aparecem os cones).
E8 3 3 0 3
revela problemas. O aspecto
o pretendido.
A ferramenta no funciona.
E9 3 3 2 3
o pretendido. A criao de
contedos na ferramenta
funcional.
No possvel abrir criaes mais
complexas.
Firefox 3 3 3 3 O site totalmente funcional. Mais lento em relao ao Chrome.
Chrome 3 3 2 3
O site funcional. (Bug na
importao de svg)
Ao desagrupar o contedo de um *.
svg importado, alguns atributos
como as cores so alterados
completamente
Safari 3 3 2 3
funcional.
Nao carrega as imagens mais
complexas
Opera 3 3 2 3
funcional.
Nao carrega as imagens mais
complexas. A navegao
consideravelmente mais lenta em
relao aos restantes navegadores.
Android (default
browser)
1 1 0 0
Para pequenas consultas de
galerias,etc, aceitvel.
mpossvel criar imagens. Resoluo
do site inapriopriada para
dispositivos mveis. mpossvel
realizar login.
Suporte Aspecto Navegao Ferramenta Login/Logout Pontos Positivos Pontos negativos
iOS (Safari) 3 2 1 0
Para o mesmo propsito do
Android, apesar de ser dotado
de melhor qualidade de
visualizao e navegao. A
resoluo elevada do ecr
utilizado no iPhone4, em
conjugao com as
ferramentas de zoom, tornam
possvel a navegao.
A utilizao da ferramenta
praticamente impossvel (apenas
permite "cliques"). mpossvel
realizar o login.
Legenda:
3. 100% funcional,
sem qualquer
problema esttico
2- 100% funcional;
alguns problemas
de aspecto que
no afectam o
funcionamento
1- Problemas
gerais de
funcionamento;
bugs.
0- 100% No
funcional
Suporte Aspecto Navegao Ferramenta Login/Logout Pontos Positivos Pontos negativos

!"

#$%&'# ) *&+,$-.+ ) /01 ) %$12 ) 3456$&758'8$ 8$ 26$5&+ ) 9:;<+ =">>
!"#$%&'() +" ,')-".%)
"#$%& '' ( )&*+,-& .&/ -$/-$/ 0/,1232.,.$
Grelha de Anlise

Nome do nqurido: Data:

# Tempo
Utilizado
Erros Observaes

1

2

3

4

5

6

7

8

9

10

weDraw / NTC / DECA-UA / Junho 2011

Guio Cognitivo

Siga os passos enunciados na tabela e aps concluso responda s questes no final. Foi
providenciado um espao para curtos comentrios sempre que ache que tal relevante.

Caso tenha alguma dvida de interpretao no hesite em pedir esclarecimento.

# Passos
1

Registe-se na aplicao
2

Abra o editor vectorial.
3

Utilize as ferramentas ao seu dispor para criar e salvar um simples desenho.
4

Actualize os campos do seu perfil de utilizador.
5

Actualize um dos seus desenhos e mude por exemplo as cores.
6

Visite os perfis de outros utilizadores
7

Abra a criao de um outro autor e faa uma simples alterao.
8

D o seu feedback criao de outro autor.
9

Participe nas discusses do frum.
10

Termine a sua sesso.


Guio Cognitivo

Por favor responda s seguintes questes:

1 - Sentiu alguma dificuldade com qualquer um dos passos?

2 - Achou algum dos passos ou funcionalidades pouco intuitivo?

3 - Existe alguma funcionalidade que sinta que esteja em falta e gostaria de ver adicionada?

4 - De 1 a 5, sendo 1 no interessado e 5 muito interessado, como classificaria o seu
interesse em voltar a utilizar esta aplicao?

1 2 3 4 5

5 - Conhece outras aplicaes online similares?

6 - Tem alguma sugesto para corrigir ou melhorar as funcionalidades percorridas?


Relatório de Desenvolvimento Da Plataforma Wedraw - PT

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Relatório de Desenvolvimento Da Plataforma Wedraw - PT

Загружено:

Авторское право:

Доступные форматы

unlversldade de Avelro | ueCA | n1C | ro[ecLo 3 Ano

Вам также может понравиться