10.m3 cms ui

IT2032PA Content Management

System (CMS)Nitec in Social Media & Web Technology

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.

The Joomla! Template

XHTML eXtensible HyperText Markup Languageo 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.

The Joomla! Template

The Joomla! Template

Web Design Elements

User InterfaceeXtensible HyperText Markup Languageo is the system by which people (users) interact

with a machine. o The user interface includes hardware (physical)

and software (logical) componentso Provide means of:

• Input, allowing the users to manipulate a system• Output, allowing the system to indicate the effects

of the users' manipulation

Web Design Elements

Advantages of Web Publishingo currencyo connectivityo reduced production costso economical rapid delivery

Basic Design Principles

ClarityMaintaining clarity with crisp and sharp images

TIPS:o Keep shape edges snapped to pixels. o Appropriate anti-aliasing setting (for text)o High contrasto Over-emphasize borders

Basic Design Principles

ConsistencyRefers to designing interfaces to have similar operations and use similar elements for achieving similar tasks

Basic Design Principles

Contrast and FocusA mix of elements to stimulate attention.

Basic Design Principles

SimplicityOmitting all non-essential or un-important elements and details

Basic Design Principles

EmphasisIn design, it provides the focal point for the piece.

Which is Heavier?

Which is Heavier?

???????????????????????

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

Basic Design Principles

Balance and Proximityo The harmonious

arrangement of elements.

o Proximity or closeness is strongly associated with balance.

Basic Design Principles

White Spaceo help organize Web

page elementso eliminate cluttero make content more

readable

BAYGONKills Insects 99.9%

Basic Design Principles

Harmonyo pulls the pieces of a visual image togethero can be achieved through repetition and rhythm

Basic Design Principles

Consistencysense of oneness or belonging

Basic Design Principles

Alignmento arrangement of objects in fixed or predetermined

positions, rows, or columns

Design Inconsistency

• Browser Display Inconsistencies

• Differences among browsers

• Resolutiono PPI (pixels per inch) – screeno DPI (dot per inch) – print

• Colour Scheme

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.

Digital Typography

Rich Text Format (.rtf)o a file format that lets you exchange text files

between different word processors in different OSo a standard formalized by Microsoft Corporation

for specifying formatting of documents.

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

Digital Typography

Portable Document Format (.pdf)o A system invented by the Adobe ® Corporationo a PDF document should show up on all

computers in exactly the same way as was originally intended

Digital Typography

Hypertext Markup Language (.html)o The World Wide Web started in 1989o 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>

Digital Fonts

PostScript Fontso 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

Digital Fonts

True Type Fontso the most common font format available today

Mapping text across platformso Font Substitution

• If a specific font doesn’t exist on the target machine • A substitute must be provided

CMS User Interface

File Size and Download Timeo 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

CMS User Interface

Monitor Resolutiono 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