<?xml version="1.0"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en" />
<meta name="keywords" content="centos introduction visual style guide" />
<meta name="description" content="CentOS visual style guide introduction." />
<meta name="copyright" content="2009 - The CentOS Project" />
<title>Introduction - CentOS Web Visual Style Guide</title>
<link href="/home/centos/artwork/trunk/Identity/Models/Css/Default/stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="page-header">
<div class="links">
<div class="tabs1">
<span>
<a accesskey="1" title="CentOS Home Page (Alt+Shift+1)" href="http://centos.org/"><span>Home</span></a>
</span>
<span class="current">
<a accesskey="2" title="CentOS Wiki (Alt+Shift+2)" href="http://centos.org/wiki"><span>Wiki</span></a>
</span>
<span>
<a accesskey="3" title="CentOS Documentation (Alt+Shift+3)" href="http://centos.org/docs"><span>Docs</span></a>
</span>
<span>
<a accesskey="4" title="CentOS Mailing Lists (Alt+Shift+4)" href="http://centos.org/lists"><span>Lists</span></a>
</span>
<span>
<a accesskey="5" title="CentOS Forums (Alt+Shift+5)" href="http://centos.org/forums"><span>Forums</span></a>
</span>
<span>
<a accesskey="6" title="CentOS Projects (Alt+Shift+6)" href="http://centos.org/projects"><span>Projects</span></a>
</span>
<span>
<a accesskey="7" title="CentOS Bugs (Alt+Shift+7)" href="http://centos.org/bugs"><span>Bugs</span></a>
</span>
<span class="download">
<a accesskey="D" title="CentOS Download (Alt+Shift+D)" href="http://centos.org/download"><span>Download</span></a>
</span>
</div>
<div class="page-line"><hr style="display:none;" /></div>
<div class="search">
<form method="post" action="" title="CentOS Search">
<p>
<input type="text" value="" />
<select name="lang">
<option value="es">Spanish</option>
<option value="en">English</option>
</select>
<select name="mlevel">
<optgroup label="CentOS-3">
<option value="docs">Documentation</option>
<option value="wiki">Wiki</option>
<option value="download">Download</option>
<option value="lists">Mailing Lists</option>
<option value="forums">Forums</option>
<option value="bugs">Bugs</option>
</optgroup>
<optgroup label="CentOS-4">
<option value="docs">Documentation</option>
<option value="wiki">Wiki</option>
<option value="download">Download</option>
<option value="lists">Mailing Lists</option>
<option value="forums">Forums</option>
<option value="bugs">Bugs</option>
</optgroup>
<optgroup label="CentOS-5">
<option value="docs">Documentation</option>
<option value="wiki">Wiki</option>
<option value="download">Download</option>
<option value="lists">Mailing Lists</option>
<option value="forums">Forums</option>
<option value="bugs">Bugs</option>
</optgroup>
</select>
<input type="submit" value="Search" />
</p>
</form>
</div>
<div class="page-line"><hr style="display:none;" /></div>
<div class="user">
<span><a href="">Login</a></span>
<span><a href="">Create Account</a></span>
<span class="last"><a href="">Lost Your Password?</a></span>
</div>
<div class="page-line"><hr style="display:none;" /></div>
<div class="trail">
<span><a href="">Login</a></span>
<span><a href="">Create Account</a></span>
<span class="last"><a href="">Lost Your Password?</a></span>
</div>
</div>
<div id="logo">
<a title="Community Enterprise Operating System" href="http://www.centos.org/">
<img src="../Img/png/centos-logo.png" alt="CentOS" />
</a>
</div>
<div class="page-line"><hr style="display:none;" /></div>
<div class="tabs2">
<span class="current"><a title="Welcome to the web special interest group" href="index.html"><span>Welcome</span></a></span>
<span><a title="CentOS headings visual style guide." href="headings.html"><span>Headings</span></a></span>
<span><a title="CentOS texts visual style guide." href="texts.html"><span>Texts</span></a></span>
<span><a title="CentOS lists visual style guide." href="lists.html"><span>Lists</span></a></span>
<span><a title="CentOS links visual style guide." href="links.html"><span>Links</span></a></span>
<span><a title="CentOS tables visual style guide." href="tables.html"><span>Tables</span></a></span>
<span><a title="CentOS forms visual style guide." href="forms.html"><span>Forms</span></a></span>
<span><a title="CentOS pagination visual style guide." href="pagination.html"><span>Pagination</span></a></span>
</div>
<div class="page-line blue"><hr style="display:none;" /></div>
<div class="admin">
<span><a accesskey="T" href="http://www.centos.org/" title="Text Edition (Alt+Shift+T)">Text Edit</a></span>
<span><a accesskey="G" href="http://www.centos.org" title="Graphical Edition (Alt+Shift+G)">Visual Edit</a></span>
<span><a href="">Information</a></span>
<span><a href="">Set Link</a></span>
<form method="post" action="">
<p> Action: <select name="lang">
<option value="es">Spanish</option>
<option value="en">English</option>
</select>
<input type="submit" value="Go" />
</p>
</form>
</div>
</div>
<div id="page-location">
<span><a href="">Home</a></span>
<span><a href="">Help</a></span>
<span><a href="">Style</a></span>
<span class="last"><a href="">Web</a></span>
</div>
<div id="page-body">
<h1>Welcome to the CentOS Web Visual Style Guide</h1>
<p>The CentOS Web Visual Style Guide is a tool.</p>
<p>This tool is part of CentOS "Corporate Visual Identity Manual"
proposition, which is based on a monolithic corporate visual
identity structure. In a monolithic corporate visual identity
structure, organization has one name and one visual style in
all its manifestations (Olins (1989).</p>
<p>CentOS web manifestation (anything involving HTML standards)
should be considered here. (Ex. Portals, Wikis, Forums, Blogs,
Bug Tracker).</p>
<p>People customizing CentOS Web Environment can use this guide
as reference each time they need to solve a visual
customization problem. If the solution to a particular problem
don't exist in this guide, please add your problem here, and
the possible solutions you've found. If you haven't found a
solution, add your problem anyway, surely someone will find a
solution for it.</p>
<p>With this guide we are trying to unify as much CSS definitions
as possible, creating a common CSS definition for all web
applications we use and specific CSS definitions in those
cases where it is absolutely needed. Specific CSS definitions
will extend CentOS common CSS definitions.</p>
<p style="text-align: center"><img src="../Img/png/wvs-schema-3.png" alt="wvs-schema-3.png" /></p>
<h2>Our Goals</h2>
<ul>
<li>Creating a common visual presentation along the web
applications we use.</li>
<li>Creating an environment where applications'
source code can be updated without breaking the common visual
presentation.</li>
<li>...</li>
</ul>
<h2>Members</h2>
<ul>
<li>Alain Reguera Delgado</li>
<li>Marcus Moeller</li>
<li>Ralph Angenendt ( CentOS team representative )</li>
</ul>
<h2>Working Lines</h2>
<p>The following sections try to land our goals in more
specific tasks:</p>
<h3>1. HTML Structures</h3>
<p>Defines HTML structures used to display content:</p>
<ul>
<li><a
href="http://wiki.centos.org/WebsiteVer2/WebEnvironment/VisualStyle/Default"
class="www">Default:</a>
This is the simpliest HTML structure and can be used
as starting point when building new structures.</li>
<li><a href="" class="nonexistent">Two
Columns:</a> This is a two columns
structure based on default structure.</li>
</ul>
<h3>2. CSS Definition</h3>
<p>This section defines CentOS Web visual style. CentOS web
visual style takes place in a set of CSS definitions. They are
organized in the following order:</p>
<pre>
Main definitions (<a href="../css/stylesheet.css">stylesheet.css</a>):
`-- Import Base CSS definitions (<a href="../css/common.css">common.css</a>, <a
href="../css/print.css">print.css</a>)
`-- Import Misscellaneous CSS definitions (<a href="../css/tabs.css">tabs.css</a>, containers.css, ...)</pre>
<p>Web applications needing common CSS definitions will link
common CSS definitions in the following order:</p>
<pre><link href="stylesheet.css" rel="stylesheet" type="text/css" /></pre>
<p>Web applications needing both common and specific CSS definitions will link
CSS definitions in the following order:</p>
<pre><link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="specific.css" rel="stylesheet" type="text/css" /></pre>
<p>Specific web applications' CSS definition
(<tt>specific.css</tt>) will extend CentOS common CSS
definitions (<tt>stylesheet.css</tt>) and care will be taken
to avoid overlapping CentOS common CSS definitions in specific
CSS definitions.</p>
<h3>3. Web Development</h3>
<p>Specific CentOS Web functionalities that need to be built.</p>
<ul>
<li><a href="" class="nonexistent">LDAP User
Management</a>: Web application used to
administer the CentOS LDAP user's database.</li>
</ul>
<h2>Coding Style</h2>
<ol>
<li><a href="" class="nonexistent">HTML Coding
Style</a>: Useful when you are writing HTML
files for CentOS.</li>
<li><a href="" class="nonexistent">CSS Coding
Style</a>: Useful when you are writing CSS
files for CentOS.</li>
<li><a href="" class="nonexistent">PHP Coding
Style</a>: Useful when you are writing PHP
applications for CentOS.</li>
</ol>
<h2>Documentation</h2>
<ol>
<li><a class="www" href="http://www.w3.org/TR/html401">HTML 4.01 Specification</a></li>
<li><a class="www" href="http://www.w3.org/TR/CSS21">Cascading Style Sheets Level 2 Revision 1 (CSS2.1) Specification</a></li>
<li><a class="www" href="http://www.w3.org/TR/xhtml1">XHTML™ 1.0
The Extensible HyperText Markup Language (Second
Edition)</a></li>
</ol>
</div>
<div id="page-info">FrontPage (last edited 2009-10-15 10:12:13 by <a
href="">FirstnameLastname</a>)</div>
<div id="page-footer">
<div class="admin">
<span><a href="">Text Edit</a></span>
<span><a href="">Visual Edit</a></span>
<span><a href="">Information</a></span>
<span class="last"><a href="">Set Link</a></span>
</div>
<div class="page-line blue"><hr style="display:none;" /></div>
<div class="tabs2">
<span class="current"><a title="Welcome to the web special interest group" href="index.html"><span>Welcome</span></a></span>
<span><a title="CentOS headings visual style guide." href="headings.html"><span>Headings</span></a></span>
<span><a title="CentOS texts visual style guide." href="texts.html"><span>Texts</span></a></span>
<span><a title="CentOS lists visual style guide." href="lists.html"><span>Lists</span></a></span>
<span><a title="CentOS links visual style guide." href="links.html"><span>Links</span></a></span>
<span><a title="CentOS tables visual style guide." href="tables.html"><span>Tables</span></a></span>
<span><a title="CentOS forms visual style guide." href="forms.html"><span>Forms</span></a></span>
<span><a title="CentOS pagination visual style guide." href="pagination.html"><span>Pagination</span></a></span>
</div>
<div class="page-line"><hr style="display:none;" /></div>
<div class="lisence">
<strong><a rel="license"
href="http://creativecommons.org/licenses/by-sa/3.0/"> <img
alt="Creative Commons License" style="border-width: 0pt;"
src="http://creativecommons.org/images/public/somerights20.png" />
</a></strong> <br />This wiki is licensed under a <a rel="license"
href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons
Attribution-Share Alike 3.0 Unported License</a>.
</div>
<div class="page-line"><hr style="display:none;" /></div>
<div class="tabs1">
<span>
<a title="CentOS Home Page (Alt+Shift+1)" href="http://centos.org/"><span>Home</span></a>
</span>
<span class="current">
<a title="CentOS Wiki (Alt+Shift+2)" href="http://centos.org/wiki"><span>Wiki</span></a>
</span>
<span>
<a title="CentOS Documentation (Alt+Shift+3)" href="http://centos.org/docs"><span>Docs</span></a>
</span>
<span>
<a title="CentOS Mailing Lists (Alt+Shift+4)" href="http://centos.org/lists"><span>Lists</span></a>
</span>
<span>
<a title="CentOS Forums (Alt+Shift+5)" href="http://centos.org/forums"><span>Forums</span></a>
</span>
<span>
<a title="CentOS Projects (Alt+Shift+6)" href="http://centos.org/projects"><span>Projects</span></a>
</span>
<span>
<a title="CentOS Bugs (Alt+Shift+7)" href="http://centos.org/bugs"><span>Bugs</span></a>
</span>
<span class="download">
<a title="CentOS Download (Alt+Shift+D)" href="http://centos.org/download"><span>Download</span></a>
</span>
</div>
<div class="credits">
<p>This wiki is powered by <a href="http://www.moinmoin.org/">MoinMoin</a></p>
<p>The CentOS Project</p>
</div>
<div class="page-line"><hr style="display:none;" /></div>
</div>
</div>
</body>
</html>