Transcript Introduction to CSC110

CSW131 - Chapter 1
The Tools of Web Design and Planning Your Site
Prepared by Prof. B. for use with
Teach Yourself Visually Web Design
by Ron Huddleston, Wiley
1
Overview: Material Covered
 (X)HTML – Creates Web page structure (and
content)
 Written with XML, which is used to create
markup language
 CSS – Controls Web page appearance
 JavaScript – Helps with Web page
interactivity
 We may cover other material as time allows
2
Overview (cont.): Objectives
 Create professional looking Web pages with
good code
 Make pages available to the largest
audiences possible
 Get Search Engines to recognize your
Website
 You will create a new, original website as a
significant part (30%) of this course
3
Overview (cont.): “W3C”
 “W3C”, a.k.a., the World Wide Web
Consortium (W3.org) creates and
maintains HTML, XHTML, and CSS
standards, as well as graphics formats.
 Founded by Tim Berners-Lee in 1994
 This is THE main reference for anyone in
this field, and we will use the current W3
recommended standards in this class.
4 (back)
Overview (cont.): Courses Requirements
 Internet browser (the main players)
 1 Chrome; 2 Firefox; 3 IE; 4 Safari; 5 Opera
(IE not available for Mac OS)
 Your website should look and work “the same”
for major browsers and platforms (PC, Mac, etc.)
 Text editor
 Notepad (Win)
 Notepad++ is a free “upgrade” of Notepad
 TextEdit (Mac) – it is strongly advised to use Win
5
A Brief History of the Web (pp. 4-5)
 The Invention of the Web
 Invented by Tim Berners-Lee in 1990, a Swiss scientist as a way to
exchange notes because colleague’s computers were
incompatible.
 The Invention of the Internet
 Much of the early funding was by the US military (defense
department) during the 1960s Cold War.
 The Web versus the Internet
 They are NOT one and the same…
 The Web is an “application” that runs on the Internet, just as Email
