Tools For Web Authoring
Web authoring doesn't happen in a vacuum. You need to have specific tools in place so you can code efficiently. There are a number of products on the market – free, shareware, and commercial, and they have their place. This book will focus on free tools that let you hand code from scratch. Eventually you may choose one or more commercial tools, and certainly work with them in employer settings. However, for the purpose of web authoring boot camp tasks we'll be using basic free tools.
Text Editors
A text editor is a program used for editing plain text files. A plain text file is represented and edited by showing all the characters as they are present in the file. The only characters usable for ‘mark-up' are the control characters of the used character set; in practice this is new line, tab and form feed. The most commonly used character set is ASCII, especially recently, as plain text files are more often being used for programming and configuration, and less frequently for documentation (e.g. detailed instructions, visitor guides) than in the past.
Some text editors are small and simple, while others offer a broad and complex range of functionality. Some text editors include specialized computer languages to customize the editor (programmable editors), and some include source code syntax highlighting and automatic completion to make programs easier to read and write. Programming editors often permit one to select the name of a subprogram or variable, and then jump to its definition and back.
Typical features
• Cut, copy, and paste: Most text editors provide methods to duplicate and move text within the file, or between files.
• Text formatting: Features are available like line wrap, auto-indentation, bullet list formatting, comment formatting, and so on.
• Undo and redo: As with word processors, text editors will provide a way to undo and redo the last edit.
• Search: You can often search and replace strings of info with other info.
• Data transformation: Reading or merging the contents of another text file into the file currently being edited.
• Filtering: Some advanced text editors allow the editor to send all or sections of the file being edited to another utility and read the result back into the file in place of the lines being “filtered”.
• Syntax highlighting or coloring: this contextually highlights software code and other text that appears in an organized or predictable format.
• View in browser: Many text editors have a command that allows you to open the current file into your computer's default browser. You may even be able to change the default browser for the editor program.
• Code formatting: you should be able to wrap long lines of code, and to turn on line numbers to help you with troubleshooting validation errors.
• A good text editor will have other simple features, like macros, snippet saving, encoding and file formats, printing, and FTP interface.
QuickLook
Mac, PC, and Linux Text Editors
Here are a few free text editors. Just search online and download, install, and explore.
• Aptana Studio
• BBEdit Lite
• ConTEXT
• Crimson Editor / Emerald Editor
• Komodo Edit
• Notepad+
• NoteTab Light
• TED Notepad
• TextWrangler
Browsers
You will need at least one web browser on your computer to review your code output, test layout differences from other browsers, etc.
Although browsers are primarily intended to access the World Wide Web, they can also be used to access information provided by Web servers in private networks or files in file systems. This means you can look at your coded pages locally, even before you upload them.
You should download and use at least the current Internet Explorer, Fire fox, Chrome, and the previous version of Internet explorer. If you have a Mac, you should have Safari available.
Mobile Device Testing
Currently, Opera is the only regular browser that also can show how your website will be viewed on mobile devices. More microbrowsers have been developed to work with mobile phones, but most are proprietary to the mobile device and you can't test web page views with them on your computer.
You can also find a website, like http://mobiready.com/, which can run a virtual test from a live URL. Also, the W3C has an available W3C mobile OK Checker which shares errors and concerns but does not show the actual web page image on a virtual mobile device image.
File Transfer Protocol (FTP)
File Transfer Protocol (FTP) is a standard network protocol used to copy a file from one host to another over a TCP/IP-based network, such as the Internet. FTP is built on a client-server architecture and utilizes separate control and data connections between the client and server. FTP is used with visitor-based password authentication or with anonymous visitor access. Essentially, FTP is just like transferring your files from your USB Flash drive to your computer – only you need to log into someone else's computer so you can transfer your files there.
How it Works
FTP is easy. Once you log into the Web host computer and reach the directory where you website files should go, you just drag and drop your files from the local (your) computer to the remote (web host) computer. You should receive a prompt asking if you want to overwrite existing files, if you have already placed files there. If you want to update with the new files, choose yes.
While FTP interfaces have their differences, the commonalities include:
• Left Pane = Local files (your computer).
• Right Pane = Remote files (web host computer).
• Left and Right side folder views must be exactly the same on each side before you transfer files.
• File names should ALWAYS be all small text - no capital letters.
FTP Programs
Here are a few FTP client programs. Just search online and download, install, and ex- plore.
• Cyberduck
• Filezilla
• winSCP
• Fetch (for Mac, not free)
• FreeFTP
• FireFTP
Website Host
A web hosting service is a type of Internet hosting service that allows individuals and organizations to make their own website accessible on the Web. Web hosts are companies that provide space on a server they own or lease for use by their clients as well as providing Internet connectivity, typically in a data center. Web hosts can also provide data center space and connectivity to the Internet for servers they do not own to be located in their data center, called colocation.
The host may also provide an interface or control panel for managing the Web server and installing scripts as well as other services like e-mail. Some hosts specialize in certain software or services (e.g. e-commerce). They are commonly used by larger companies to outsource network infrastructure to a hosting company.
Code Validation
The Markup Validation Service by the World Wide Web Consortium (W3C) allows Internet visitors to check HTML documents for conformance to HTML or XHTML standards. It also provides a quick method for web page authors to check their posted pages for mark- up errors. You need to get into the habit of doing this for all your web work so that your websites have the best chance of working properly on different browsers.
As for every language, HTML and XHTML have their own grammar, vocabulary and syntax, and every document written with these computer languages are supposed to follow these rules. However, just as texts in a natural language can include spelling or gram- mar errors, documents using markup languages may (for various reasons) not be following these rules. The process of verifying whether a document actually follows the rules for the language(s) it uses is called validation, and the tool used for that is a validator. A document that passes this process with success is called valid.
With these concepts in mind, markup validation can be defined as the process of checking a web document against the grammar (generally a DTD) it claims to be using.
HTML validators operate by comparing the mark-up on a web page to the W3C standards. The standards vary depending upon the declared doctype version and so the validator will start by reading the doctype declaration to see which set of standards to apply.
Once the validator has read the page and determined the applicable standards it looks for such things as missing opening or closing tags, missing quotation marks and other hand- coding errors. The validator then provides a report indicating that the coding is correct or not. Errors are noted in a list.
Professional Practices
The busier you get, the less time you will have to build everything from scratch. There- fore, you should create a template directory in your web authoring file area where you can keep reusable information. Just have stuff ready to grab and go!
Placeholders
You will often, in building a web page template, need to add placeholder text and images while you wait for the real thing from clients or design team members. Here are some tips:
• Use Lorem Ipsum: Lorem ipsum text is placeholder text (filler text) commonly used to demonstrate the graphic elements of a document or visual presentation, such as font, typography, and layout. The lorem ipsum text is typically a section of a Latin text by Cicero with words altered, added and removed that make it nonsensical in meaning and not proper Latin. You can find free sources and generators online: http://www.lipsum.com/.
• Images: Create placeholder image boxes of several sizes. You should have standard thumbnail, small, medium, large, and screen-wide placeholder image boxes at your fingertips so you can place them in place of pending images. Consider the dummy image generator: http://dummyimage.com/.
Code Snippets
As you discover code items that you consistently reuse, make sure to capture this code and save it in an HTML file you can grab it from.
• Doctype
• Meta tags
• Cascading style rules
• Table layouts
• Footer code starters
• Disclaimer text
• Sitemap page starters
• Full-page code templates
• Cascading style sheets
• Script libraries
Cheat Sheets
There is so much to cover for HTML and CSS styles that you really could use a reference book to get all the detail we can't cover here. However, you can save yourself a few bucks by making sure you get a few free cheat sheets that are online. You should use a search engine to look for the following sheets. You can also try http://www.cheat-sheets. org/ although there are no promises as to how long that link will be active.
• HTML 4.0 Cheat Sheet
• XHTML 1.0 Cheat Sheet
• CSS2 Cheat Sheet
• CSS Shorthand Cheat Sheet
• Web Safe HEX Colors
• HTML Characters