websites unlimited - pay monthly websites

21

Upload: websiteunlimited

Post on 13-Jul-2015

80 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: Websites Unlimited - Pay Monthly Websites
Page 2: Websites Unlimited - Pay Monthly Websites

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.

Page 3: Websites Unlimited - Pay Monthly Websites

Basics of how the web works and how your website fits into

the big picture.

Page 4: Websites Unlimited - Pay Monthly Websites

Host

User

Web Page

DomainRegistry

Domain Name

Resolver

IP address00.00.00.00

InternetServiceProvider

Domain Name Registrars

HTTP request:“www.sitename.com”

HTTP response

Basic HTML pages – ‘flow of the website’

Advantages: Speed / FlexibilityDisadvantages: Labor-intensive / navigation issues

Page 5: Websites Unlimited - Pay Monthly Websites

Host

User

Web Page

DomainRegistry

DNR

IP address00.00.00.00

ISP

Domain Name Registrars

HTTP request:“www.sitename.com”

HTTP response

Database-driven website or Content Management System

PHPScripts

MySQLDatabase

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)

Page 6: Websites Unlimited - Pay Monthly Websites

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.

Page 7: Websites Unlimited - Pay Monthly Websites

HOST

Basic FTP Flow Chart

HOST

Editor on local PC

Web Page

FTP

Edit/Previewwithin tool

Web Page

FTP

Text editor / freestanding FTP Dreamweaver / IDE

BrowserView

http

Page 8: Websites Unlimited - Pay Monthly Websites

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.

Page 9: Websites Unlimited - Pay Monthly Websites

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

Page 10: Websites Unlimited - Pay Monthly Websites

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 BASICS(cont...)

Page 11: Websites Unlimited - Pay Monthly Websites

HTML PAGE ELEMENTS

DOCTYPE – Rendering rules for HTML

HTML – Beginning of hypertext

HEAD – Title / Links / Scripts / Meta

BODY – The visible content of the page

Page 12: Websites Unlimited - Pay Monthly Websites

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>

Page 13: Websites Unlimited - Pay Monthly Websites

banner

footer

rightcolmaincolleftcol

wrapper

Two cols

pagewidth

Page 14: Websites Unlimited - Pay Monthly Websites

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)

Page 15: Websites Unlimited - Pay Monthly Websites

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

Page 16: Websites Unlimited - Pay Monthly Websites

JAVASCRIPTCommon 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’

Page 17: Websites Unlimited - Pay Monthly Websites

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

It has numerous advantages but is not intended as a primary toolfor 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.

Page 18: Websites Unlimited - Pay Monthly Websites

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.

Page 19: Websites Unlimited - Pay Monthly Websites

Information Architecture

The blueprint that describes how information is organized and structured.

The relative position of files and folders

The ‘concept’ behind your navigation

Page 20: Websites Unlimited - Pay Monthly Websites

Product ...

Product 2

Home

About

Contact form

Products

Map

Staff list

Links

Products Order Form

about.htmlcontact.htmlindex.htmllinks.htmlmap.htmlproduct_list.htmlproducts (directory) product1.html product2.html . . . product-x.htmlstaff.htmlstore (directory) order.html validate.js

Page 21: Websites Unlimited - Pay Monthly Websites

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)