Your SlideShare is downloading. ×
10.m3 cms ui
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

10.m3 cms ui


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. IT2032PAContent Management System (CMS) Nitec in Social Media & Web Technology
  • 2. CMS User InterfaceIn 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! TemplateXHTML eXtensible HyperText Markup Language o is a family of XML markup languages that mirror or extend versions of the widely-used HTMLCSS 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 ElementsUser 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 ElementsAdvantages of Web Publishing o currency o connectivity o reduced production costs o economical rapid delivery
  • 8. Basic Design PrinciplesClarity 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 PrinciplesConsistency Refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks
  • 10. Basic Design PrinciplesContrast and Focus A mix of elements to stimulate attention.
  • 11. Basic Design PrinciplesSimplicity Omitting all non-essential or un-important elements and details
  • 12. Basic Design PrinciplesEmphasis 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 PrinciplesBalance and Proximity o The harmonious arrangement of elements. o Proximity or closeness is strongly associated with balance.
  • 17. Basic Design PrinciplesWhite Space o help organize Web BAYGON Kills Insects 99.9% page elements o eliminate clutter o make content more readable
  • 18. Basic Design PrinciplesHarmony o pulls the pieces of a visual image together o can be achieved through repetition and rhythm
  • 19. Basic Design PrinciplesConsistency sense of oneness or belonging
  • 20. Basic Design PrinciplesAlignment 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 TypographyASCII 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 TypographyRich 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 TypographyMicrosoft 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 TypographyPortable 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 TypographyHypertext 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 FontsPostScript 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 FontsTrue Type Fonts o the most common font format available todayMapping 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 InterfaceFile 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 InterfaceMonitor Resolution o The measure of a monitors 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