Lecture 9 Professional Practices

Comp112 Lecture 7, Semester , Year

Lecture 9:Professional Practices

SFDV2001Web Development


What are professional practices?

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.


Web browsers will display any old rubbish.


• 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.

CodeThere are many things that indicate quality code:

CommentsDevelopers who take the time to properly document their work make their lives, and the lives of others, much easier.

Avoid stating the obvious:

<table>

<tr> …

Assume that any person reading your code understands basic HTML.

Use your comments to document what isn't obvious:

When code is used for something other than its standard purpose.

<form method="get" action="/bin/search">

<table border="0"><tr> …

To explain where new content should be added:

<h1>Notices</h1><h2>13 March 2007</h2> …

To explain any code 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:



LayoutLayout 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.


Use tabs to indent the different levels of your code:

Top level startSecond level start

Third level start…

Third level finish Second level finish

Top level finish

<table><tr>

<td><p>Content</p>

</td></tr>

</table>


EfficiencyAsk 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.


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>

FontsIf 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


ImagesUse correct width 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."


Image size and the web

Dialup (56k modem) = 56 kilobits 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.


Image CompressionThe two 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.


JPEG (JPG)• 24 bit 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.


Comparison - photos

jpg 2.8KB

gif 2.3KB

png 5.1KB


Comparison - drawn images

jpg 1.7KB

gif 3.3KB

png 3.1KB


StandardsAny professional worth 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”>


ValidationUse a validation 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.


Spelling and grammarNothing suggests a sloppy attitude quite like failing to take the time to proof read the content of your pages.


Don’t forget the text in your <title>, alt, etc.

Use a spell checker to help, but don’t rely on it alone.


TestingCheck and double-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.


InvolvementKeep up with 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/)

http://alistapart.com/



http://www.digital-web.com/

http://www.stylegala.com/



http://www.w3.org/Mail/


It’s very important to 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 RobinsonContributing Writer and Former Editor In Chief of Digital Web Magazine.


PlagiarismThe use of 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.


it is legal for 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

http://en.wikipedia.org/wiki/Plagiarism

http://en.wikipedia.org/wiki/Wikipedia:Copyrights


The World Wide Web 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.”


Copyright InfringementThe unauthorised use of copyrighted material.

It is illegal to use copyright material without the owners permission.

Assume copyright until informed otherwise.


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


Additional recommended site:

The Web Standards Project:http://www.webstandards.org/

http://www.webstandards.org/

Lecture 9 Professional Practices

Education

Transcript of Lecture 9 Professional Practices