Diagramação de interfaces WEB.

!

" #

! $ !

" ! # #%

!

" #

! $ !

" ! # #%

!

" #

! $ !

" ! # #%

!

" #

! $ !

" ! # #%

!##

&'

!##

&'

!##

&'

!##

&'#

#

#

#

(

(

(

( ))))%

%

%

%

&'#

&'

&'

&'

#

#

#

*

*

*

*

# *+

# *+" !

# *+

# *+

" !

" !

" !

%

* &'#

"

!

%

%

* &'#

* &'#

"

"

!

!

%

* &'#

"

!

*

,

-*

,

-*

,

-*

,

-. / ! 0 )% , 1 2!# 3 4 5 6 2 3 7 ! ., 8 9, . 5 . , * 1 : + ! ; ! < ! ., = 9, ; , 1

,5

> :

,5

> :

,5

> :

,5

> :

# ! . % 7 4 ) ?@@?

F814D

Diagramaçáo de Interfaces WEB.

Dissertação (Mestrado), Universidade Federal de Campina Grande, Centro de Ciências e Tecnologia, Coordenação de Pós-Graduação em Informática, Campina Grande -PB, Fevereiro de 2002.

73 p. II.

Orientador: Bernardo Lula Júnior Palavras-Chave:

1. Design de Interfaces W E B

2. Processo de Diagramaçáo de Páginas W E B 3. Layout de Páginas W E B

M A R C O N I L U I Z F R A N Ç A

D IS S E RTAÇ ÃO A P R O V A D A E M 2 5 . 0 2 . 2 0 0 2

,5 >, 8 . 5 . =

. , 5 . < : . = , 5

9, , ,6 . 5

.6

.6

.6

.6

A

5

,B

/ .

8 .5

.

9,

.

: !

,

4C

8 B

8

,

.D

:

, .,

-

5

.

5 4

,

,

,6)5

. 5

, . 0.

,

6

. 5

8

,

5=

1

5

,

E

4 F:

G

,

,

,

,

5= E 4 . . . , C , 5 - . .1 . , , . , .1 : # 5= 4 < . ; . 8 4 . ,6 .5 . .1 . H , 8 4 . , .1 . 5 - , I . 6 9, . 5 .5 . .1 . H 8 . .I , C , 5 - , I . 64 4 54 . .1 . :

"= . E . . . 5 = J G , = . . . = , , 5 5 J . : "= . E 4 = ; = 4 J . , 5 G ..5G = . . = . . H = 8 4 = 5 = . , J . 4 5 . , J= = 55 J = ..5 = . = . . H = = 8 . . = J G , = 4 5 5 , 4 54 = . = . = . . :

, 1

, 1

, 1

, 1

,

4

4

" 5

B

,

B

! .6 ,5 K ! .6 ,5 K ! .6 ,5 K

! .6 ,5 K " #" #" #" # &'#&'#&'#&'#

K:K 1

K

K:? # E ,

L

K:M N, ! ,

O

K:L # E 4 . 5

P

K:Q # E 4 , 1

P

K:R * 5

S

K:O , ,

S

! . ! . ! .

! .6 ,56 ,56 ,56 ,5 ???? #!#!#!#! #### %%%% * &'#* &'#* &'#* &'# +%+%+%+% *

* * *

?:K ,

KK

?:? 4 54 , % 1

KL

?:M % 1 ,

KO

?:L % 5=

KS

?:L:K % 1

?@

?:L:? , + " . 1 , * = % 1

?@

?:L:M ! , , % 5=

?K

?:Q *

?Q

?:R * 5 -% 5=

?R

! .6 ,5 M ! .6 ,5 M ! .6 ,5 M ! .6 ,5 M NNNN ####

T# "

T# "

T# "

T# "

"""" !!!! M:K ,

?S

M:? * 5

M@

M:M B .5

MK

M:L ! C !5

MQ

M:Q ,5

MR

! .6 ,5 L

! .6 ,5 L

! .6 ,5 L

! .6 ,5 L #!#!#!#! #### %%%% * &'#* &'#* &'#* &'#

" ! "" !! " ! L:K ,

L@

L:? ! . 1 . ! . 1

LK

L:M , I . 64 , . ! , 1

LL

L:L , 5 ! , 1

LR

L:Q 15 , I ,

LS

! .6 ,5 Q ! .6 ,5 Q ! .6 ,5 Q

! .6 ,5 Q *U"# #*U"# #*U"# #*U"# # %%%% * &'#* &'#* &'#* &'# """" !!!!

Q:K ,

QK

Q:? *C

Q?

Q:M 5 ,

G ,

QM

Q:L % 1

QL

Q:Q + " . 1

QR

Q:R ! , % 5=

QO

Q:O # - 5 % 1 *

QP

Q:P ! 5,

R@

! .6 ,5 R ! .6 ,5 R ! .6 ,5 R ! .6 ,5 R !# !!# !!# !!# ! '#'#'#'# R:K # E 4 4 , ,5

RK

R:? . 4

RR

$ $ $ $ !!!! #% + ! #% + ! #% + ! #% + !

RP

.< K .< K .< K

.< K &'#&'#&'#&'# #### # "# "# "# " !# V!# V!# V!# V #### + + + +

OK

% # + # % # + # % # + # % # + #

OL

"

5

"

"

5

5

"

5

" 5 M:K 7 ! C !5

MR

" 5 L:L:K 7 ! . .1 . .1

:

LO

,

,

,

,

, ?:K 7 # C ,5 LQ@ :!:

K?

, ?:? 7 4 1, . , , D ,5 1,

KM

, ?:M 7 ,5 5 ,

KP

, ?:L 7 1 1 . 1

?K

, ?:Q 7 % 5= R 5, L . B

?M

, ?:R 7 ! , 5= . , 1

?L

, ?:O 7 2K3 % 5= 2?3 2M3 * 2L3 .

?R

, ?:P 7 2K3 % 5= 2?3 2M3 * 2L3 .

?O

, M:S 7 5 64 5 C , 4 , 5 2

;

5 9, 3

M?

, M:K@ 7 5 64 5 B 2 ; 5 5 , 3:

MM

, M:KK 7 5 64 5 , B , 4 , 5 2

;

5 3

ML

, L:K? 7 1 . 5 , .1.1.1.1 9,9,9,9,

LL

, L:KM 7 1 . 5 , 5555

LQ

, Q:KL 7

G ,

5=

QL

, Q:KQ 7 , 1

QQ

, Q:KR 7 1 . 1 , 1

QO

, Q:KO 7 ! , B 5=

5 G ,

QP

, Q:KP 7 * ,

5 G ,

QS

, Q:KS 7 , 5 - E 5 4

*

B.5

, 5 - 4 KOF 5, K@?L B ORP

. B 5

R@

""""

#

#

#

#

$

$

$

$

% % & ' ( )* ' +,+' & ) - . / 0 - ' 0 % ' " 1 % % % 2 ' ' 3 $ ' % 1 45 -6 3 ++,7" 8 2 ( )* %9 : ; <* 0 % = * 3 ; # > " 5 5 -6 3 4 ++,' " ??@ 7' ( ) )* > 3 : A4"""7 '

;

.

#

" 8 ) A; #B' 9 0 )

" 5 '

*

4 *7" D 9 3 ) E 666" " F E 0 " ' %

;G

. < H

*

4; <*7" 2 I . ' ; <* 0 J ) . B" 8 % $ ' J % I 9 0 % % " 5 5 -6 3 48 ( )* ' ++,' " ??@ 7: A< ' ' 0 - ) 1 -0 " D - - 0 % % -- " D ) ' ' 0 J % ' % ' B"

( )* ' % ' J - % 0 % " ' % 0 " 8 5 -6 3 4 ++,' " ??@ ?7: A8 1$ 0 -" 0 ( ) D % ) L L 0 % ' ( )* & 3 % % " 8 ) $ $ ) 0 % . L ) B" M ) L NO' ' 0 - / #;D ' 5' P # 0 . 1 45 -6 3 ++,7" D 0 ) . J - ' : . 0 " 5 -6 3 4 ++,' " ??? 7 :

AD % 3 % ' % > E ) % ' ' - % $ & B" 8 2 3 ) R % S" % J 0 = $ J % = $ J - ) R% S R S" 0 ) % % $ % L 4 $ 7" 9 1 $ 2 ' 0 $ % 4 % 7 $ 1 " 9 0 $ I % 3 ) %9 ' 1 ' % 3 % " 8 % I

-

' L $ 0 & " 8 ) '

-

9 $ E $ 4/ +++7' R S" D 0 ' % ' 0

-% ' % % ) " 8 5 -6 4 ++,' " ?? 7: AU 0 . = 9 % 0 % ' ' % % 0 % 4"""7B" 4 ++,' " ?? 7: A J % = ) % $ ) % 3B"

"C

"C

"C

"C

1111

D

D

D

D

9 3 %9 & ' R666" " " S' ' % $ I ) $ ' 0 -

-

4 7' 1 ' $ 0 3 I $ " 5 ' 9 %9

-

0 $ % ' . ' $ 9 $ " D ' 9 0 $ '

$ 3 % % " # ' 9 $ 4

G

) - 7 0 2 3 4( V ++W7" 4 % 7' 3 $% % ) " # . ' $ % J 9 J

G

' ) $ " M 9

G

9 %9 J ) ' > $ " 8 ) ( V 4 ++W' " ,O7: A@ > $ $: 1 B" D ( V 0 " 5 ' ' 0 $ % $ " 5 ' %9 % " D ( V 4 ++W' " N 7'

)

9:

