IT2032PAContent Management   System (CMS) Nitec in Social Media & Web Technology
CMS User InterfaceIn this chapter, you will learn:  o To identify the common arrangement of a CMS user    interface.  o To...
The Joomla! TemplateXHTML eXtensible HyperText Markup Language o is a family of XML markup languages that mirror   or exte...
The Joomla! Template
The Joomla! Template
Web Design ElementsUser Interface  eXtensible HyperText Markup Language  o is the system by which people (users) interact ...
Web Design ElementsAdvantages of Web Publishing  o currency  o connectivity  o reduced production costs  o economical rapi...
Basic Design PrinciplesClarity  Maintaining clarity with crisp and sharp images  TIPS:  o Keep shape edges snapped to pixe...
Basic Design PrinciplesConsistency  Refers to designing interfaces to have similar  operations and use similar elements fo...
Basic Design PrinciplesContrast and Focus  A mix of elements to stimulate attention.
Basic Design PrinciplesSimplicity  Omitting all non-essential or un-important elements  and details
Basic Design PrinciplesEmphasis  In 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 PrinciplesBalance and Proximity  o The harmonious    arrangement of    elements.  o Proximity or closeness   ...
Basic Design PrinciplesWhite Space  o help organize Web                        BAYGON                        Kills Insects...
Basic Design PrinciplesHarmony o pulls the pieces of a visual image together o can be achieved through repetition and rhythm
Basic Design PrinciplesConsistency  sense of oneness or  belonging
Basic Design PrinciplesAlignment  o arrangement of objects in fixed or predetermined    positions, rows, or columns
Design Inconsistency• Browser Display Inconsistencies• Differences among browsers• Resolution  o PPI (pixels per inch) – s...
Digital TypographyASCII Character Set (.txt)  o 7-bit character coding system most commonly    used by computer systems in...
Digital TypographyRich Text Format (.rtf)  o a file format that lets you exchange text files    between different word pro...
Digital TypographyMicrosoft Word Document (.doc)  o has great flexibility in designing the look of a    document from vary...
Digital TypographyPortable Document Format (.pdf)  o A system invented by the Adobe ® Corporation  o a PDF document should...
Digital TypographyHypertext Markup Language (.html)  o The World Wide Web started in 1989  o It was designed to link docum...
Digital FontsPostScript Fonts  o PostScript is a Page Description Language (PDL)    that was developed by Adobe  PostScrip...
Digital FontsTrue Type Fonts  o the most common font format available todayMapping text across platforms  o Font Substitut...
CMS User InterfaceFile Size and Download Time  o File Size -     • The actual amount of disk space consumed by the file   ...
CMS User InterfaceMonitor Resolution  o The measure of a monitors sharpness and clarity,  o Resolution is expressed as two...
Upcoming SlideShare
Loading in …5
×

10.m3 cms ui

640 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
640
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

10.m3 cms ui

  1. 1. IT2032PAContent Management System (CMS) Nitec in Social Media & Web Technology
  2. 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. 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. 4. The Joomla! Template
  5. 5. The Joomla! Template
  6. 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. 7. Web Design ElementsAdvantages of Web Publishing o currency o connectivity o reduced production costs o economical rapid delivery
  8. 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. 9. Basic Design PrinciplesConsistency Refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks
  10. 10. Basic Design PrinciplesContrast and Focus A mix of elements to stimulate attention.
  11. 11. Basic Design PrinciplesSimplicity Omitting all non-essential or un-important elements and details
  12. 12. Basic Design PrinciplesEmphasis In design, it provides the focal point for the piece.
  13. 13. Which is Heavier?
  14. 14. Which is Heavier?
  15. 15. ??????????????????????? DON’T ASK ME, I ALSO DON’T KNOW….
  16. 16. Basic Design PrinciplesBalance and Proximity o The harmonious arrangement of elements. o Proximity or closeness is strongly associated with balance.
  17. 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. 18. Basic Design PrinciplesHarmony o pulls the pieces of a visual image together o can be achieved through repetition and rhythm
  19. 19. Basic Design PrinciplesConsistency sense of oneness or belonging
  20. 20. Basic Design PrinciplesAlignment o arrangement of objects in fixed or predetermined positions, rows, or columns
  21. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×