1 / 30

W3C Web Standards Effective use of CSS / HTML

W3C Web Standards Effective use of CSS / HTML. * 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).

gerry
Download Presentation

W3C Web Standards Effective use of CSS / HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. W3C Web StandardsEffective use of CSS / HTML * Ignore Spell mistakes as its Created by IT Professional for IT Professionals http://kb.nextbridge.org

  2. Training Agenda • W3C Standards • Benefits • Includes • Implementation • Considerations • Conclusion • Effective usage of CSS • HTML Tips (Food for thought) http://kb.nextbridge.org

  3. 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 http://kb.nextbridge.org

  4. 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 ... http://kb.nextbridge.org

  5. Website when rendered on Mozilla Firefox http://kb.nextbridge.org

  6. Website when rendered on Internet Explorer http://kb.nextbridge.org

  7. 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. http://kb.nextbridge.org

  8. 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"> http://kb.nextbridge.org

  9. 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. http://kb.nextbridge.org

  10. 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. Non Complaint Home Home Complaint Use in Repetition http://kb.nextbridge.org

  11. 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 http://kb.nextbridge.org

  12. 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. http://kb.nextbridge.org

  13. 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. http://kb.nextbridge.org

  14. http://kb.nextbridge.org

  15. Parts of a File http://kb.nextbridge.org

  16. http://kb.nextbridge.org

  17. 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/ http://kb.nextbridge.org

  18. 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 http://kb.nextbridge.org

  19. 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 http://kb.nextbridge.org

  20. 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; http://kb.nextbridge.org

  21. Effective use of CSS3 • -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 http://kb.nextbridge.org

  22. 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 http://kb.nextbridge.org

  23. Smiley Implementation(HTML) <!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(CSS) #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. 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. http://kb.nextbridge.org

  28. 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> • addRulecan 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 • FahadShakeel • NazarHussain • Coordinator • Tehseen • Presenter • FahadShakeel • This Training is available at • http://kb.nextbridge.org Thank You http://kb.nextbridge.org

More Related