A4"""7 2 " ( L " ( ' . ' B" # ' - % 1 9 ' ' $ '

G

' ' I " 5 ( V 4 ++W' " T7: A

)

0 " 8 ' 9 ) % 4

-

7 ) B" 5 4 ++,' " NT7: A 9 ) % $ B" # 9 ' 3 0 - $ 0 ' ' . > % % " 8 9 0 ' 9 % 0 %$ 0 % % "

% ' $ ' - $ 0 9 $ 0 % 3 ) $ % ' 9 3 9 ' $ 4< )( V ++C7" 9 $ ' ) ' J % 3

G

" M - 9 - 9 3 ' $ $ ) $ $ 4( V ++W7" 1 ' $ - I R S' ' ) 45 COO 7" 9 ) ( V 4 ++W' " T7: A %$) ' % 3 0 - ' ) $) " # >) $) 0 J. $. " $ ' ) $ ' ' $ - % I B"

<

'

' $ L " D ) % ' 9 0 % % 9 ' ) . > $ ' 9 " 8 ' 9 ' ' 9 " 8 4 ++,' " ?? @7: A8 9 -$ ) B" . ' 1 -9 % % $ $ "

"K

"K

"K

"K

M

M

M

M

#

#

#

#

G

$ 9 9 1 $ 2 1 $ 4 2 ' - ' ) ' ' "7 4; +,N7"

G

' $ )

0 ' 0 3 J " 8 ' 0 & ) ' 3 -$ %$ 9 ) 3

G

$ " D ' ' $% % % - $ " # ' & ' R 9 S' % 4 ) 2 '

V

' ' % ' $ ' "7 . L " D - $ ) 4 . ' 2 $ 7 0 3 $ 0 1 4( V ++W7" D ' 0 0 3 ) $ 9 '''' %%%% )))) '''' ''''

))))

' ' ' ' ' ' ' ' ---- )))) − $ 3 0 $ ' 3 -

G

$ 1 % "

' 0 0 ) % 9 $$$$ )))) 2 22 2 IIII 0000 " 8 R S 3 ' 0 0 > . > $ 0 2 0 3 1 ) $ " P ' 0 0 % 9 9999 % % % % 3333 %9%9%9%9 2222 3 3 3 3 %%%% $$$$ )))) ' 1 ' 9 $ 3 2 % ) " D 0 2 0 ' - "

"Q

"Q

"Q

"Q

1

1

1

1

%

%

%

%

/

/

/

/

# 9 ) $ ' 0 3 3 ) $ % % % 0 "

"T

"T

"T

"T

1

1

1

1

%

%

%

%

D

D

D

D

"T" % % 9 3 J

)

G

" "T"C * % 2 . ) $ ) " "T"K 8 0 2 3 $ " "T"Q @ 3 ) 3 2 . $ "

"N

"N

"N

"N

<

<

<

<

# 1 % ' - % % > : ' 0 % %% % )))) 3 33 3 $ $ $ $ " # 3 ) . % 3 9 " 8 4 7 ) - ) $ " - % )))) $ $$ $ 2222 0000 $ $ $ $ """" D $ 3 $ ) :

6 %

P

#

" # ' L - 2 9999 3333 3 33 3 $ $ $ $ %9%9%9%9 2222

3 3 3 3 %%%% $$$$ )))) " 3 ) "

"W

"W

"W

"W

D

D

D

D

' ) N : C #### )))) #$ #$#$ #$ % - J ' 0 3 1 $ 0 ) X $ = K' ) # 0 ## 00 # 0

* G

* G

* G

* G

'''' $ ' % 3 $ ' = ' Q' #### )))) '''' % $ $ ' 2 % $ 4

6

%

P

#

7' ) $ ' 3 $ 2 % ) = 0Y> ' T' <9<9<9<9 ))))

