10.m3 cms ui
TRANSCRIPT
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