nickelfox (1)

1
Fundamentals ofWeb Design
2
What Well Cover

• FTP - why it should be the first tool in your web
  developer toolbox.
• HTML basics, what's involved in writing it and
  understanding the basic elements of a webpage.
• Cascading Style Sheets (CSS) and how they control
  the presentation of HTML.
• 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.

3
But first, some background...

• Basics of how the web works and how your website
  fits into the big picture.

4
Basic HTML pages flat website
Domain Registry
Domain Name Registrars
Domain Name Resolver
Internet Service Provider
HTTP request www.sitename.com
User
Host
IP address 00.00.00.00
Web Page
HTTP response
Advantages Speed / Flexibility Disadvantages
Labor-intensive / navigation issues
5
Database-driven website
Domain Registry
Domain Name Registrars

• CMS Content Management System
• WordPress
• Drupal
• Joomla
• many more

DNR
ISP
HTTP request www.sitename.com
User
Host
IP address 00.00.00.00
PHP Scripts
Web Page

• LAMP
• Linux
• Apache
• MySQL
• PHP

HTTP response
MySQL Database
Advantages Automation of navigation, easy to
change overall site design (theme) Disadvantages
Speed / Server Load / Script conflicts (plugins)
6
FTP

• FTP File Transfer Protocol
• This is the method youll use to move files to
  and from your host.
• The better the tool integrates with your
  computer, the easier it will be to publish your
  site changes.
• There are web-based tools but Ive found them
  inefficient.
• Higher-end tools like Interarchy are blazing fast
  and support all the special cases youll run
  into. dot files being one of them.
• Tight integration with your text editor can make
  editing easier.
• Can be used to change file permissions.

7
Examples of FTP Programs

