Fundamentals of Web Design - M. Douglas Wray

longtermsingularInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 4 χρόνια και 28 μέρες)

91 εμφανίσεις

What We’ll 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.

But first, some background...

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

Host

User

Web
Page

Domain

Registry

Domain
Name
Resolver

IP address

00.00.00.00

Internet

Service

Provider

Domain Name Registrars

HTTP request:

“www.sitename.com”

HTTP response

Basic HTML pages


‘flat website’

Advantages: Speed / Flexibility

Disadvantages: Labor
-
intensive / navigation issues

Host

User

Web
Page

Domain

Registry

DNR

IP address

00.00.00.00

ISP

Domain Name Registrars

HTTP request:

“www.sitename.com”

HTTP response

Database
-
driven website

PHP

Scripts

MySQL

Database

“LAMP”



L
inux



A
pache



M
ySQL



P
HP

CMS


Content Management System



WordPress



Drupal



Joomla



many more

Advantages: Automation of navigation, easy to change overall site design (‘theme’)

Disadvantages: Speed / Server Load / Script conflicts (plugins)

FTP


FTP = File Transfer Protocol



This is the method you’ll 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 I’ve found them inefficient.



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.



Can be used to change file permissions.

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/
)

HOST



FTP in the scheme of things

HOST



Editor on local PC

Web
Page

F

T

P





Edit/Preview

within tool

Web
Page

F

T

P

Text editor / freestanding FTP

Dreamweaver / IDE

Browser

View

http

GUI EDITORS
-

WYSIWYG


Dreamweaver


Beginners always seem to start with this. It’s a great tool.


The preview isn’t quite right, it’s slow, it’s big, it’s 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.

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/
)

HTML BASICS

HTML


Hyper Text Markup Language


HTML is a ‘markup’ language. It consists of TAGS: <b>This is bold</b>
-

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 like

<img>, <br> and <hr>.


Images and link paths can be ‘absolute’ or ‘relative’


demo


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

DOCTYPE


Rendering rules for HTML

HTML


Beginning of hypertext

HEAD


Title / Links / Scripts / Meta

BODY


The visible content of the page

Anatomy of an HTML page

<!DOCTYPE HTML PUBLIC "
-
//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>


<head>


<title>Page Title</title>


<link rel="stylesheet" href="/resources/my_styles.css" media="all">


<script src="/resources/js/my_script.js" type="text/javascript" language="javascript"></script>


<meta name="keywords" content="dog, cat, bird, mouse, platypus">


</head>


<body>


<div id="pagewidth">


<div id=”banner">Page Banner</div>


<div id="wrapper" class="clearfix">


<div id="twocols" class="clearfix">


<div id="maincol">Main Content Column</div>


<div id="rightcol”>Right Column</div>


</div>


<div id="leftcol">Left Column</div>


</div>


<div id="footer">Footer</div>


</div>


</body>

</html>

banner

footer

rightcol

maincol

leftcol

wrapper

Two cols

pagewidth

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; }


Can also refer to DIVisions of a page.

(live demo)

CSS Cheat Sheet

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


Javascript can be placed in



A command within a tag (MouseOver)



The <head> portion of a document



The <body> portion of a document



An externally
-
referenced file


Frameworks


many commons functions are available as ‘frameworks’

FLASH

Flash allows the presentation of scalable, vector
-
based information.

It has numerous advantages but is not intended as a primary tool

for constructing general
-
purpose websites.

Here’s 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.

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.

Information Architecture


The blueprint that describes how
information is organized and structured.



The relative position of files and folders



The ‘concept’ behind your navigation

Product ...

Product 2

Home

About

Contact form

Products

Map

Staff list

Links

Products

Order Form

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



LEARNING RESOURCES

HTML Tutorial (
http://www.w3schools.com/html/
)

HTML Reference (
http://www.w3schools.com/tags/
)

HTML Validator (
http://validator.w3.org/
)

HTML Cheat Sheet (
http://www.webmonkey.com/reference/HTML_Cheatsheet
)

CSS Tutorial (
http://www.w3schools.com/css/
)

WestCiv CSS Guide (
http://www.westciv.com/style_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/sheets/layout/advanced/
)

Javascript Tutorial (
http://www.w3schools.com/JS/default.asp
)



TOOLS

4096 Color Wheel
(
http://www.ficml.org/jemimap/style/color/wheel.html
)


CSS Creator (
http://www.csscreator.com/version2/pagelayout.php
)


Layout
-
o
-
matic (
http://www.inknoise.com/experimental/layoutomatic.php
)


Little Boxes (
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
)


Entity Lookup (
http://www.digitalmediaminute.com/reference/entity/index.php
)


Stu Nicholls (
http://www.cssplay.co.uk/
)


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
)



Boulder Digital Arts courses on installing, managing and customizing

(
http://www.boulderdigitalarts.com/training/details.asp?offering=216
)

(
http://www.boulderdigitalarts.com/training/details.asp?offering=217
)

(
http://www.boulderdigitalarts.com/training/details.asp?offering=235
)

Q & A

M. Douglas Wray


http://www.macwebguru.com


macguiguru@spamcop.net