'''' 3 ) 0 % % $ 2 % ) = ' N' )))) 2 2 2 2 ' . ) % - "

&" '! #

!

&" '! #

&" '! #

!

!

&" '! #

!

((((

) * ) ) + , * - . / ( 0 + 1 ) 2 * 0 ) ) ( 3 1 * + 1 . ( 4 5 , ) 1 , * 6 . ( 1 + 7 1 * 8 . 8 8 ( 9- , - + ) 0 * ( : ) /1 ) + 1 + .

) ) ( 9 4 ;<=1 ( > 5 . ? @ ) A ) / A 1 . * 3 B *CB ) / ( ) . A 2 * . - D( ) . B / 1 * , , ( * 0- ) , E>F ( (( G- , 1 * . / ) * ) ) + 1 49 ;<=5( 4 ( 51 * , 1 ) ( / * , ( # 1 ) 4 5 - ( 9 4 ;<=1 ( > 5 ?

H

H

H

H

@ , ) ) + 3 ( 0 ) * / . ) - A 1 , , / -) . * , , . 2 + 3 - D( I ( J , E>F ( ( ! ) - , / - + ? 7 K, K 3L1 - , > ! . + C + # M , F 49 ;<=5(

E

E

E

E

! 2 1 ( ) -6 - ? I ( J ) - 6 - ( @ + 1 6 , . 2 ) ( ! + . , ) 1 1 1 . ( : 1 . ) ( ! + 1 ) ) . ? 1 #1 1 ( N / . # 6 * - + 1 . .-) A 6 - D 9 4 ;<=1 ( >H5( + ) , -/ 1 . / 1 , ) 0 .

>

>

>

>

2 * ( ' 1 ) ) . 4 + 5 0 ) . ) .

O

49 ;<=5(

((((

)

)

)

)

" -

" -

" -

"

-! * ), . 3) ) G + " + " 7 - 1 0- B + ( ! , ) + * ) ) 8 2 1 + ( ) ) , / ,. * ) ( - ) 6 1 0 1 + 3) . ) + +

=

=

=

=

2 1 + ( . - 7 - * , . P 4 ;;H1 ( <5? @ A ) . 1 + + 1 * ) D( ! + + - * ) - . + 2 ( . / , 1 1 ) ) 7 -( ! 1 - ) . / ) - -. ( ! ), , ) ) ) ) 4 + 5 - * - ( , P 4 ;;H1 ( ;5? J * 3 ) 1 1 2 1 + (

Q

Q

Q

Q

@ 4 , 5 - ( ) + 1 . B - - 1 1 , ) D( + ) . ) ) 3 7 - 1 1 + ) ) . 1 . . 3 7 - ( ! 1 + / . - + + 0 1 + ) ( : . + 0 ) / , RR ! . + 1 9 1 7 ) ) ( . + 1 + -4# .K L ;< 5( ! / - 1 1 + . ) ) ) , F( ! # . .K L 4 ;< 1 (Q5?

<

<

<

<

@I # , 1 , ;1 ! 1 , F1 * + ) 8 ( M ) ), 2 B 1 3 , * D( , 1 / * 2 - / - - 1 ) B 2 0 ) 1 3 ) EF * + - / 0 + ( 4# .K L ;< 5( ! + . - + * -) )B. 1 / + 1 / ( # .K L 4 ;< 1 ( F5 2 + * + ? @ + 0 / 1 0 + , 1 0 ) 0 ) 0 ) 1

;

;

;

;

0 / ) , . 1 0 1 0 1 1 0 * . 1 0 . ) + 6 + . ) D 1 3 1 - 1 3 0 2 . A + ) ) B A ( - / 7 0 1 ) 1 - 1 ) * * . 1 0 2 A . , 2 A ( / + , A - ( S +- . + ) A + ( 1 . + ) + . / 8 + - ) ) ( ! ) / + * 0 -- ? 5 0 ) ) T 5 2 1 - 3 T 5 / 2 A

F

F

F

F

3 T )5 . ) * 0 ) 4K L ;< 5( ) 1 + / , 7 + / , - ( . 1 2 + . + ) - 1 / + , - . 4 P ;;H5( ! 1 - 2 . 3 / A 0 -(

(H

(H

(H

(H

" -

" -

" -

" -

I

I

I

I

- , + 0 -* ) , ( 4 ;<Q1 ( H<>5 - ? @ . ? 1 ) 1 0 1 A 1

1 ) 1 1 1 1 . 1 D( , *

-O

- * - ( -/ . A 1 1 2 1

O

1 . 1 4 5( ' 1 . - . 1 / + ( ' ) # I + ( 4 ;; 1 ( H<51 . ? @ + 1 2 1 1 A - 1 * 1 + + * ( 0 -0 1 ) * ) - -. 0 . -) D( , * 6 . ( : ) 1 , 1 ,

- * 8 1 , / , . - ( 9 4 ;<=1 ( E=5 6 . ) ? @' , ) 1 1 . - 1 * D( : 1 1 2 - , * ) + , * -( 2 ) )- -0 1 + ) * ) 4 (H5( I (H J

H

H

H

H

U V . ( ! + / ? 1 + 0 0 ( ! 1 6 . ) ) - . ,

O

- * ) . 49 ;<=5(

(E

(E

(E

(E

"

"

"

"

+

+

+

+

! - - , . * + 1 . 1 1 - / . 4 Q<E5 A * . + / - . ( 4 . 5 -* . 4W Q;> + 5 - ) . 1 / + -/ 4# .K L ;< 5( ! 1 .

E

E

E

E

/ * ) - . ) 7 - 1 * . , ( ' 1 . / + 2 . - * . ( * ) 2 . B - 1 - ( . 0 - 1 * , 7 ) 1 3. 2 , * , * . ? 5 - T 5 - - + - T H5 + 4 + 5 1 1 E5 / - 4# .K L ;< 5(

(E(

(E(

(E(

(E(

I

I

I

I

"

"

"

" -

-

-

-X ,

O

0 - 0- - 1 . - - ( -. 1 + ( " 1 + - * . - 1 0 , ( # 1 1 & - + - , / - (

>

>

>

>

- / 4 '5(

(E(

(E(

(E(

(E(

&

&

&

&

:

:

:

:

-

-

-

-

#

#

#

#

+

+

+

+

"

"

"

" -

-

-

-1 1 , . + - - ( A -4 (E5( : ) 1 + / 4 1 . ) ) 51 + - 0- -, ) . . ) ( 9 4 ;<=1 ( <E5 ? @' + - . - * ( Y . * 1 * / D(

=

=

=

=

! 2 - - . A ( I (E J I - -

-(E(H

(E(H

(E(H

(E(H

"

"

"

"

+

+

+

+

! 3 + - 1 32 , + J -* / . ,

O

( ! + ) + . + - ( # .K L 4 ;< 1 ( Q5 ? A I - . # & - .

Q

Q

Q

Q

@' * . 2 + 0 . + ( ) B / ) . . 2 A . 1 -. 1 0 ) D( ! + , + + * ) - -- ( * 2 0- - ) + / - . * + + ( ! # . K L 4 ;< 1 ( 5? @ 7 . + 2 , * D( 1 + , - 1 1 * ) / / 2 A

O

- ( 9 4 # . K L 1 ;<=1 ( < 5?

<

<

<

<

@ ) J 1 1 A J + Z ( Y D( , 1 + + 1 , + ( ! ) 6 * ) + 2 * . * ) 6 * ) + / 2 4 (>5( ! . ) # .K L 4 ;< 1 ( 5? @! ) , 1 + 2 1 + / 1 + A ( ) + 1 + 1 ,1 1 1 . A 1 . 3 ( . + + 2 ( ! + D( ! 2 + 4 5 6 ?

;

;

;

;

I (> J " + = E 2 ( : ) 1 + ) 0 - 4 (=5( ! # .K L 4 ;< 1 ( 5? @ / . 1 1 * + ) . + * 8 + D( 6 . 6

HF

HF

HF

HF

! 2 ) + - ?

H

H

H

H

I (= J + - ( " + 8 + -" + I - . Área tipográfica

H

H

H

H

(E(E

(E(E

(E(E

(E(E

/

/

/

/

! 3 + * 0 - 1 32 , / * A - ( , - / ? 1 * 1 J . - - * - -( 4 ;<Q1 ( H;;5 ? @! A * ? 1 * 1 D( ! 1 , 2 * A - ) 3 / * ) . / 0 ) ( / / + / - ) 1 ) ( ! # . K L 4 ;< 1 ( ; 5? @ ) . + 1 + * + B A 1 - + * + -) )B.

HH

HH

HH

HH

1 / + 1 / D(

(>

(>

(>

(>

#

#

#

#

3 / - ( 0 - , 47 5( ! , * / A -1 0 1 , + 0 (

(=

(=

(=

(=

#

#

#

#

N

N

N

N

/

/

/

/

"

+

"

+

"

+

"

+

! (Q (< 2 2 . + ?

HE

HE

HE

HE

H>

H>

H>

H>

I (Q? . " + T . / T H. # T E. 3 4

H=

H=

H=

H=

2 1

HQ

HQ

HQ

HQ

I (<? . " + T . / T H. # T E. 9 0 ) 1 - )- 1 1 1 * 1 * / ), + 1 1 / -8 4# .K L ;< 5( / + . 4 3

H<

H<

H<

H<

4 5 / -- * )

.

O

1 3 -) ( 1 1 , , 1 ) -

O

1 0 Z 1 1 . 3 /

O

(

Diagramação de interfaces Web

$ *. ) /"& (" ) " *+ ! &) ",

(

0 " ) 0 " )! 1 ) "&$ &" 2 + (" " ! ) " *+ !

/%&)

(

0 3 0 $$$$ &&&&))) ", ) ", ", ",

(

(

(

(

4 $ ) !4 $ ) !4 $ ) !4 $ ) ! 5 ) " ! 65 ) " ! 600005 ) " ! 65 ) " ! 6 " ,& & ) & "/ & !

" ,& & ) & "/ & ! " ,& & ) & "/ & !

" ,& & ) & "/ & !

(

(

(

(

0 $0 $0 $0 $ % $% $% $% $ ) )7 $) )7 $) )7 $) )7 $ " "" "" "" " !!!! !&!&!&!& ----%" $

%" $ %" $

%" $ *+*+*+*+ !!!! /%&)/%&)/%&)/%&) &$ "&$ "&$ "&$ " 8

9:

9:

9:

9:

) " ! *+

) " ! *+

) " ! *+

) " ! *+

" ( "$ &) ", !

&

!

(

+ )! $ )

-! $ ) )7 $ " " ! !& %" $ *+ 0 , & " &' ! $ " ( 7

! 2 & ) ;$(& ! %" ! 2 & ! &) ", 7 $

$-$/2 &) ! ) " ! &<) & ) %& ! 9 " ( 7

! 2 & ) " &)# &% *+ ) " " !

=

! &)

"-, !

&

$ & #& & ! !

(

$ ) 2 + > " & ?0

&

&,& ! )

(

$ $ 2 % " $ ) !& )&(& &' )

7 $

%

& $ ! >( ? 5 " " ! " >( ! "? !

Diagramação de interfaces Web

@

@

@

@

) A! )

(

60

&)B

> & ) $ ) ? 5&) "*+ 6 " " "-& 0 "-&), "$ *. 0 ) " )&$ ) 0 9 $ " 0 *+ ! "-& , & " &' ! % )! "& 4"& 2 &) ",

(

! "-& " " $ ) & ! 0 ! # "& $ " &) ", $ $ & $

)-%"/,& 5> ! ?60 3 0

=

! &) ", "

$ ! ) &! ! ! &), "$ *+ ! $ )! 0 " ) 0 ! "% -)&' *+ 9 &) ", ! & !

&

5 ! 2 2 " " 6 " &

" $ &*+ ( $ > "" $ ! ? " $ )& "9 $ " #" 0 ( * ! /%&) 5&!4& &)& & 6 ! # " ( " ! % )! $ C-%& ! !& "&( &*+ " 2 &), "$ *+ 3 " (&! ) )!&!

/"& $ )& *+ ) * 9 ) "/"& 0 2 )! $ )-% $ ! /%&) 5 " ,&) 6 )+ ( ! ) )7 $ $ ! ! !& %" -$ *+ 0 &) ", ! ") - ), ! &D " " /%&)

" & $ ) , " ! ) ! /"& 9

$ )&# " ! " ! EF@

&

&,& ! $ " & 5 -2 & " &' ! " #4 ! ( ! " !&D6 , " $ & ) ! "

2 & ! " " !

=

! &) ", : @ " & ) & ) & # " . ) & ) & ! " & &) ") & ) & 5 <)!& :69 % &"0

-" ) $ $ ! "&*+ ! $ ! %& & &' ! " # "&,& *+ ! " " !

=

! &) ", !

&

& ) ! 9

Diagramação de interfaces Web

:

:

:

:

9999

G

G

G

G

!

!

!

!

%&

%&

%&

%&

$ ! %& & &' ! " " &' " 2 & ) " " !

=

, & ( ! $ ! H "&$ &" ) & & $ " %& " " ( ) ,& & " &$ % $ " ! !

=

! &) ", I % )! #& ) " &" $ %" 7 5$ 7 6 (" 1 &$ % $ ! &) ", " ! ("&" !& &*+ ! $ ) %"/,& ! = # "&,& "

" " ! " ! !& %" $ *+ 5 0 J 9K6 +

)-! ) &! " ! ) ) " *+ !

=

9

" ( "$ " %& " ! &$ % $ ! &) ", ! $ " , & & &-' ! $ & &# ! & >

"

)

# "

? 5

L=

" )

69 & &! ! ! , "" $ ) 4 " " " %& " " &$ % $ ! /" ! " ( 7 ! $ ! "$&) ! , M " 9 &$0 " ! " #& & ! 0 , & -" ! &$ % $ ! /" ! " ( 7 0 ) ) ) &! # " & $ 7 "&' ) 9 $ % &! 0 &$ % $ , & " ! ( ) ,& & ! 0 )

" ) & ! %" ,& $ ) 0 & , "" $ )

L=

" )

)+ !& . ! , )*+ ! 2 ! " ! "$&) " " *+ 0 , 0 ("& 7 0

)-" " , " ! "$&) ) " 2 &! ! ! &$ % $9 , )*+ ! " ) , "$ *+ ! ! >(" ? ! &$ % $ " ! !

&)-", " $ &$ % $ ( ) ,& & ! " " ) & ! , & " &' ! " $ & &# & &' ! $ " $ ) ! &$ % $ 5

7

7

69

Diagramação de interfaces Web

C " %& " ( ) ,& & $ ) ! &$ % $ ! " " !

=

! &) ", 0 % )! ! $4 ! ) & & $ ) " &" $ % 7 5$ 7 6 (" 1 &$ % $ ! &) ", " ! ("&" C%& ! "% )&' *+ ! &) ", # "&,& " " " ! " ! !& %" $ *+ + )! ) &! " ! ) ) " *+ !

=

!

&)-", 9 %" 7 , & ! )7 ! & &' )! $ & &# %"/,& 5

-"

6 ), "$ !& &*+ ! $ ) %"/,& ! &) ", ! " ) &! " ! 9 " !&$ ) ) "$& & #& &' " %"

$ ) ) C%& ! ) " *+ ! " " %"/,& !

=

2 ) " " ! !& %" $ *+ & &' ! 9

" #4 ! $4 ! , & # ( "( "( "( " C%& C%& C%& C%& !!!! ) " *+) " *+) " *+) " *+ !!!! !!!! !

! !

!

==

=

=

!!!! &) ", &) ", &) ", &) ", $(4$$(4$$(4$$(4$ " ( "" ( "" ( "" ( " " "" "" "" " !!!! !& %" $ ----!& %" $!& %" $!& %" $ *+ ! /%&) &$ "

*+ ! /%&) &$ " *+ ! /%&) &$ "

*+ ! /%&) &$ " , " $, " $, " $, " $ )+)+)+)+ & &' !& &' !& &' !& &' ! )))) """" """" !!!!

==

=

=

! &) ", ! " & &)#

! &) ", ! " & &)# ! &) ", ! " & &)#

! &) ", ! " & &)# &% !&% !&% !&% ! 9999

9999

D $

D $

D $

D $

% &"0 2N<) & ! D $ 5,&% " 9 9::6 ( &D " )-$ &) ", 2 , " $ ) & ! % )! " !&$ ) ! "&

&$ 9 +

=

! &) ", 2 , ' $ " ! $ " 2 &

Diagramação de interfaces Web :9

:9 :9

:9 D $D $D $D $ HHHH 7 HOO &2 9'& 9) 5!& )&(& &' &), "$ *. (" &-2 0 $ ! $ # "& ! ! ! "#&* 69

"-Diagramação de interfaces Web

E

E

E

E

&% " 9 P ) ", &,& ! $ ) # $4!& ! $ )& *+ #& 5 & H " &2 -69 Q" 7 ) " ! ), "$ !& &-*+ ! $ ) Q" 7 (" -) &) ",

Diagramação de interfaces Web

F

F

F

F

9999 D $D $D $D $ HHHH MMM9 " ) & ) 9 $9(" 5 , "

)- &)

$ # "& ! ! ! "#&* 0 $4" & ) & 6

Q" 7 ) " ! ), "$ !& &-*+ ! $ ) $ &*+ ! &) "-Q" 7 (" -) &) ",

Diagramação de interfaces Web

K

K

K

K

&% " 9:@ P ) ", &,& ! $ ) # ( &D ! !& %" $ *+ 5 & H " & ) ! 69

Grelha construída conforme a disposição dos elementos gráficos. Composição da interface

Grelha sobreposta na interface

Diagramação de interfaces Web

R

R

R

R

9999 D $D $D $D $ HHHH MMM9( "" ) &) 9 $9(" 5# )!

)- &)

! ! #& % ) 0 "& $ "#&* $ % " 69

$ &*+ ! &) ", -Q" 7 (" -) &) ", Q" 7 ) " ! ), "$ !& &-*+ ! $ )

Diagramação de interfaces Web

S

S

S

S

&% " 9:: P ) ", &,& ! $ ) # $ & ( &D ! $ )& *+ #& 5 & H " "" )- &) 69

9E

9E

9E

9E

"& 4"&

"& 4"&

"& 4"&

"& 4"&

!

!

!

!

&,& *+

&,& *+

&,& *+

&,& *+

!

!

!

!

) ",

) ",

) ",

) ",

C " %& " 0 ( ) ,& & $ ) ! &$ % $ ! &) ", ) "

-*+ ! $ 7 ! $ ) " )! !& &*+ ! $ ) %"/,& !

/%&) 0 &) ", , " $ &,& ! $ 0 $4!& 0 ( &D $ &-( &D ) # ! !& %" $ *+ 9 "& 4"& ! ! " ( "

&,& *+ , " $ $ ( ) & *+ ! " " ! !&

-%" $ *+ 5 0 J 9K60 2 ) & ) & &' *+ ! $ & $

! %" 7 ! 2 ! )&, "$ " ! " ( 7 %"/,& 0 "$& &)!

2 = " ) (&! 0 "% )&' ! $ ) ! " #4 !

"&) & ! %&) *+ " & 5 ) " 0 2 & ("& 0 )&! ! " "-*+ 6 " " (/ & %"/,& 2 & ! "" $ ) ) !& "&( -&*+ ! $ ) %"/,& ) /%&) ! $ , " " ) &! !

& " ) )!&$ ) ! $ ) % $ 5 0 J 9E9E69

" &,& " = ! &) ", , " $ "& ! 2 " "& 4"& H 5&6 >&) ",

>&) ", >&) ",

>&) ", !!!! )# #&!)# #&!)# #&!)# #&! $ $ $ $ " "" "" "" " !!!! " " " " !!!! !& %" $ *+ ?!& %" $ *+ ?0!& %" $ *+ ?!& %" $ *+ ? , " $ &,& ! $ &) ", ! ) #) #) #) # ! !& %" $ *+ I 5&&6

Grelha sobreposta na interface

Figura 5

Diagramação de interfaces Web

>>>>&) ", &) ", &) ", &) ", !!!! ))# #&!))# #&!# #&!# #&! $ $ $ $ % )% )% )% ) " "" "" "" " !!!! !& %" $ *+!& %" $ *+!& %" $ *+!& %" $ *+ """" ----)

))

) % $% $% $% $ C%& C%& C%& C%& !!!! "% )&' *+ ????0 , " $ "% )&' *+"% )&' *+"% )&' *+ &,& ! $ &) ", -! ) #) #) #) # $4!&$4!&$4!&$4!& ! !& %" $ *+ I 5&&&6 >&) ",>&) ", >&) ",>&) ", !!!! )# #&!)# #&!)# #&!)# #&! $ $ $ $ % )

% )% )

% ) " "" "" "" " !!!! !&!&!&!& %" $ *+%" $ *+%" $ *+%" $ *+ )+)+)+)+ """" )))) C%& C%& C%& C%& !!!! "% )&'"% )&'"% )&'"% )&' ----*+ ?

*+ ? *+ ?

*+ ?0 , " $ &,& ! $ &) ", ! ) #) #) #) # ( &D( &D( &D( &D ! !& %" $ -*+ I 5&#6 >&) ", >&) ", >&) ", >&) ", !!!! )# #&!)# #&!)# #&!)# #&! $ " "$ " "$ " "$ " " !!!! !& %" $ *+!& %" $ *+!& %" $ *+!& %" $ *+ )+)+)+)+

" ) C%& ! "% )&' *+ "" )) C%& C%& !! "% )&' *+"% )&' *+

" ) C%& ! "% )&' *+ ???? , " $ &,& ! $ &) ", ! ) # $ & ( &D

) # $ & ( &D ) # $ & ( &D

) # $ & ( &D ! !& %" $ *+ 9

9F

9F

9F

9F

!

!

!

!

% &"0 " ) $ " #4 ! $ ( " ! ! 2

Diagramação de interfaces Web

E@

E@

E@

E@

( 9: P "& 4"& ! &,& *+ ! &) ", 9

" ! 0 $ ! $ # "0 &)!& $ , " $ ) 2 " " ! " ! !& %" $ *+ )+ + & &' ! ) ) " *+ ! &)

"-, ) $ & "& ! " & 2 & ! 9 ) 0 T " ) $

$ " " %"/,& ! &) ", $ ) ! $ % $ C%& ! "% -)&' *+ $ 7 ) 2 7 & &' *+ ! " " ! !& %" $

-*+ 9 $ $ ( 0 ER0FT " ) $ &) ", $ & &' *+ !

% ) " " ! !& %" $ *+ $ C%& ! "% )&' *+ 0:K "& 4"& ! &,& *+

"& 4"& ! &,& *+ "& 4"& ! &,& *+

"& 4"& ! &,& *+ TTTT # &# &# &# & !!!! !& %" $ *+ !& %" $ *+ !& %" $ *+ !& %" $ *+ ) ) )

) ", ", ", ", !!!! )# #&!)# #&!)# #&!)# #&! $ $ $ $ " " " " "-"-"- "-! " ! !& %" $ *+ ! " ! !& %" $ *+ ! " ! !& %" $ *+ ! " ! !& %" $ *+ @ T @ T @ T @ T ) ", ! )# # ) ", ! )# # ) ", ! )# # ) ", ! )# #&&&&!!!! $ $ $ $ % )% )% )% ) " " " " " "

" " !!!! !& %" $ *+!& %" $ *+!& %" $ *+!& %" $ *+ """" )))) % $ C%& ! "% )&' % $ C%& ! "% )&' % $ C%& ! "% )&' % $ C%& ! "% )&' *+*+*+*+ 0000 TTTT GU ) ", ! )# #&! $ % ) ) ", ! )# #&! $ % ) ) ", ! )# #&! $ % ) ) ", ! )# #&! $ % ) " " ! !& %" $ *+ )+ " " " ! !& %" $ *+ )+ " " " ! !& %" $ *+ )+ " " " ! !& %" $ *+ )+ " ----) C%& ! "% )&' *+ ) C%& ! "% )&' *+ ) C%& ! "% )&' *+ ) C%& ! "% )&' *+ ER0F ER0F ER0F ER0F TTTT V ) ", ! )# #&! $ " " ) ", ! )# #&! $ " " ) ", ! )# #&! $ " " ) ", ! )# #&! $ " " ! !& %" $ *+ )+ " ) C% ! !& %" $ *+ )+ " ) C% ! !& %" $ *+ )+ " ) C%

! !& %" $ *+ )+ " ) C%& & & & ! ! ! ! """"% )% )% )&&&&' *+% )' *+' *+' *+ 0:K 0:K 0:K 0:KTTTT G V

Diagramação de interfaces Web

E:

E:

E:

E:

T " ) $ &) ", ( " ! $ C%& ! "% )&' *+ $

& *+ ! " " ! !& %" $ *+ 9

% &"0 "/ $ " ! " *+ ! " & 2 & ! $ ! ) # ! !& %" $ *+ H

" & ! ) # ! !& %" $ *+ GUGUGUGU HHHH :9 7 HOO("9= 7 9 $O

9 7 HOO ( %&9% ( 9 $ 9 7 HOO &2 9'& 9) O

E9 7 HOO " ) ) 9'& 9) O ) 9 ,$ F9 7 HOOMMM9 7 &9 $9("

K9 7 HOOMMM9 7 "M (9 $O R9 7 HOOMMM9 $ "& ) &) 9 $9(" S9 7 HOOMMM9 #& % $9 $9("O

9 7 HOOMMM9( ) :9) O

:@9 7 HOOMMM9( 9) O

::9 7 HOOMMM9 )% 9 $9("

: 9 7 HOOMMM9 "& &( 3 9 $9("O&)! D9 7

: 9 7 HOOMMM9 ) 9 $9("O ) W3 # $O ( " " O&)! D9

:E9 7 HOOMMM9% ( 9 $O

:F9 7 HOOMMM9% 9 $O

:K9 7 HOOMMM9% % 9 $O

:R9 7 HOOMMM97 ( 9 = 9 $O

:S9 7 HOOMMM9&%9 $9("O("O

: 9 7 HOOMMM9 $& " 9 $O & ! (" & O) ( O @9 7 HOOMMM9 )! 9 $9("O&)! DW) # 9 7 $

Diagramação de interfaces Web

E

E

E

E

:9 7 HOOMMM9 & 9 $9("O "& O & & O(" & O &! ! O $ 9 X

9 7 HOOMMM9 " ! & 7 9 $9("O

9 7 HOOMMM9 " ! " ) " 9 $9("O E9 7 HOOMMM9 " B " 9 $9("O

F9 7 HOOMMM9" !&D9 $9("O K9 7 HOOMMM9 "" 9 $9(" R9 7 HOOMMM9 &9 $9(" S9 7 HOOMMM9 9 $9(" " & ! ) # ! !& %" $ *+ V HV HV HV H :9 7 HOO!&# " "& 7 )9 3(9) O 9 7 HOO) # 9 $9(" 9 7 HOO 9'& 9) O E9 7 HOO " D9% ( 9 $O F9 7 HOO" 9&,D(" & 9 $9("O K9 7 HOOMMM9 "! 9 $9("O

R9 7 HOOMMM9 "% $ ) $9 $9("O S9 7 HOOMMM9 7 & &," 9 $9("O

9 7 HOOMMM9( & 9 $O

:@9 7 HOOMMM9( ("9 $O ::9 7 HOOMMM9("," 9 $9("O : 9 7 HOOMMM9("9 "$ !& 9 $O : 9 7 HOOMMM9( 9 $9("O7 $ :93

:E9 7 HOOMMM9 &! ! &) ") 9 $9("O("O " O &! ! O " ! O :F9 7 HOOMMM9 $ )&! ! 9) O

:K9 7 HOOMMM9 )# =9 $9("O&)! D9 7 $ :R9 7 HOOMMM9 "" & ! ( 7& 9 $9(" :S9 7 HOOMMM9 9 $9("O

: 9 7 HOOMMM9 ) 9 $9("O ) W$ 7 "O ( " " O&)! DW$ 7 "9 @9 7 HOOMMM9 " & 9 $O

Diagramação de interfaces Web

E

E

E

E

9 7 HOOMMM9% & $ 9 $9("O 9 7 HOOMMM9&( 7& 9 $O E9 7 HOOMMM9& # 9 $9("O

F9 7 HOOMMM9&), &)B9 $9("O&%" 3 O K9 7 HOOMMM9&M )9 $O

R9 7 HOOMMM93 % &"& 9 $9("O S9 7 HOOMMM9 B $ " 9 $O

9 7 HOOMMM9 = 9 $O

@9 7 HOOMMM9$ "&D9 $9("O :9 7 HOOMMM9$ !& 9 $9("O

9 7 HOOMMM9$ " " 79("! $&)& 9 $9("O %&-(&)O&)! D9 9 7 HOOMMM9$ " M "9 $O&)! D97 $

E9 7 HOOMMM9$&!& % 9 $9("O

F9 7 HOOMMM9$ )9 $9("O , 9 8Y Z " K9 7 HOOMMM9) #9 $9("O% #$ &"& " O R9 7 HOOMMM9) "9 $9("O) "O$ ) 9

S9 7 HOOMMM9) 9 $9("O

9 7 HOOMMM9 )! &"9 $9("O

E@9 7 HOOMMM9 & 9 $9("O E:9 7 HOOMMM9 " ( )& 9 $9("O

E 9 7 HOOMMM9 " ! ! 9 $9("O " O E 9 7 HOOMMM9 " ! "#& 9 $9("O

EE9 7 HOOMMM9 " ! "#&! "9( 9% #9("O EF9 7 HOOMMM9 " ! # ) "& 9 "%9("O EK9 7 HOOMMM9 " -&) ") 9 $9("O ER9 7 HOOMMM9 " & & 9 $9("O ES9 7 HOOMMM9 " &)B9 $9("O E 9 7 HOOMMM9" ! " 9 $9(" F@9 7 HOOMMM9" ! ! 9 $9("O

F:9 7 HOOMMM9 , 9 $9("O "&) & 97 $ F 9 7 HOOMMM9 "$ !& 9 $9("

F 9 7 HOOMMM9 ",9 $9("

Diagramação de interfaces Web

EE

EE

EE

EE

FF9 7 HOOMMM9 & 9 $9(" FK9 7 HOOMMM9 9 $9("O " ! $ O FR9 7 HOOMMM9' 9 $("O!&# " O&)! D9 7

" & ! ) # ! !& %" $ *+ GGGG V HV HV HV H :9 7 HOO ( 9 $9("O

9 7 HOOMMM9 "% 9 $9(" 9 7 HOO & B3 ( 9'& 9) O&)! D9 E9 7 HOO " ! 9 3(9) O F9 7 HOOMMM9 ! )! 9 $9("

K9 7 HOOMMMS9 %" (" & 9 $9("O %" " &% R9 7 HOOMMM9 D& 9 $9("O

S9 7 HOOMMM9( "" ) &) 9 $9("O 9 7 HOOMMM9("9 #& 9 $O :@9 7 HOOMMM9 ) 9 $9("O

::9 7 HOOMMM9 ! 2 &" 9 $O " )* & : 9 7 HOOMMM9 D & 9 $O

: 9 7 HOOMMM9, %" , "9 $9("O 14. 7 HOOMMM9%" & )9 $9("O :F9 7 HOOMMM97 %9 $9("O :K9 7 HOOMMM9&$ & 9 $9(" :R9 7 HOOMMM9$ 9 $9("O :S9 7 HOOMMM9) ( )B9 $9("O : 9 7 HOOMMM9 & 9 $9("O

@9 7 HOOMMM9 " "9 $9("O :9 7 HOOMMM9 " ! $ ! 9 $9("O

9 7 HOOMMM9 " ! $ ! 9 $9("O" #& O7& 97 $ 9 7 HOOMMM9 " ! $ 9 $9("O7 $ 93

E9 7 HOOMMM9 " ! # 97 %9 $9("O," $ 97 $ F9 7 HOOMMM9 " ! " B9 $9("O

Diagramação de interfaces Web

EF

EF

EF

EF

K9 7 HOOMMM9 " , $&)&) 9 $9("O

R9 7 HOOMMM9 " ) & ) 9 $9("O )O&)! D:97 $ S9 7 HOOMMM9 " %" ) 9 $9("

9 7 HOOMMM9 " &% 9("O " &% (" & O " ,( O @9 7 HOOMMM9"& "" 9 $O7 $ "O

:9 7 HOOMMM9 " 79 $

9 7 HOOMMM9# 9 $9("O&)! D:97 $

9 7 HOOMMM9# ) 9 $9("O7 $ O "&) 9 7 E9 7 HOOMMM9' B9 $9("

F9 7 HOOMMM9' ) $ & 9 $9("

" ) 0 " ! " )! $ ) % &# $ ) ) "&$ &" 2 & ) $ ) (" & &' *+ ! " " ! !& %" $ *+ ! /-%&) &$ " ) ) " *+ ! &) ",

(

9

Diagramação de interfaces Web

' %+&"

,

- ,' &+" (

. ( /& & " & "* . $ &"0 1 &+ )* ' / ")2 3& " " / (( $ " ' ( ' )* ' %+&"

! $ ,4 &0 ' ( "' ( 5 " + "' 6 * ,( ( ! 1

' ! " ( )* ' %+&"

,

. 4 . / (( $ "/ (( $ "/ (( $ "/ (( $ " ' ' ' ' ( '( '( '( ' 1111 )*

)* )*

)* ' ' ' ' %+&"%+&"%+&"%+&"

,

,

,

,

/ ( ! $ / ")2 / ( ! $ / ")2 / ( ! $ / ")2 / ( ! $ / ")2 !&/ !&/ !&/ !&/&&&&!!!! &! )*&! )*&! )*&! )* '''' (((( 1 1 1 1 ! (

