The document discusses content management systems and their user interfaces. It covers common CMS user interface elements, web page design principles like clarity and consistency, and design elements such as user interface and advantages of web publishing. It also discusses basic design principles including balance, white space, harmony and alignment. Digital typography formats and digital fonts are described as well.

1. IT2032PA
Content Management
System (CMS)
Nitec in Social Media & Web Technology

2. CMS User Interface
In this chapter, you will learn:
o To identify the common arrangement of a CMS user
interface.
o To Identify the Web Page Design Elements,
Principles and its characteristics.

3. The Joomla! Template
XHTML
eXtensible HyperText Markup Language
o is a family of XML markup languages that mirror
or extend versions of the widely-used HTML
CSS
Cascading Style Sheets
o is a style sheet language used for describing the
presentation semantics.

4. The Joomla! Template

5. The Joomla! Template

6. Web Design Elements
User Interface
eXtensible HyperText Markup Language
o is the system by which people (users) interact
with a machine.
o The user interface includes hardware (physical)
and software (logical) components
o Provide means of:
• Input, allowing the users to manipulate a system
• Output, allowing the system to indicate the effects
of the users' manipulation

7. Web Design Elements
Advantages of Web Publishing
o currency
o connectivity
o reduced production costs
o economical rapid delivery

8. Basic Design Principles
Clarity
Maintaining clarity with crisp and sharp images
TIPS:
o Keep shape edges snapped to pixels.
o Appropriate anti-aliasing setting (for text)
o High contrast
o Over-emphasize borders

9. Basic Design Principles
Consistency
Refers to designing interfaces to have similar
operations and use similar elements for achieving
similar tasks

10. Basic Design Principles
Contrast and Focus
A mix of elements to stimulate attention.

11. Basic Design Principles
Simplicity
Omitting all non-essential or un-important elements
and details

12. Basic Design Principles
Emphasis
In design, it provides the focal point for the piece.

13. Which is Heavier?

14. Which is Heavier?

15. ???????????????????????
DON’T ASK ME, I ALSO DON’T KNOW….

16. Basic Design Principles
Balance and Proximity
o The harmonious
arrangement of
elements.
o Proximity or closeness
is strongly associated
with balance.

17. Basic Design Principles
White Space
o help organize Web
BAYGON
Kills Insects 99.9%
page elements
o eliminate clutter
o make content more
readable

18. Basic Design Principles
Harmony
o pulls the pieces of a visual image together
o can be achieved through repetition and rhythm

19. Basic Design Principles
Consistency
sense of oneness or
belonging

20. Basic Design Principles
Alignment
o arrangement of objects in fixed or predetermined
positions, rows, or columns

21. Design Inconsistency
• Browser Display Inconsistencies
• Differences among browsers
• Resolution
o PPI (pixels per inch) – screen
o DPI (dot per inch) – print
• Colour Scheme

22. Digital Typography
ASCII Character Set (.txt)
o 7-bit character coding system most commonly
used by computer systems in the United States
and abroad.
o the number 65, for example, always represents
an uppercase letter A.

23. Digital Typography
Rich Text Format (.rtf)
o a file format that lets you exchange text files
between different word processors in different OS
o a standard formalized by Microsoft Corporation
for specifying formatting of documents.

24. Digital Typography
Microsoft Word Document (.doc)
o has great flexibility in designing the look of a
document from varying margins and indentations
to tables and bullets

25. Digital Typography
Portable Document Format (.pdf)
o A system invented by the Adobe ® Corporation
o a PDF document should show up on all
computers in exactly the same way as was
originally intended

26. Digital Typography
Hypertext Markup Language (.html)
o The World Wide Web started in 1989
o It was designed to link documents located on
computer anywhere within the Internet.
o This is an example for bolded text:
<strong>This text is bolded</strong>

27. Digital Fonts
PostScript Fonts
o PostScript is a Page Description Language (PDL)
that was developed by Adobe
PostScript fonts require two files to work properly.
o outline file
• supplies the information that a printer needs
o screen file
• gives a computer system the information to properly
display the font on-screen

28. Digital Fonts
True Type Fonts
o the most common font format available today
Mapping text across platforms
o Font Substitution
• If a specific font doesn’t exist on the target machine
• A substitute must be provided

29. CMS User Interface
File Size and Download Time
o File Size -
• The actual amount of disk space consumed by the file
depends on the file system
o Bandwidth –
• the quantity of data that can be transmitted in a specific
time frame,
• measured in bits per second

30. CMS User Interface
Monitor Resolution
o The measure of a monitor's sharpness and clarity,
o Resolution is expressed as two numbers
• the number of columns of pixels
• the number of rows of pixels that a monitor can display