1. Web Standards Coding Benefits of Web Standards Coding – Variety of user agents Same marked up content can be read by browser, smartphones, screen readers etc. – Performance File size is smaller – exclude presentational mark-up – Cross Browser Compatibility – Separation of Content and Presentation From Stylin’ with CSS by Charles Wyke-Smith Second Edition

2. Web Standards Coding Benefits of Web Standards Coding (cont) – Build more fluid pages Easier to change number of list items etc. – Validation tools Use HTML, CSS, XHTML validators – Streamline production Allow teams of people to work on project Each team member knows rules for content and design – Accessibility

3. Standards Organizations List of Standards Organizations – http://www.webstandards.org/learn/external/orgs/ http://www.webstandards.org/learn/external/orgs/ – The Web Standards Project – http://www.webstandards.org/learn/articles http://www.webstandards.org/learn/articles Founded in 1998, The Web Standards Project (WaSP) fights for standards that reduce the cost and complexity of development while increasing the accessibility and long- term viability of any site published on the Web. We work with browser companies, authoring tool makers, and our peers to deliver the true power of standards to this medium.standardsbrowser companiesauthoring tool makersour peers

4. Standards Organizations W3C - http://www.webstandards.org/learn/faq/#p21http://www.webstandards.org/learn/faq/#p21 – The World Wide Web Consortium (W3C) is an international industry consortium dedicated to “leading the Web to its full potential“. It’s led by Tim Berners-Lee, the inventor of the Web. Founded in 1994, the W3C has more than 450 member organizations – including Microsoft, America Online (parent company of Netscape Communications), Apple Inc., Adobe, Sun Microsystems, and a variety of other hardware and software manufacturers, content providers, academic institutions, and telecommunications companies. The Consortium is hosted by three research institutions – MIT in the US, INRIA in Europe, and Keio University in Japan.World Wide Web Consortiumleading the Web to its full potential member organizationsMicrosoftAmerica OnlineNetscape Communications Apple Inc.AdobeSun MicrosystemsMITINRIAKeio University

5. Standards Organizations What are the W3C Standards related to web design ? -- HTML 5 - – HyperText Markup Language – HTML 4.01 – HyperText Markup Language – XML 1.0 – Extensible Markup Language – XHTML 1.0, 1.1, and Modularization – CSS – Cascading Style Sheets – DOM 1 – Document Object Model Level 1 W3C HTML Working Group – http://www.w3.org/html/wg/ http://www.w3.org/html/wg/ – HTML 5 http://dev.w3.org/html5/spec/Overview.html

6. Standards Organizations The European Computer Manufacturers Association (ECMA) is an organization officially founded in 1961 in order to meet the need for standardizing computer operational formats, including programming languages and input/output codes.European Computer Manufacturers Association – ECMAScript (standardized JavaScript)

7. HTML Tutorials History of HTML – http://www.w3.org/People/Raggett/book4/ch02.html http://www.w3.org/People/Raggett/book4/ch02.html – http://www.yourhtmlsource.com/starthere/historyofhtml.html http://www.yourhtmlsource.com/starthere/historyofhtml.html HTML Tutorial – http://htmldog.com/guides/htmlbeginner/ http://htmldog.com/guides/htmlbeginner/ HTML Templates – http://www.webmonkey.com/templates/ -document structure http://www.webmonkey.com/templates/ – http://www.webstandards.org/learn/reference/templates/ - doctypes http://www.webstandards.org/learn/reference/templates/ – HTML 5 Overview http://www.webmonkey.com/tutorial/Building_Web_Pages_With_HTML_5 http://www.alistapart.com/articles/previewofhtml5 HTML Simulator – Use HTML simulator to see implementation: – http://www.practiceboard.com/ http://www.practiceboard.com/

8. Doctypes Templates Templates for Doctypes – http://www.webstandards.org/learn/reference/templates/ http://www.webstandards.org/learn/reference/templates/ HTML 4.01 Templates HTML 4.01 Transitional Document HTML 4.01 Strict Document HTML 4.01 Frameset XHTML 1.0 and 1.1 Templates XHTML 1.0 Transitional Document XHTML 1.0 Strict Document XHTML 1.0 Frameset XHTML 1.1 Document

9. Coding Environment Text Editor – Notepad, Notepad++ or your choice Dreamweaver, Photoshop and Adobe Products Firefox and add-ons – Firefox http://www.mozilla.com/en- US/firefox/personal.htmlhttp://www.mozilla.com/en- US/firefox/personal.html – Firebug http://getfirebug.com/http://getfirebug.com/ – FireFTP http://fireftp.mozdev.org/http://fireftp.mozdev.org/ – SourceChart https://addons.mozilla.org/en- US/firefox/addon/655/https://addons.mozilla.org/en- US/firefox/addon/655/ – Web Developer https://addons.mozilla.org/en- US/firefox/addon/60/https://addons.mozilla.org/en- US/firefox/addon/60/

10. HTML/CSS Validators Run your code through the W3C validator. – Subjective Pay attention to the errors but, it is not necessary to correct all of them Be sensible: if your page has over 100 errors then it is not a good page If your page has six errors and you know why they are occurring then it may be acceptable http://validator.w3.org/

11. Absolute/Relative Linking Absolute and Relative Linking – http://www.motive.co.nz/glossary/linking.php http://www.motive.co.nz/glossary/linking.php – Absolute Uses a fully qualified URL: – http://www.sis.pitt.edu/~perkoski/is1052/images/dog.jpg http://www.sis.pitt.edu/~perkoski/is1052/images/dog.jpg – Ok, don’t click there is no dog this is just an example. – Relative The destination href is relative to the source document – If source document is in 1052 directory (folder) – href=“/images/dog.jpg” Can move up directories by using.. So, if source document lives in images then files living in is1052 can be referenced by href=“../filename” – Use relative linking for documents on your machine and absolute linking for documents outside

12. Resources Comprehensive List of resources – http://www.alvit.de/handbook/ http://www.alvit.de/handbook/ Massive list of web development tools – Cheat sheets are particularly helpful http://www.addedbytes.com/cheat-sheets/css-cheat- sheet/ http://www.addedbytes.com/cheat-sheets/css-cheat- sheet/

13. Homeworks All homeworks will be posted on your webpage for the class at www.pitt.edu/~username/1052 www.pitt.edu/~username/1052 – Create a file called index.html and place it in this directory All homeworks are due in one week at the start of the class. Your homework page should be: – Neat – Well organized – Easily understood – Have your NAME All homeworks will reference the homework number and possibly title. Example: www.sis.pitt.edu/~perkoski/is1052/Homeworks/template.html www.sis.pitt.edu/~perkoski/is1052/Homeworks/template.html