! ( ! (

! ( ' ' ' ' '& +( $ )*'& +( $ )*'& +( $ )*'& +( $ )* '''' %+&"%+&"%+&"%+&" &$ ( &$ ( &$ ( &$ ( 7

89

89

89

89

" ( '

" ( '

" ( '

" ( ' )*

)*

)*

)*

: (&/&! ' / ' & &; )* ' ( ! ( ' '& +( $ )* ' %+&" &$ ( "

<

' &" (/ ! ' +( "' $ & (& ' ( & 1 6 & ' . $ " * &"0 &+ ( (&+ " ' ! " " ( 1 ! ' ' "0 0&$ " ' &" (/ !

,

8

$ " . ( ' ' &"/ ($% &! =$ ,4 &0 ' ( $ + "#(&1

Diagramação de interfaces Web

9

9

9

9

%(& $ '& !(&$&" ( / ($ )* 8 ! ( ! ( &! , " /&!& ! $#(!& ' ( ' ' &"/ ($% &! 8 $ ( )* 5 / (( $ " '

( ' )* ' &" (/ ! . &! "* # '&/ ( " 8 *

/ - (

/%1 ! & ' ( $ & &; ' ($& $ 6 . #$ '

' &+" (

.

"* !& &; ' $ " $ &" (/ ! 8 " " . ! ( ! ( &!

' / (( $ " ' ! (( ( #(& ( , $ 5 (! )* 5 ( 1

5 &"/ ($ )2 . & "* # " / !& & "' & &; )* ' / "1

)2 6 / (( $ " 0* &,& & ( %(& ?

- ,' 1

&+" (

@ ! " ( ( $ &" (/ ! ! $

' &+"

/ "!& " & 8 / !& &' ' '

' $ $ ! $ ( $ ( ( ' )* . ($& &"' 6 $ & %1

(& $ 3 (&="!& $ / ($ )* & &; $1" ( ' ; $ &" (/ 1

! ! $ ( ( +(%/&! ! "/ ' (& " ' ( & ( 8

( , $ # "% + "! " ( ' " ( ! ' ! "! )* ' "0 0&$ " ' &" (/ ! A $ $1! $ ' ( ( & $ ! $ 1

!& " & $ + ( . "' $ '& " 0 !A $ ' B ( & ' 1

( C 6 ($& $ 6 6 ( . ( /& & " "* . , ( )*

/%!& ' $

<

' &" (/ ! + ( )* $% &! ' !D'&+ 8 ( & ' ( "* &"! ( ( $ " "A $ ! "! & ' ( / " $

' ( ! ' ! $ &)* ' %+&" ($& $ + ( )* ' 0 (' 1

' &( , (( )2 ' " ' 0& ' ,& &' ' E ' & $ ! " ( 1

' ? ; 9FF .9FF9@ ?G " E @8

2

Diagramação de interfaces Web

E

E

E

E

' 0& . / !& &' ' ' ' ( $ / ( ( "' ( " 6 "' $ / (( $ " $ $ 6 '( ' / ")2 ! /&! . (#$ ,( "+ "1 . 6 ! " $ "&0 ( ! "! & ' %(& ' ( / 8 .

" %(& 6 " ( ' )* * / 0 ( !&' 8

&$. ( , ($ 3& $ / ")2 ! /&! " / (( $ " ' ( ' )* ' %+&"

,

6 ($& $ ! " ( )* ' &" (/ !

,

+ "' ( ! ( ' '& +( $ )* . &"0 &+ $ $ " &( ! $ -

,' &+" (

( ! ' $ 5 ! " ( )* ' &" (/ !

,

6 & / ")2 '& "&,& &; ' " / (( $ " ( ( &; ( ( 1 ! '&$ " 8

8E

8E

8E

8E

$

$

$

$

&)*

&)*

&)*

&)*

'

'

'

'

%+&"

%+&"

%+&"

%+&"

$ (

$ (

$ (

$ (

$

$

$

$

&)*

&)*

&)*

&)*

'

'

'

'

%+&"

%+&"

%+&"

%+&"

,

,

,

,

$,( "' &"/ ($ )2 ! " &' " ! E. ( ! '

! $ &)* ' %+&" &$ ( # $ ' 6 / ; ( '

' "0 0&$ " ' $ ( 4 +(%/&! 8 $ '& &$ ( . # ( !&

6

' &+" (

&+ ' ' ( ! +(%/&! ( ( ' ;&(

$ ( 4 +(%/&! 8 ( ! $ ' / # ( ! '

! $ &)* 6 '&0&' $ H I ?&@ ' ($&" ( '&$ " 2 ?&$ 1 + " . +(%/&! 3 @J ?&&@ ' ($&" ( ! ( & +& J ?&&&@ '& ( 31

Diagramação de interfaces Web

K

K

K

K

J ?&0@ , ( ( ' /&"&( $

<

J ?0@ '& +( $ ( ( /&$. ?0&@ $ " (8 * ,% &! ' ($&" " ( !(& )* . ' "0 1 0&$ " ( /&" ' $ ( 4 +(%/&! 8

$ ' 6 . ( ! $ ) ( ( ! ' ! $ &)* ' $ ( 4

+(%/&! # ( !& 6 ' &"/ ($ )2 4 $ ' /&"&' $ 1

' ( '

' &+" (

8 ( ! ' ! $ &)* ( ' ! / ($

' $ " +(%/&! . ' ! &; )* ' D+&! ? (+ "&; )* @ ( 0#

' '& +( $ )* 8 ( ! ($&" ! $ $ " + $. 6 # ( " 1

/ ($ )* '

<

?&'#& &"&!& @ '& +( $ ' $ ( /&" 8 " * . ! "1 / ($ ( ! ' ! $ &)* . &"/ ($ )2 ( !& $ ( (&$ &1 ( $ " '& ' ? ?&@. ?&&@ ?&&&@ !&$ @ $ + &' ( !& (

, ( ' ' /&"&' $

<

? &0@8 ?0@ ' ( ! '

! $ &)* # '& +( $ )* 6 '&0&' $ I 9@ ' /&"&)* ' $ / ($ +(%/&! J E@ ' /&"&)* ' $ %( & +(%/&! $ "!A +(%/&! J K@ ! " ( )* ' $ +( A ?$ A @ . ( /&$. @ (+ "&; )* ' $ " +(%/&! 8

3 ! )* ' ( ! ( ?! E. L E8 89 E8 8 @ ( $ 0 $

/ !& & $ ! "! )* '& (&, &)* ' $ " +(%/&! . D+&! ' " "'&$ " ( 5 &"/ ($ )2 " %+&" 8 ( /&$.

?0&@ ' ( ! ' ! $ &)* # $ " + $. ! " ( )* ' ( /&1 " 8

Diagramação de interfaces Web

( " . " "' $ 6 " ( ! ' ! $ &)* . '& +( $ )* # $ 6 (0 ' M " N " ( &'#& '

<

?( ! "A , ) @ $ " + $ ( "' " ( /&" 8 $ '& &$ ( . 1

# M! $&"A N 6 ' 0 ( (& A ' ( $

' &+" (

" ' "0 0&1 $ " ' $ ( 4 +(%/&! 8

$ $ / ($ . ( 4 ' $ &" (/ !

,

$,#$ $ $ &

( ' "0 0&$ " $ ' # ( ! ' '& 1

+( $ )* 8 ( /&! $ " . ( ! ' '& +( $ )* ' $ %+&"

,

' 0 + &( $ $ ' ( ! ' '& +( $ )* '

%+&" &$ ( . & $ %+&"

,

. &"' "' " ' A& ( 3 .

( !& $,#$ ' $ $ D+&! ' (+ "&; )* ( ( $ 0 ( "1

"'&$ " ' &"/ ($ )2 ? !O 9FFP@ ? & + 9FFQ@8 &$. '& 1

+( $ )* # $ ' ( ! ' ! $ &)* 6 # " ! %(&

" ( ! " ( )* ' %+&" &$ ( 6 " ( ! " ( )* ' &" (/ !

,

8

" * . 6 ! (( " ( ! ' ! $ &)* ' $ ( 4 +(%/&!

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

' $ ( 4 +(%/&! ' $ &" (/ !

,

8 6R="!& ' ( !

Diagramação de interfaces Web

S

S

S

S

( 4 +(%/&! . ( ! " + &" . ! $&"A (& A ' ( $

- ,' 1

&+" (

( $

' &+" (

+(%/&! # $ $ 8

" " . / (( $ " & &; ' ( ( &; ( ( ! ' '& +( $ )* ' %+&" &$ ( . =$ / ")2 '&/ ( " ' / ")2 ' / (( $ " & &; ' ( ! " ( )* ' %+&"

,

8 & &; (

! +(%/&! ! $

(

.

( ! (.

A

A

.

&" (

(

/ - (

' $ $ &"A . # $ / ($ ' M "' ( $ & (% &' N

( ( &; ( ( ! ' '& +( $ )* ' %+&" &$ ( 8 1

/ - (

* &! &0 6 =$ / ")2 6 ,( "+ $ $ &

, $ ( , A ' $

' &+" (

+(%/&! 8 ( 3 $ . ' / (1

( $ " ($& $ M$ "& )* '&( N ' ,4 " %( ' ( , 1 A 8 T 6 ( $ " +(%/&! ! " ( ' ' ( &!& " ' $ 6 6 ( + ( ' (/ !& ' %+&" " * $ '&/&! ' . $ 0 "!

! $ + $ &"+ + $ 3 ' &" 3 , ( ' 8 ( ( , A '

$

' &+" (

& # M/ " % &! NJ " ' &$ ' !(& )* & . ! " (%(& . &,& &' ' &$ !(& &0&' ' . !(& "' '&0 ( M! $&"A N ( ' "0 0&$ " 6 &' ' '

' &+"

+(%/&! 8

$ ! " ( . / (( $ " ' ( ' )* ' %+&"

,

* '&/ ( "1 =$ / ")2 &+ ' 5 &"+ + $ G . &"+ + $ 3

!(& ' ( ! " ( )* ' +&"

,

8 4 $ / (( $ " '

Diagramação de interfaces Web

H

H

H

H

( &! &0 ' ( ' )* ' %+&"

,

. / ")2 $ ( 1

* &+ ' 5 G ' ! " &' ( $ 6 2 ( / ( "

<

? ( /&" @ ' %+&" 6 0& " "'&$ " ( 5 $ " 1 + $8

8K

8K

8K

8K

")2

")2

")2

")2

&

&

&

&

" 0 &

" 0 &

" 0 &

" 0 &

"

"

"

"

((((( $ "

( $ "

( $ "

( $ "

'

'

'

'

( ' )*

( ' )*

( ' )*

( ' )*

1111

((((

" ( )*

" ( )*

" ( )*

" ( )*

'

'

'

'

%+&"

%+&"

%+&"

%+&"

,

,

,

,

'& " '&/ ( ") " ( / (( $ " ' ( ' )* ' %+&1

" &$ ( / (( $ " ' ( ' )* ' %+&"

,

. (D3&1

$ ' " ( , A / & &"0 &+ ( 6 & / ")2 ' / (( $ "1 ' ( ' )* ' %+&"

,

* '& "&,& &; ' ( ( &; ( ( ! ' ! " ( )* ' &" (/ !

,

8 $ 4% '& . (

"% & !& " $ ' ' / (( $ " ' ( ' )* $ & & &; '

" $ $ " .

( "

+

( $- 0 (8

(&$ &( / (( $ " " & ' / &

( "

+

8 &! &0 / ( !

' )2 ( ( &; ( ( ! ' ! " ( )* ' $ &" (/ 1

!

,

? %+&" (&"!& @I / ")2 %%%%+&"+&"+&"+&" ' 6' 6' 6' 6 '('('('( , , , , 8

/ ")* %+&"%+&"%+&"%+&" ' 6' 6' 6' 6 '('('('( ($& -

,' &+" (

!(& )* ' $ & !& ' %+&" G 6 '&0&' 4 " ' " 0 + ' ( $ '&/ ( " %( ' " $&" ' M6 '( N. ! ' 6 ' "' 3&,&( $

Diagramação de interfaces Web

P

P

P

P

%+&" '&/ ( " 8 ( 3 $ . $ %+&" ' & M &3 N M " >' N ! " =$ (= 6 '( I M &3 N. M " >' N M (&"!& N ?/&+ ( 89E@8

&+ ( 89E U %+&" !(& ' / ")* %+&"%+&"%+&"%+&" ' 6' 6' 6' 6 '('('('( 8

/ ")* , , , , / ( !&' ( / (( $ " ( (+ "&; )* '

<

' %+&"

,

($& '&0&'&( %+&" $ ( V"+ !A $ 1 ' M , N8 $ M , N # ! " & ' ' &"A ! " / ($ "'

) !# " 6 & # 0 &" (&( 3 +(%/&! 8 M 1

, N ' $ ( & &; ' ( ( " ( &"/ ($ )2 $ / ($ , ( ( ! " ( &( $ ( ! "A $ " ( $ %+&" / ($ '

' 3 +(%/&! 8 / ")* $ &' $ & & &; '

- ,' 1

&+" (

' 6 / ")* %+&"%+&"%+&"%+&" ' 6' 6' 6' 6 '('('('( ( M'& +( $ )* ' %+&" N

,

8 /&+ ( 89K. , &3 . & ( & &; )* ' / ")* I

Diagramação de interfaces Web

Q

Q

Q

Q

&+ ( 89K U %+&" !(& ' / ")* , , 8, ,

+ "' / (( $ " " & ' / &

( $- 0 (8

&! &0

/ ( ! (= / ")2 ( ( &; ( ( ! ' ! " ( )* ' $ &" (/ !

,

I , , . ! $ ', , ! $ '! $ '! $ ' $ ' ($ ' ($ ' ($ ' ( 8 '&/ ( ") ' +( ' / ")2 $ ( )* 5 )2 / ( !&' " / (( $ " " (& ( # / ")* !!!! $ '$ '$ '$ ' 8 T " 5 ( / ")2 , , , , $ ' ($ ' ($ ' ($ ' ( '

( 1

$- 0 (

( ( " $ ( ! &0 $ " $ $ / ")2 , , , , %+&" %+&"%+&" %+&" ' 6' 6' 6' 6 '('('('( '

( "

+ 8

/ ")* ! $ '! $ '! $ '! $ ' '

( $- 0 (

# $ ( ! ( +(%/&! '&/ ( "!& '

6 "' ( ' G (+ "&; )* '

<

' %+&" 8

/ ")* ! $! $! $! $ ''' .... 6' "' & &; ' "* ( ' ; " ' '&/ ( " ' $ M , N. 4 . / ")* ! $ '! $ '! $ '! $ ' # $ / ")* , , , , M'& / () ' N

! $ + " ( ! ( $ & 8 &$. M6 '( N ?

/( $

@ ( ' ;&'

Diagramação de interfaces Web

F

F

F

F

/ ")* ! $ '! $ '! $ '! $ ' * 4 " ' %+&" 6 ($& $ +( $ "1 ( " / ($ )* $ M , N8 ( ( ' . $ M! $ ' N "*

' ( &" (&' $ ( ( ' /&"&( $ %( & +(%/&! ! " ( 1

&( $ +( A ( ( &; ( M ( ! ' '& +( $ )* N8 #$ '& .

$ M! $ ' N ' ( $ '&/&! ' 6 "' 4 " ' " 0 + ' (

1

!

$ "&!

(

/ ( ( '&$ " & " ' 8 ( , $ ' ( 0& '

( %+&" 6 ! " =$ M! $ ' N ! "/&+ ( )* ? '&!& " ( 1 4 ' ( '&$ " & " $ " &" (&( M! $ ' N@ ' / (( $ "

( 1

$- 0 (

/ ( &0 ' 8 4 ! ((&+

, +

3& " " " 0 + ' (

!

( %+&" 6 $

<

? ( /&" @ ! " ( ' ( M! 1

$ ' N

8

8888

( !

( !

( !

( !

'

'

'

'

" ( )*

" ( )*

" ( )*

" ( )*

'

'

'

'

%+&"

%+&"

%+&"

%+&"

,

,

,

,

( ! ' ! " ( )* ' %+&"

,

0 ' / & $ "

- ,' &+" (

& &; "' / (( $ " ' ( ' )* ' %+&"

,

"0 0 (= I ?&@ ' /&"&( $ / ($ ' $ %+&" ?( 1 )* @J ?&&@ '&0&'&( %+&" $ !# 6 '( ( '& (&, &( 1 $ " +(%/&! J ?&&&@ $ " ( $ " +(%/&! " !#

6 '( , &' " " (& (8

&$. ( ! ' ! " ( )* . ! $ ) ' /&"&)* ' $

Diagramação de interfaces Web

S

S

S

S

/ ($ ' ( ' /&"&' ' 0%(& / ($ I ?9@ & &; "' 1 / ")* ,

, ,

, ( 0# ' !(& )* ' $ M , N ! $ $ >"&! !# J ?E@

& &; "' 1 / ")* %+&"%+&"%+&"%+&" ' 6' 6' 6' 6 '('('('( ( 0# ' )* ' / ($ 1 (#1' /&"&' J ?K@ & &; "' 1 / ")* ! $! $ '! $! $ ''' ( 0# ' !(& 1

)* ' $ M! $ ' N8

+ "' ' ( ! ! " & $ '&0&'&( / ($ 0& "' '& (&, &)* ' $ " +(%/&! ( ! " ( &( ( /&" 8 # ( &; ' ' 0%(& $ " &( '& &" . ' "' "' ' ! A '

/ ")* " (&$ &( I ?9@ / ($ # $ M , N. A% ' $ 1

" &( ' ( ! ' (I M , N 6 ' ($&" / ($ +(%/&! # '&1 0&'&' $ &"A ! " ! "/ ($ / ( $ " ! &' ' ' '&0& *

M , N # M'&0&'&' N ,( "' 1 A ( M , N " '&$ " 2 ' $ " ( $ &" (&' ! "/ ($ &'#& '

<

?( ! "A

, ) @J ?E@ / ($ # $ M %+&" ' 6 '( N. 1 / "1

)* '&0&'&('&0&'&('&0&'&('&0&'&( 6666 '('('('( ( ,1'&0&'&( ! ' 6 '( !(& ' " 9J

?K@ / ($ # $ M! $ ' N. !(& 1 ( M! $ ' N ,( 1

/ ($ 0& "' &" (&( $ " +(%/&! 8

(! &( ' ! " ( )* # $ " + $ ? '&)* ! $ &)* @

6 ! " & $ &" (&( $ " +(%/&! " ) '&0&'&' ! "/ ($ / ")* ! A&' ' ! (' ! $

<

?( ! "A

Diagramação de interfaces Web

S9

S9

S9

S9

I $ " +(%/&! / ( $ 3 . & ' ( / & '&( $ "

" !# 6 ! (( "' ! ' 3 J / ( $ /&+ ( . 1

' ( &$ ( ' ( ) ( (0 ' ?!# @ ( & ( )* 8

W ' / ($ 6 %+&"

,

* ! " ( ' $ " 8

, , &3 ( " $ ! $ ( )* " ( ( &; '

" '& +( $ )* ' %+&" &$ ( %+&"

,

8

& +( $ )* & +( $ )* & +( $ )*

& +( $ )* _{9X9X9X9X EXEXEXEX KXKXKXKX XXXX}

%+&" & %+&"%+&" &&

%+&" &$$$ ( $ ( ( ( 1111 /&"&( $

/ ($ 6 4 ( 1 !& " ' ! $ / ($ '(2 ' &$ ( * ? @8 /&"&( $ %( & +(%/&! . ) $ ( )* ! $ $ (1 + " ' / ($ 1 ! " >1 ' ' $ " 1 + $8 " ( &( $ ( A + "1 ' %( & 1 +(%/&! $ " +(%1 /&! 6 ! $1 2 $ " 1 + $8 (+ "&; ( $ " +(%/&! 1 + &"' (&1 " )* ' &'#& &"&!& ?( ! "A @ (&"! & ' +&" )*

( & & &! 8

%+&" %+&"%+&" %+&" , , , , /&"&( / ($ ' %+&" ( 1 0# ' "&1 ' ' &3 &0&'&( %+&1 " $ !# 6 '( ! "/ ($ / ( ( ! "A ' " ( &" (1 / !

Diagramação de interfaces Web

SE

SE

SE

SE

&'#& ' &" (1 / ! 8

, 8 89 U $ ( )* " ( '& +( $ )* ' %+&" &$ ( '& +( $ )* ' %+&" ,8

"/ ($ , (0 $ . ( ! ' ! " ( )* ' %+&"

,

"0 0 $

( !

' '& +( $ )*

' /&"&' ?&@ ?&&@

!&$ !& ' 8 (#$. )2 ( &; ' " ( ! "* ! (( 1

"' $ 5 )2 ' /&"&' " ( ! ' '& +( $ )* ' %+&" &$1 ( 8 . / ( ' /&"&)* ' / ($ +(%/&! . 6 ! "! (' ! $

(&$ &( ' ( ! . )2 ( $ $ ( "'&'

* I !(& )* ' $ %( & +(%/&! !(& )* ' $ +( A 8 M ( 1

! ' '& +( $ )* N ' ( ! ' ! " ( )* )2

"* * 3 !& 8 %( & +(%/&! # ' /&"&' $ &! $ " " '&0& * ' / ($ . ! $ '&/ !& ! " ( ( ( '

- ,' &+" (

(

4 ( $ (+ " " ( !# . $ M (( $ ' N ' +( A # ! " ( 1

' ( 0# ' $ ' / ")2 $ "!& " ' !&$ 6 * '

( '&0&'&( / ($ +(%/&! 8 $ M+( A N ! " ( ' / ")* ,

, ,

, ....

- ,' &+" (

0 & ' /( " ( ! $ ( , $ ' ( '&$ " & 1 " $ " ' !# ' M , N 6 ! " & & M+( A N8 ' ( '&$ " 2 ' $ !# ' M+( A N " " &' 0 ( &! A (&; "1

# $ '&/&! ( '&$ " 2 ' !# ' 6 &"A ' 6 ! 1 " $,#$ $ '&/&! ( &"A ! " '4 ! " 8 4 . / (

Diagramação de interfaces Web

SK

SK

SK

SK

" ! %(& ( ( '&$ " 2 ' $ !# ' $ ! " . $ 1

&! $ " !# (& ( &"/ (& ( 5 !# $ '&/&! ' " ! 1 " (* $ '&/&! ' $,#$ '&$ " 2 ' ! " 0&;&"A 8

' ! (( ( $ $ " +(%/&! 6 ( "! 5 M+( A N / ( ( ! ' ( ( $ " ! $ '&$ " 2 '&/ ( " 8 !# 6 0 & ! $ (1 %1 (% 4 ' 5 " 0 '&$ " * . $ '&/&! "' . ( ! " + &" . !# '4 ! " ! " 6R " $ " $ '&/&! "' M+( A N8

$ ' ") ' ! ( ' & ( , $ +(%/&! 5 ( /&" ' &"1 (/ !

,

I (&$ &( . # 0& &; )* ' ! " >' &" (&' " !#1

6 &"' 0&' $ " /( ( $ $ '&/&! )2 ! (( $ (& ! ' /&1 ! ( $ (!& $ " "! , ( . + "' . % ( !& " ' ! $ &'#& &"&!& ' ( /&" ' &" (/ !

,

6 ' ( $ " $ 1 '&/&! ' ( ! ' $ ' ") ' !# . 3&+&"' $ ( ! " ( 1 )* ?( ' "A @ ' &" (/ ! 8

( ( ' ! " ( &( $ M+( A N & &; "' / ")* %+&"%+&"%+&"%+&" ' ' ' '

6 '(

6 '(

6 '(

6 '( ( ! & " $ $ ( , $ +(%/&! 6 ! (( $ 6 "'

! " (D& $ M+( A N & &; "' $ M , N8 &$. M+( A N !(& ' ( / ")2 "* ( $ 0 $ !(& &0&' ' ! " & ="!& ' $ ' &"&!& ' ( /&" 8 & $ ' +( A & &; ' " ( ! ' '& 1 +( $ )* ' %+&" &$ ( ? E@ $ (= ,4 &0 I (&$ &( .

Diagramação de interfaces Web

S

S

S

S

+ "' . + A # ! " ( ' ! "/ ($ 0 $ ' &"/ ($ )* ' $ ( , A J . (! &( . +( A # $ $ " >"&! ( ' ' ( +(%/&! 8 ( " . & $ ' +( A ($& /&" &; ( $ " + $ ' &" (/ ! ' / ($ 6 . ' ( " ' & ' ( ! ' '& +( 1

$ )* . # 0 ( &; ( $ ' ") " $ " + $ $ ! ( +( "'

$ ' ") ( ' "A '

<

8

8888S

S

S

S

"% & '

"% & '

"% & '

"% & '

")2

")2

")2

")2

: (

: (

: (

: (

( !

( !

( !

( !

'

'

'

'

& +( $

& +( $

& +( $

& +( $ 1111

)*

)*

)*

)*

' / (( $ " ' ( ' )* ' %+&"

,

.

( "

+

( $1

- 0 (

. '& "&,& &; $ ( &! $ " $ $ / ")2 . (#$ " "A 1

$ ! /&! 6 ( $ 0 ' / ($ ,4 &0 6R "!& ( !

' '& +( $ )* 8 / ")2 / ( !&' ( 6 / (( $ " . ( 1

" $ ' & ! " + &0 ! $ ( )* ( ! ' '& +( $ 1

)* ' %+&"

,

8 (&$ &( ! " + &0 # ( / ( " #3&! . 4 . ($ & &; ' ( " $ ( / ")2 ? ,,,, . $$$$ 1111 ' (

' ( ' (

' ( . %+&"%+&"%+&"%+&" ' 6' 6' 6' 6 '('('('( ! $ '! $ '! $ '! $ ' @ "* * ! "'&; " ( !&1

' ! $ ($ & &; ' " ( ! ' '& +( $ )* ' %+&"

&$ ( ?' /&"&)* ' $ / ($ +(%/&! . ' /&"&)* ' $ %( & 1 +(%/&! ! " ( )* ' +( A @8 ! (( &" 0& 0 $ " $

' &+1

" (

! $ / ($ )* ! '=$&! $ " ! &' ' ' ( ' )* ? / ()

Diagramação de interfaces Web

SS

SS

SS

SS

$ " @ ' ($ ' 0 ; 6 / ( & &; ( $ ' / (( $ "1 ( '& +( $ ( %+&"

,

8

( ! " + &0 # ! "! & . 4 . / ")2 / ( !&'

" / (( $ " "* * 3 $ " 6 ' 4 ' ( ( ! 1

' '& +( $ )* ' %+&" 8 ( 3 $ . / ")* , , , , ($&

!(& ( , ! $ 6 ' '& ( ' 3

('

' "& A

31

!

6 * ( '&!& " $ " ' &" ' ( !& " ( $ " &! $ " &"/ ($ )2 8 " " . $ $ / ")* # '& "&,& &; ' " / (1

( $ " ' ( ' )* ' %+&"

,

! $ / ")* ' !(& )* (1

+ "&; )* ' &" (/ ! 8 3&+ ' -

,' &+" (

$ " ! &' ' ' ' )* ' / ")* 3& " '& "&,& &; ' ( ( &; ( ( !

' '& +( $ )* 8 ' )* 3&+&' ! (( $ ( ( , $

6 # ' $ '&/&! )* / () ' ' &'#& &"&!& ' %+&" ?

<

@. ! "1

/ ($ 0& " L 8 !&$ 8 $ &$. # ! $ / ")2 ' 1

$ " &( 6

- ,' &+" (

( &; ( ! ' ! " ( )* ' %+&"

,

8

$ ( ( $ . #$ ' "* '& "&,& &; ( / ")2 ! /&! .

/ (( $ " ' ! " ( )* ?

( $- 0 (

( "

+

@ ' %+&"

,

" & ' "* / ( ! $ / ")2 ! $ $V" &! 6 ( !& " / !& &

' "0 0&$ " ' ( ! ' '& +( $ )* ' &" (/ !

,

! "1 / ($ # ' !(& ! "! ,&' " ( ! ' '& +( $ )* ' %+&"

Diagramação de interfaces Web

SH

SH

SH

SH

&$ ( 8 6 * /&! 0&' " / ")2 '& " 0 & " 1

/ (( $ " " & ' . 6 , (' ( ! ' '& +( $ )* '

&" (/ ! ' $ " &( (/&!& $ +( "' &$ ( V"!& ( ( 1 ' ' ( ' /&" ? ( /&" @8

( " . ! $ , " "% & ' / ")2 '& " 0 & " / (( $ "

' ( ! ' ! " ( )* ' %+&"

,

. !A + $ 5 ! "1

! * 6 "* 3& / ")* !&/&! " / (( $ "

( !

' '& +( $ )*

& &; ' "* &"! ( ( )2 ' ( ! ' '& 1 +( $ )* ' %+&" &$ ( 8 ! "! * ( "' " + &0 $ "

" + "' 6 & " $ " ,( / (( $ " ' ( ' 1 )* ' %+&"

,

/ ( ! $ / ")2 ! /&! 5 &! )* ' ( 1

!"#! !$%

!"#! !$%

&

&

#'

#'

(

(

(

(!

!

!

!

)

)

)

)

*

*

*

*

+ , -+ -+ . / + . 0 , 1 + 2 3 4 . 1 5 6 ,,,, ++++ --- -+ -+ + + + + + + .... --- -/ / / / ---- ++++ . . . . 7

0000

! 8 . .

9

1 ' 4 + / ' .

1

+ -- +

. 0 5 1 - / . / 8 + - - 0 ! 1 + + 5 . ; + 1 5 1 + 1 <1 . - 0 . 1 ' + . 1 / - . 0 1 , ' 1 4= 1 - 0 ) 4 - / 4 , 1 1 1 . > 0 ? . 2 + - > 0 @ 1 5. A1 >

B

, . 0 C / ' - 1 1 4 4=C 8 0

B

-, -/ + - > 0 1 / 5 + 1 , '