Downloaded 13 times
More Related Content
Similar to Lecture 9 Professional Practices
Lecture 9 Professional Practices
- 1. Lecture 9: ProfessionalPractices SFDV2001 Web Development
- 2. What are professionalpractices? Making a web page isn't hard - anybody can get something on the web. Making quality web pages requires skill, requires a professional. Some professional practices are things that by law you should conform to. Others are the things that distinguish your work from that of an amateur. We expect professionals to possess significant skills, that they produce work of a quality not obtainable by an amateur and that their knowledge is significant.
- 3. Web browsers willdisplay any old rubbish.
- 4. No doctype No <html> tag No <head> , <title> or <body> tags No structural tags Multi-word face value not quoted Incorrect values for size No closing tags No alt etc. for image.
- 5. Code There aremany things that indicate quality code: Comments Developers who take the time to properly document their work make their lives, and the lives of others, much easier. Avoid stating the obvious: <!-- Table starts here --> <table> <tr> … Assume that any person reading your code understands basic HTML.
- 6. Use your commentsto document what isn't obvious: When code is used for something other than its standard purpose. <form method="get" action="/bin/search"> <!-- Table controls layout of search form --> <table border="0"> <tr> … To explain where new content should be added: <h1>Notices</h1> <!-- Model new notice code: <h2>Date</h2> <p>Notice</p> place new notice code here --> <h2>13 March 2007</h2> …
- 7. To explain anycode that may look a bit odd (though think very carefully about your code in these instances). To make identifying the key elements of your page structure easier: <!--Table controlling page layout --> <!-- Main navigation bar --> <!-- Text only navigation strip --> <!-- Page footer --> Layout Layout your code in a way that makes it easy to read. In the lab Taco will do this for you (with various degrees of success). You can, of course, alter Taco's attempt or forgo the automatic option altogether and do it manually.
- 8. Use tabs toindent the different levels of your code: Top level start Second level start Third level start … Third level finish Second level finish Top level finish <table> <tr> <td> <p>Content</p> </td> </tr> </table>
- 9. Efficiency Ask yourself- Is there a simpler, more elegant way of doing this? Tables: use rowspan and colspan instead of <br> or in cells. keep your tables as simple as possible - why use two when one will do? Is your table code really necessary? A single row, single cell table? Frames: - Take advantage of <base> where appropriate.
- 10. Alignment: Use align for single line centering and <center> for blocks of central alignment. <center><h1>Ice Cream</h1></center> Vs <h1 align="center">Ice Cream</h1> Fonts If you specify a specific font face, you should always provide a suitable generic font family name too: <font face="arial, sans-serif "> font-family: courier, monospace
- 11. Images Use correctwidth and height specifications. This enables the browser to layout the page correctly before the image has downloaded. Resize your images with graphic editing software not with your HTML code. Use good alt values - descriptive sentences. alt="Percy the cat." alt="Giraffe in hiking gear."
- 12. Image size andthe web Dialup (56k modem) = 56 kilo bits per second, not kilobytes! 56 kilobits = 7 kilobytes per second. So, a single 32KB image will take at least 4.5 seconds. "Broadband" starts at 256 kilobits (32KB per second) maximum. 1 megabit (1024 kilobits) broadband = 128KB per second max.
- 13. Image Compression Thetwo most common graphics formats, GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). Both represent image files in a compressed form rather than on a pixel by pixel basis. There is a third format, PNG (Portable Network Graphic) browser support used to be limited but is now (with the exception of IE) good. GIF Allows single pixel transparency. Suitable for flat colour images. Can be used for animations.
- 14. JPEG (JPG) 24bit RGB information. Suitable for material such as photographs and other continuous tone images. Not suitable for graphics with large areas of flat colour, as these will become blotchy. PNG PNG offers multiple transparency options. Single pixel transparency (like GIF). Alpha channel transparency (levels of opacity). Although most modern browsers support all PNG features, Internet Explorer doesn't support alpha-channel transparency in versions up to and including 6.
- 15. Comparison - photosjpg 2.8KB gif 2.3KB png 5.1KB
- 16. Comparison - drawnimages jpg 1.7KB gif 3.3KB png 3.1KB
- 17. Standards Any professionalworth their salt has a good understanding of the standards of their trade. Web developers are no different. HTML standards: - HTML 4.01 Transitional/Frameset/Strict XHTML 1.0 Transitional/Frameset/Strict XHTML 1.1 Use the right doctype for your code. <!Doctype HTML Public “-//W3C//DTD HTML 4.01 Transitional//EN”> <!Doctype HTML Public “-//W3C//DTD HTML 4.01//EN”>
- 18. Validation Use avalidation tool like the W3C's HTML validator Be aware that they can't check everything. You need to manually verify your code too. Validation tools won't check: Some values inside quotation marks. E.g.: <img src="test.jpg" alt="" width="banana" height="rabbit"> will pass in online validators. How sensible and/or efficient your code is.
- 19. Spelling and grammarNothing suggests a sloppy attitude quite like failing to take the time to proof read the content of your pages.
- 20. Don’t forget thetext in your <title> , alt , etc. Use a spell checker to help, but don’t rely on it alone.
- 21. Testing Check anddouble-check that all your links work. Before and after you upload to your web server. Test on every browser and operating system you can get your hands on. Test with different connection speeds. Test on different screen resolutions. Test on different monitor types. Usability testing.
- 22. Involvement Keep upwith what’s new in the field. There is always something to learn. For web development, one of the best way to stay current is to participate in and read the many quality web-based publications in the profession. A List Apart ( http:// alistapart .com/ ) Digital Web Magazine ( http://www.digital-web.com/ ) Style Gala ( http://www. stylegala .com/ ) Mailing Lists: W3C ( http://www.w3.org/Mail/ )
- 23. It’s very importantto note that, no matter how much you know, there is always more to learn. I don’t think there is any Web professional out there that will tell you they 100% “get” the Web, regardless of how long they’ve been at it. Things change too quickly and there is just too much to learn and know. If you take responsibility for the completeness of your education and make a commitment to life-long learning you’ll do just fine, regardless of what path you choose. - D. Keith Robinson Contributing Writer and Former Editor In Chief of Digital Web Magazine.
- 24. Plagiarism The useof somebody else’s work without acknowledgement. Can occur deliberately (with intent to deceive) and accidentally (without understanding). Acts of plagiarism can breech the law (intellectual property rights). It is perfectly possible to plagiarise “free” sources. In such instances the plagiarism is a moral and ethical issue but it is not illegal.
- 25. it is legalfor a student to copy several paragraphs (or even pages) of text from a public domain book, such as Lewis Carroll’s Alice’s Adventures in Wonderland, and then directly add this text to his or her own paper. If this text were not clearly identified as to his or her source, then the student would be guilty of plagiarism, using another writer's work as if it were his or her own. http://en.wikipedia.org/wiki/Plagiarism Wikipedia content can be copied, modified, and redistributed so long as the new version grants the same freedoms to others and acknowledges the authors of the Wikipedia article used (a direct link back to the article satisfies our author credit requirement). http://en.wikipedia.org/wiki/Wikipedia:Copyrights
- 26. The World WideWeb has made it very easy for us to access and copy material. It has also made it relatively easy for us to determine the source of plagiarised material. “ A redisigned site can advance a company's eBusiness strategy, help a company keep up with new technology standards, provide access to new applications and content, integrate with overall branding and user experience standards, and reduce Web site operating costs.”
- 27. Copyright Infringement Theunauthorised use of copyrighted material. It is illegal to use copyright material without the owners permission. Assume copyright until informed otherwise.
- 28.
- 29. Copyright and educationThe NZ Copyright Act 1994 allows individuals to copy portions of copyrighted material for research or study purposes. The act allows universities to make multiple copied of a copyrighted work within certain guidelines. New Zealand universities also have an agreement whereby they can exceed the number of copies permitted under the Copyright Act in certain circumstances. Materials sourced from the Internet are subject to standard copyright law. Alter to suit local law
- 30. Additional recommended site:The Web Standards Project: http://www.webstandards.org/
- 31.