W3C Web Standards Effective use of CSS / HTML
Post on 25-Feb-2016
39 Views
Preview:
DESCRIPTION
Transcript
W3C Web Standards
Effective use of CSS / HTML
1http://kb.nextbridge.org
* Ignore Spell mistakes as its Created by IT Professional for IT Professionals
Training Agenda
• W3C Standards– Benefits– Includes– Implementation– Considerations– Conclusion
• Effective usage of CSS• HTML Tips (Food for thought)
2http://kb.nextbridge.org
W3C Standards Adavantages
• Standards compliant Web sites Advantages– Lower your development and maintenance efforts– Compatible– Loads fast– Save bandwidth– Accessible– Better SEO– Easier to modify– Scalable & Re-useable
3http://kb.nextbridge.org
Compatibility
• Backward compatibility: Render properly on old devices, browsers etc...
• Forward compatibility: Will render properly on future devices, browsers, etc...
• Render properly on all Platforms: IBM, Linux, Apple ...
• browsers: Internet Explorer, Netscape, FireFox, Safari, Opera ...
• Devices: PDA's, mobile phones ...
4http://kb.nextbridge.org
Website when rendered on Mozilla Firefox
5http://kb.nextbridge.org
Website when rendered on Internet Explorer
6http://kb.nextbridge.org
What is the solution ?• Set a browser detection script and serve a different file for every browser.
Which requires Designing a different page that renders properly on every browser.
• Use CSS Hacks to identify the browser– Conditional Comments– <!--[if IE]> Some CssCode<![endif] -->– <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="ie_hacks.css" /><![endif]-->
– Condition is one of the following:– IE (Any version of IE)– lt IE version “ < “ (Versions less than version)– lte IE version “ <= “ (Versions less than or equal to version)– IE version (Only version)– gte IE version “ >= “ (Versions greater than or equal to version)– gt IE version “ > “ (Versions greater than version)
• Stylegala- No More CSS Hacks• Many more CSS Hacks• Use Standards compliant pages with a proper Doctype. 7http://kb.nextbridge.org
DocType• Every web page should contain a "Doctype", Doctype (short for
"document type declaration") informs the browser which version of HTML / XHTML you're using.
• Some doctypes• HTML 4.01 Strict• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">• HTML 4.01 Transitional• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">• HTML 4.01 Frameset• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
http://www.w3.org/TR/html4/frameset.dtd">• XHTML 1.0 Strict• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">• XHTML 1.0 Transitional• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">• XHTML 1.1• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
8http://kb.nextbridge.org
Advantages of DocType
• Web browsers render a web page according to it's Doctype.
• Standards compliant web sites should render the same on all browsers, Un-like a web page that doesn't contain a doctype it's rendered differently on every browser.
9http://kb.nextbridge.org
Loads fast• Standards compliant web site is more than half file size• Due to smaller files sizes
– Therefor it loads twice as fast– And save more than half the bandwidth– Bandwidth: The amount of data downloaded from a
server.
Use in Repetition
Home
Home
Non Complaint
Complaint
10http://kb.nextbridge.org
Accessible
• Accessible for blind persons– Images (ALT) – Using Screen Reader
• Accessible for motor skill impaired– Access key for navigation links– Logical tab index for buttons and forms
11http://kb.nextbridge.org
Compatible with more browsers and platforms
• Overall, 5 different rendering engines are used to surf the web in dozens of browsers on 3 platforms.
• More and more browsers, other than Internet Explorer for Windows, are used to surf the web.– Windows : MSIE, Netscape Gecko, Opera.– Mac: MS-Tasman (IE/Mac) , Netscape Gecko, KHTML, Opera– Linux: Netscape Gecko, KHTML, Opera
• Coding to standards (instead one or two specific browsers) is then the only practical solution.
12http://kb.nextbridge.org
Usage of CSS
• Rather than defining the styles in code use a standard CSS separate file containing all the styles of an application.
• Getting rid of the painful mix of content and presentation by separating them.
• It is possible to update style sheets (and change the layout on all pages) without updating the documents.– Concept of theming AND/OR Template.
• Use Strict HTML and CSS to enforce the separation.• “CSS has made it possible to transform table-based layouts into
Div Based layouts. Typically this reduces page size by 25 to 50%“.• Avoid Replication of Styles.• Use Dependencies where it is needed.
13http://kb.nextbridge.org
14http://kb.nextbridge.org
Parts of a File
15http://kb.nextbridge.org
16http://kb.nextbridge.org
W3 Requires
• W3C stated that Tables shouldn't be used for forming web site layouts, it should only be used for data table, calendar, etc...
• A standards compliant web site shouldn't use table based layouts, it should use Pure CSS layouts instead.
• To make sure that your Markup complies the Standards your web pages should pass the W3C Markup validator.– http://validator.w3.org/
• To make sure that your CSS complies the Standards your web pages should pass the W3C CSS validator.– http://jigsaw.w3.org/css-validator/
17http://kb.nextbridge.org
Conclusion
• Using standards today means– Reducing efforts of development and management of content – Reaching a wider audience (wider compatibility with browsers,
accessibility, better ranking in search engines)– Compliance with accessibility law
• Tomorrow– Reduced hazards for upcoming developers.– Reduced cost of maintenance– Flexibility of presentation, including non-PC devices– A door open to XML technologies and benefits
19http://kb.nextbridge.org
Effective use of CSS3
• Using CSS for special effects on text makes one’s web site much easier to design the elements.– p { text-shadow: 1px 1px 1px #000; } Shadow your text
– text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20; Multiple Shadows using Commas
20http://kb.nextbridge.org
Effective use of CSS3• Make the corners round
– #example1 { border-radius: 15px; }
– border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
– Examples• border-top-left-radius: 10px 5px;• border-bottom-right-radius: 10% 5%;• border-top-right-radius: 10px;
21http://kb.nextbridge.org
• -moz-border-radius: 150px; /* for firefox */ • -webkit-border-radius: 150px; /* for webkit browsers:
• More• Apply gradient using CSS3• Even design smiles and shapes using CSS3
Effective use of CSS3
22http://kb.nextbridge.org
Creating Smiley using CSS3
• Create div with max radius and within big div• Using more divs and there coordinates put mouth line• Even use the divs with radius to put more on smiley
23http://kb.nextbridge.org
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Animation</title><link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
<div id="content"><div class="head head-one block relative">
<div class="eye left block absolute"></div><div class="eye right block absolute"></div><div class="pupil pupil-left block absolute"></div><div class="pupil pupil-right block absolute"></div><div class="mouth block absolute"></div>
</div>
<div class="head head-two block relative"><div class="eye left block absolute"></div><div class="eye right block absolute"></div><div class="pupil pupil-left block absolute"></div><div class="pupil pupil-right block absolute"></div><div class="mouth block absolute"></div><div class="tongue block absolute"></div>
</div>
</div>
</body></html> http://kb.nextbridge.org 24
Smiley Implementation(HTML)
#content{
width: 700px;margin: 0 auto;
}
.block{
display: block;}
.relative{
position: relative;}
.absolute{
position: absolute;}
.head{
background: yellow;display: block;border: 1px solid #000;border-radius: 150px;-moz-border-radius: 150px; /* for firefox */-webkit-border-radius: 150px; /* for webkit browsers: safari, chrome */height: 300px;margin: 0 auto;width: 300px;float: left;
}
http://kb.nextbridge.org 25
Smiley Implementation(CSS)
.head-two{
margin-left: 10px;}
.eye{
border: 2px solid #000;background: #fff;border-radius: 40px;-moz-border-radius: 40px;-webkit-border-radius: 40px;height: 80px;top: 83px;width: 80px;
}
.left{
left: 50px;}
.right{
right: 50px;}
.pupil{
background: #000;border-radius: 13px;-moz-border-radius: 13px;-webkit-border-radius: 13px;height: 26px;top: 114px;width: 26px;
}
http://kb.nextbridge.org 26
Smiley Implementation(CSS)
.pupil-left{
left: 80px;}
.pupil-right{
right: 80px;}.mouth{
background: #000;height: 8px;top: 203px;left: 66px;width: 171px;transform: rotate(-15deg);-moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);
}.head-two .mouth{
transform: none;-moz-transform: none;-webkit-transform: none;
}
.tongue{
background: red;border-radius: 0 0 22px 22px;-moz-border-radius: 0 0 22px 22px;-webkit-border-radius: 0 0 22px 22px;height: 45px;top: 203px;left: 186px;width: 45px;
}
http://kb.nextbridge.org 27
Smiley Implementation(CSS)
Useful for HTML (Food for Thought)
• Use <th> for headings in table.• For RIGHT TO LEFT language scripts Add dir="rtl" to
the html• Use <h1> for major headings• Web Page title should be appropriate with content.
Better to make it dynamic• Call header, footer, content, side bars separately.• Use less flash content for better SEO.
28http://kb.nextbridge.org
dd_roundies (Just for Knowledge)
• Javascript library used for creation of rounded-corner HTML boxes easier for IE
• It helps for creating rounded corners which is a very hectic task for developers while they are working in IE
• Uses Microsoft's implementation of VML for Internet Explorer.
• For other browsers, this adds simple border-radius styles to the document
http://kb.nextbridge.org 29
dd_roundies (Just for Knowledge)
• <script src="DD_roundies.js"></script><script> DD_roundies.addRule('.nameofclass', '5px', true);</script>
• addRule can take up to three arguments: (REQUIRED) A text string representing a CSS selector
• (REQUIRED) A text string representing a border radius or radii (anywhere from 1 to 4, separated by commas)
• (OPTIONAL) A boolean indicating whether or not you want to make roundies just in IE (set to false), or attempt to make roundies in "all" browsers (set to true).
• For more information:• http://www.dillerdesign.com/experiment/DD_roundies/
http://kb.nextbridge.org 30
Credits
• Training Head– Wajhe Muhammad
• Training Managers– Fahad Shakeel– Nazar Hussain
• Coordinator– Tehseen
• Presenter– Fahad Shakeel
Thank You
31
This Training is available at
http://kb.nextbridge.org
http://kb.nextbridge.org
top related