Professional Documents
Culture Documents
Fundamentals of Web Design
Fundamentals of Web Design
Fundamentals of Web Design
FTP - why it should be the first tool in your web developer toolbox.
Javascript and its role in user interaction, how it integrates and why
it matters.
Flash and what role it plays in presentation, interaction and the ups
and downs of using it.
PHP and ASP will be discussed in very general terms with an eye
toward use of dynamic pages and Content Management Systems.
But first, some background...
Domain
Domain Name Registrars
Registry
Internet Domain
HTTP request: Service Name
“www.sitename.com” Provider Resolver
User IP address
00.00.00.00
Web
Page Host
HTTP response
Web PHP
“LAMP”
Page Scripts
HTTP response
• Linux
Host • Apache
MySQL
• MySQL
Database
• PHP
This is the method you’ll use to move files to and from your host.
Higher-end tools like Interarchy are blazing fast and support all the
special cases you’ll run into. ‘dot’ files being one of them.
Tight integration with your text editor can make editing easier.
Interarchy WS-FTP
(http://nolobe.com/interarchy/) (www.ipswitchft.com/)
Web Web
Page Page
http
F F
Browser T
T
View P
P
Edit/Preview
Editor on local PC within tool
FrontPage
Very common starting point on PC. Solid and serviceable.
Deep integration with Windows OS.
Plain-text editor
Cheap. Fast. Efficient. Reliable. Trustworthy. Multi-platform.
My choice – BBEdit for the Mac.
Downside: not quite as ‘helpful’ as GUI apps.
TEXT EDITORS
For Mac: For PC:
BBEdit NotePad++
(http://www.barebones.com) (notepad-plus.sourceforge.net/)
Tags generally ‘open’ and ‘close’ – except for single-element tags like
<img>, <br> and <hr>.
For many years HTML page design was done using the <table> tag –
in the last decade CSS (Cascading Style Sheets) support in browsers has
improved to where object-oriented design techniques can be used,
separating design from content and allowing site-wide design changes
with minor edits.
HTML PAGE ELEMENTS
banner
wrapper
Two cols
footer
CSS – CASCADING STYLESHEETS
Definitions of STYLES for HTML Elements
Rather than:
<p><font size=“3”>Doo Dah</font></p>
(as inline style)
<p style=“font-size:12px;”>Doo Dah</p>
(as line in stylesheet)
p { font-size:12px; }
http://www.lesliefranke.com/files/reference/csscheatsheet.html
Javascript
JavaScript is an object-oriented scripting language used to enable
programmatic access to objects within both the client application
and other applications. It is primarily used in the form of client-side
JavaScript, implemented as an integrated component of the web
browser, allowing the development of enhanced user interfaces and
dynamic websites.
- Wikipedia
JAVASCRIPT
Common uses:
• Form validation – check user input before submission
• Popups
• Hide/show page elements
• Image rollover swaps
Layout-o-matic (http://www.inknoise.com/experimental/layoutomatic.php)
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843)
CONTENT MANAGEMENT SYSTEMS
WordPress Blogging Community – set up a free blog and get used to
using WordPress in a controlled environment before ‘self-hosting’
(http://www.wordpress.com)
WordPress Developer Community – once you have your feet wet, get
your own domain name and host, then roll your own look feel
(http://www.wordpress.org)