is another separate application.
 Protocols (Rules for 2 devices to communicate)
 TCP/IP “suite” for the Internet (implemented 1970s)
 HTTP for the Web (Hypertext Transfer Protocol; http://www...)
 The Web Expands through the mid-1990s
 W3C (slide 4)
 The Web Today
 After only about 20 years, millions of sites with trillions of pages!
6
Understanding Browsers (pp. 6-7)
Browsers (Firefox, etc.) interpret web pages (created
using text-like HTML) and display them on your screen.
WWW: The First Browser
 Tim Berners-Lee saw this as a tool to both view and create pages.
NCSA Mosaic
 Marc Andreessen (Mosaic designer) starts Netscape Navigator.
Microsoft’s Internet Explorer
 A free version of a browser, marketing as part of Windows OS
Mozilla Firefox
 Created using the open source code used to create Navigator.
Safari and Chrome
 Apple & Google browsers created with WebKit open source code.
Opera
 Was very popular among the technically inclined, but has waned.
Browser Differences, The Mobile Web, and New
(Upgraded) Browsers cause us web design challenges…
7
Visual Design and Code Based Tools (pp. 8-9)
Visual design tools minimize web page coding.
Dreamweaver (Adobe) is king (PASSHE discounts)
 Bought from Macromedia, current version is CS6 – we have CS3
Microsoft Expression Web: a distant competitor (free)
Legacy Programs
 Microsoft FrontPage had 70% of the market (RIP 2003)
 Before Adobe bought Dreamweaver, they had GoLive (RIP 2008)
Code-based tools are for writing all code (how we’ll start)
Notepad, Notepad++, and TextEdit
Many designers use Dreamweaver, etc., for pure code
Eclipse is an open-sourced toolset with many plug-ins
HomeSite (came with Dreamweaver, RIP 2009) is still used
Note: We will use a Dreamweaver-like tool as we progress
8
Graphics Programs (p. 10)
Critical for new or existing images or photos. Key uses in
resizing, cropping, touchup, editing, opacity levels, etc.
Image/photo size (optimizing) matters for load times!
 Large file, e.g., 2.5MB (2,500Kb vs. 9Kb) loads much slower.
Photoshop (Adobe) is images king (PASSHE discounts)
 Current version is CS6 – we have CS3
Adobe Illustrator is vector-based drawing king
Adobe Fireworks is favorite of web designers
 Originally a Macromedia competitor to Photoshop and Illustrator,
this product came over when Adobe bought it.
Corel Draw is a Windows only competitor to Illustrator
GIMP (gimp.org) is Photoshop-like, free, and open-source
Adobe Photoshop Elements is a “lite” Photoshop
 While “inexpensive”, students can purchase Photoshop for less!
9
Understanding the Importance of Planning Your Site (p. 11)
BEFORE a designer jumps on a computer and starts a new
website, “planning on paper” is critical for success – a site
that is popular and may actually be found in searches.
Brainstorm Design Concepts
 Virtually anything can be accomplished (time & money are factors)
Wireframe the Design
 Simple website structure and layout
Storyboard Pages
 More details down to the page level
 For this class, at least 5 main (navigation) level pages
Develop a Timeline for Completion
 You will present your website the last 3 classes of the semester
 The best student websites are created THROUGHOUT the semester
Start thinking about your website topic NOW!
 HINT: Pick a personal passion, yourself or need for friends/family.
10
Understanding Your Audience (p. 12)
 Market Studies
 Just as important for websites as “brick and mortar” businesses
 Demographics
 Understanding your potential audience (age, education, etc.)
 Local Businesses with Global Customers
 Will you ship globally, present pages in multiple languages, etc.?
 There are free language translators
 Something to think about . . .
 Why should someone visit your site? What’s in it for them?
 Why should visitors come back to your site?
 CONTENT is KING --“hits” by search engines are heavily
influenced by it. Relevanance and or reference worthy items.
 Example: Concord Travel
11
Gather Your Materials (p. 13)
Keep Everything Organized
 Root Folder – will hold all of your site’s resources
 Minimal CSW 131 contents are pages and an images folder
 Images
 It is fine to use your OWN images/photos, but you MUST avoid
using images you do not own or do not have permission to use.
 Be aware your original art, photos, etc., can be copied/stolen…
 LEGITIMATE, royalty free stock photos are a good, cheap option
 Check istockphoto, fotolia, gettyimages, etc. (not Microsoft)
 Multimedia Assets
 Audio and video assets can take considerable time to prepare
and work properly on your site – these require advance planning.
 Source Documents
 Many companies have materials already prepared
 For personal sites, prepared (X)HTML and PDF resumes are best
12
Plan Your Navigation Structure (p. 14)
Ease of use and consistent; obvious navigation matters . . .
 Main Navigation
 EASILY accessible from ALL web pages
 Home, About, Contact, etc., are common “level 1” pages
 Section Subnavigation
 Links WITHIN a section
 Detail pages under level1 pages, e.g.:
 Design &Grading pages under landscaper’s level1 “Services” page
 Images page under photographer’s level1 “Portfolio” page
 Think like Users
 Make your site USER-centric; it need not follow file structure
 Test navigation with typical users without instructions
13
Plan Your File Structure (p. 15)
Again, keeping your materials organized makes your life
easier. File/folder names that are meaningful to you
work well, but letter case matters, and use NO spaces.
 Organizing Below the Root
 Be consistent in the way you organize
 Level 1 pages on root works well, but use individual preferences
 Naming Folders
 These are visible to users within the URL and should make sense
 Names must start with a letter and have no spaces
 Images Directory
 There is usually an images folder on the root directory, but again,
individual preferences are fine as long as they are logical
 You will have to reference your images, so KISS principles apply
 Other Assets
 Multimedia is a good folder for audio and video files
 Style sheets (CSS we will learn) are usually on the root folder
14
To Do List
 Take a look at W3.org
 Buy the textbook
 Read chapter 1 (and accompanying posted and or emailed
notes on our class website)
 Buy a flash drive (no external drives)
 NEW -- NO tiny or old flash drives; Windows-dedicated
 NO SHARING
 BRING textbook & flash drive to all classes!
 We will start creating web pages
 Start thinking about your web site
 Pick a personal passion, yourself or need for friend/family.
 Note: MANY students keep & use site after course ends!
15