• For Mac
• Interarchy(http//nolobe.com/interarchy/)
• Cyberduck(http//cyberduck.ch/)
• Transmit(http//www.panic.com/transmit/)

• For PC
• WS-FTP(www.ipswitchft.com/)
• FTP Explorer(http//www.ftpx.com/)
• Smart FTP(http//www.smartftp.com/)

8
FTP in the scheme of things
HOST
HOST
Web Page
Web Page
http
F T P
Edit/Previewwithin tool
F T P
Browser View
Editor on local PC
Text editor / freestanding FTP
Dreamweaver / IDE
9
GUI EDITORS - WYSIWYG

• Dreamweaver
• Beginners always seem to start with this. Its a
  great tool.
• The preview isnt quite right, its slow, its
  big, its expensive.Has a built-in FTP tool.
  Tight integration with Adobe CS.
• 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.

10
TEXT EDITORS
For Mac BBEdit(http//www.barebones.com) Text
Wrangler(http//www.barebones.com) SubEthaEdit(
http//www.codingmonkeys.de/)
For PC NotePad(notepad-plus.sourceforge.net/)
Crimson (www.crimsoneditor.com) jEdit
(http//www.jedit.org/)
11
HTML BASICS
HTML Hyper Text Markup Language HTML is a
markup language. It consists of TAGS ltbgtThis
is boldlt/bgt - looks a lot like the pre-WYSIWYG
wordprocessor WordStar. Browsers interpret and
present the markup code. Tags generally open
and close except for single-element tags
likeltimggt, ltbrgt and lthrgt. Images and link paths
can be absolute or relative demo For many
years HTML page design was done using the lttablegt
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 changeswith minor edits.
12
HTML PAGE ELEMENTS
DOCTYPE Rendering rules for HTML HTML
Beginning of hypertext HEAD Title / Links /
Scripts / Meta BODY The visible content of the
page
13
Anatomy of an HTML page
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http//www.w3.org/TR/html4/strict.dtd"gt lthtmlgt
ltheadgt lttitlegtPage Titlelt/titlegt
ltlink rel"stylesheet" href"/resources/my_styles
.css" media"all"gt ltscript
src"/resources/js/my_script.js"
type"text/javascript" language"javascript"gtlt/scr
iptgt ltmeta name"keywords" content"dog,
cat, bird, mouse, platypus"gt lt/headgt
ltbodygt ltdiv id"pagewidth"gt
ltdiv idbanner"gtPage Bannerlt/divgt
ltdiv id"wrapper" class"clearfix"gt
ltdiv id"twocols" class"clearfix"gt
ltdiv id"maincol"gtMain Content
Columnlt/divgt ltdiv
id"rightcolgtRight Columnlt/divgt
lt/divgt ltdiv id"leftcol"gtLeft
Columnlt/divgt lt/divgt ltdiv
id"footer"gtFooterlt/divgt lt/divgt
lt/bodygt lt/htmlgt
14
pagewidth
banner
wrapper
Two cols
leftcol
rightcol
maincol
footer
15
CSS CASCADING STYLESHEETS
Definitions of STYLES for HTML Elements Rather
than ltpgtltfont size3gtDoo Dahlt/fontgtlt/pgt (as
inline style)ltp stylefont-size12pxgtDoo
Dahlt/pgt (as line in stylesheet)p
font-size12px Can also refer to DIVisions of
a page. (live demo)
16
CSS Cheat Sheet

• http//www.lesliefranke.com/files/reference/cssche
  atsheet.html

17
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
18
JAVASCRIPT

• Common uses
• Form validation check user input before
  submission
• Popups
• Hide/show page elements
• Image rollover swaps
• Javascript can be placed in
• A command within a tag (MouseOver)
• The ltheadgt portion of a document
• The ltbodygt portion of a document
• An externally-referenced file
• Frameworks many commons functions are available
  as frameworks

19
FLASH

• Flash allows the presentation of scalable,
  vector-based information.
• It has numerous advantages but is not intended as
  a primary toolfor constructing general-purpose
  websites.
• Heres a few drawbacks
• How do you bookmark your location? Not supported
  all navigation is absolute and programmatic.
• Requires an add-on to the browser. Largely
  supported but can be issue.
• Complex animations can run slowly on low-end
  machines, yielding low framerates and jerky
  display.
• Flash is a great tool to present an animated
  piece of content but care should be taken to
  factor in user issues if the entire site will be
  built in it.

20
PHP and ASP the dynamic duo

• PHP Hypertext Preprocessor a language
  designed to create HTML using programming logic
• ASP Active Server Pages the Microsoft version
  of PHP.

21
Information Architecture

• The blueprint that describes how information is
  organized and structured.
• The relative position of files and folders
• The concept behind your navigation

22
about.html contact.html index.html links.html map.
html product_list.html products (directory)
product1.html product2.html . .
. product-x.html staff.html store
(directory) order.html validate.js
23
LEARNING RESOURCES
HTML Tutorial (http//www.w3schools.com/html/) HTM
L Reference (http//www.w3schools.com/tags/) HTML
Validator (http//validator.w3.org/) HTML Cheat
Sheet (http//www.webmonkey.com/reference/HTML_Che
atsheet) CSS Tutorial (http//www.w3schools.com/cs
s/) WestCiv CSS Guide (http//www.westciv.com/styl
e_master/academy/css_tutorial/) CSS Cheat Sheet
(http//www.addedbytes.com/cheat-sheets/css-cheat-
sheet/) CSS Layouts Step-by-step
(http//www.webreference.com/authoring/style/sheet
s/layout/advanced/) Javascript Tutorial
(http//www.w3schools.com/JS/default.asp)
24
TOOLS
4096 Color Wheel (http//www.ficml.org/jemimap/sty
le/color/wheel.html) CSS Creator
(http//www.csscreator.com/version2/pagelayout.php
) Layout-o-matic (http//www.inknoise.com/experim
ental/layoutomatic.php) Little Boxes
(http//www.thenoodleincident.com/tutorials/box_le
sson/boxes.html) Entity Lookup
(http//www.digitalmediaminute.com/reference/entit
y/index.php) Stu Nicholls (http//www.cssplay.co.
uk/) Firebug (https//addons.mozilla.org/en-US/fi
refox/addon/1843)
25
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.word
press.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)
26
Nickelfox Technologies www.www.nickelfox.com