become an ia superstar (chinese version)

22
Become an IA superstar: 1>^Z89d building essential navigation in Drupal Drupal-IfX(Y John Albin Wilkins JohnAlbin, @JohnAlbin, etc. http://www.flickr.com/photos/9053157@N02/2327370159/

Upload: john-albin-wilkins

Post on 06-Dec-2014

1.156 views

Category:

Technology


0 download

DESCRIPTION

This is a dual English/Chinese slideshow for DrupalCamp Taipei covering IA menu navigation techniques in Drupal.

TRANSCRIPT

Page 1: Become an IA superstar (Chinese version)

Become an IA superstar:1>��^Z89d

building essential navigation in Drupal Drupal�-IfX(Y�

John Albin Wilkins

JohnAlbin, @JohnAlbin, etc.

http

://w

ww

.flic

kr.c

om/p

hoto

s/90

5315

7@N

02/2

3273

7015

9/

Page 2: Become an IA superstar (Chinese version)

John Albin Wilkins

JohnAlbin, @JohnAlbin, etc.

Palantiri (Palantir.net)

Maintainer of:Menu block

Menu positionMenu item container

404 Navigation404 Blocks

Page 3: Become an IA superstar (Chinese version)

Patternsin IA

^Z89D;?:.

http

://w

ww

.flic

kr.c

om/p

hoto

s/44

3743

27@

N05

/480

3898

574/

Page 4: Become an IA superstar (Chinese version)

http://www.flickr.com/photos/95492938@N00/5473183284/

Structure vs. Presentation O9U)G

Page 5: Become an IA superstar (Chinese version)

4 basic structures of IA^Z89�$!7O9

! Hierarchy (Strict or Polyhierarchy)gM (�[D2#�g*)

! Database ^5,! Hypertext _47! Linear Q/D

Page 6: Become an IA superstar (Chinese version)

A Practical Guide to

Information Architecture^Z89D&C3l

by Donna Spencer

http://practical-ia.com

Page 7: Become an IA superstar (Chinese version)

http://www.flickr.com/photos/49503165485@N01/4714813480/

Hypertext +��

Page 8: Become an IA superstar (Chinese version)

Drupal coreonly supports

Strict Hierarchy

Drupal����� *%/�'

Hierarchy /&

http://www.flickr.com/photos/33563858@N00/4622863153/

Page 9: Become an IA superstar (Chinese version)

Drupal coreonly supports

Strict Hierarchy

Drupal����� *%/�'

Drupal coregets confused with

Polyhierarchybecause the web

is “stateless”Drupal����)”��/�”�"�#(,�!�.$��%

Hierarchy /&

http://www.flickr.com/photos/33563858@N00/4622863153/

Page 10: Become an IA superstar (Chinese version)

Database ^5,

Page 11: Become an IA superstar (Chinese version)

Linear Q/D

Page 12: Become an IA superstar (Chinese version)

http://www.flickr.com/photos/95492938@N00/257491210/

Combinations O�

Page 13: Become an IA superstar (Chinese version)

http://www.flickr.com/photos/82995349@N00/2552866309/

404 Navigation“��(0”

Don’t let your users get lost.

�\�D�CSa`�!

http://drupal.org/project/navigation404

(D6 version is called “404 Blocks”)

Drupal6H>”404 Blocks”

Page 14: Become an IA superstar (Chinese version)

Split Navigation ��(VPresentation of theHierarchy pattern)Gg*.;?Primary links inhorizontal navbar on top�6=+(VD�XcOSecondary, Tertiary, etc. linksin sidebarJ�J�j cO �<

http://www.flickr.com/photos/80974239@N00/2930794542/

Page 15: Become an IA superstar (Chinese version)

http://www.flickr.com/photos/22875086@N05/3464050379/

Menu block �Te��"The hidden gem of Drupal contrib.Drupal]BSDhW'@

http://drupal.org/project/menu_block

Page 16: Become an IA superstar (Chinese version)

http://www.flickr.com/photos/42327254@N00/3337773098/

Containers%�

Page 17: Become an IA superstar (Chinese version)

Menu item container�Te�iED%L�

Used on the Drupalcon Chicago website.

Drupalcon Chicago websiteD0C

http://drupal.org/project/menu_item_container

Page 18: Become an IA superstar (Chinese version)

Guess what Drupal’sHierarchy-based

menu systemdoes here.

AAFDrupalDg*.89De�KP�

��k

http://www.flickr.com/photos/83484306@N00/3300827223/

Database ^5,

Page 19: Become an IA superstar (Chinese version)

Guess what Drupal’sHierarchy-based

menu systemdoes here.

AAFDrupalDg*.89De�KP�

��k

http://www.flickr.com/photos/83484306@N00/3300827223/

Database ^5,

Page 20: Become an IA superstar (Chinese version)

http://www.flickr.com/photos/54019819@N00/3413149841/

Menu Positione� R

The new kid on the block.

����-����

http://drupal.org/project/menu_position

Page 21: Become an IA superstar (Chinese version)

Linear Q/D

Menu position can do this too!“e� R”:N����b�!

Page 22: Become an IA superstar (Chinese version)

Using Blue Podcast�CBlue Podcast

usingblue.com