Intro Lect-Des 117

Welcome
Design 117
1
“Designing for the Web is a wonderful
thing. The ability to publish something
and have it appear immediately and
globally is an empowering feeling.”
J. Hicks-Essentials of HTML and
CSS Web Design!
2
Webness (did you know?)
How many sites and pages are there?
123,071,648 sites (active domains com, org, net, biz) over 20 billion pages were indexed by search engines
How many people use the web? (statistics)
1,966,514,108 worldwide users
What’s the most popular site worldwide?
What’s the most popular browser?
What’s the most significant trend in web usage?
What share of web traffic is from mobile devices?
What’s trending and how will it affect how we
design?
More Mobile Devices
How we interact with devices is
changing
Voice Control
Motion Control
Mind Control?
DES 117-Learning Outcomes
Understand web technology and terminology
Hand-code in html5 and css3 using
TextWrangler or similar text editing tool
(TextEdit Mac or Wordpad PC)
Learn to use and manage web design process
Evaluate and incorporate usability and
accessibility in your work
Focus on user experience
DES 117-How We’ll Do It
Daily lectures, demonstrations and exercises
Three primary projects
Quizzes on readings and key technology skills
Build a “site” a day!
What You’ll Need
Text-HTML5 and CSS3 Visual Quickstart
Guide-Castro/Peachpit press
Memory Stick-4-8G(min-to save all your files)
Energy and determination-we won’t let the
coding get you down!
Ready to build at least one “website” a day!
Our Class Website!
http://graphcitactics.com
Complete Survey in Dreamweaver
save as index.html on desktop
&
Take photo “Mug Shot” during break
The Internet and WWW
How long has the web been around?
1973
1977
-m
ai
l
TC
Pr P/I
ot P
oc T
ol ran
s
sm
W
is
si
W
on
W
Ti
m
Be
rn
Co
er
m
sm
Le
er
e
ci
al
iz
at
io
n
60
0
Fi
rs
tE
et
w
G
1969
lo
ba
lN
T
AR
PA
NE
Pa
ck
et
Sw
itc
hi
ng
or
ki
ng
D
em
o
si
te
s
Internet Timeline!
1982
1991
1993
HTML 4.0-1999
CSS 2
1999-2014
2003-2010
Google-2004
Facebook-2004
YouTube-2006
Web 2.0
Mobile Devices
HTML 5/CSS3
Expanded
Domains
!
!
Are the web and the internet the same thing?
The World Wide Web is one service on the
Internet...
internet services
!
World Wide Web (http-hypertext transfer protocol)
!
E-mail (smtp simple mail transfer protocol)
!
FTP (file transfer protocol)
!
VOIP-(voice over internet protocol)
!
Telnet-connects computer devices
!
Check This Out!
web process
Create files on your computer using html using a simple text editor
!
Send files to your server using FTP (File Transfer Protocol
!
Users type in a Uniform Resource Locator (URL) to see pages
What’s In A Name.....er’ URLext
http://www.graphictactics.com/des117/wtr14/john
URL-Uniform Resource Locator
url
http://www.graphictactics.com/des117/wtr13/
domain
directory
Important terms you’ll become very familiar with......
html-hypertext markup language
!
css-cascading style sheets
!
javascript-scripting language for higher level interactivity
!
jQuery-popular javascript library often used by designers
!
wordpress/drupal/joomla-content management systems
!
php-scripting language for making dynamic web pages
!
!
!
browsers (chrome, safari, firefox, opera, explorer)-interpret html,
css and javascript code
!
protocols-these are the rules that define how we communicate
and transfer information on the internet
!
servers-centralized computers that store/serve our files
!
What’s a server?
Hosts domains and web content & “serves” page when queried
Content is sent to the server using FTP client (Cypberduck, Transmit,
Bitkinex)
You’ll learn how to FTP to our server today!
Editing and uploading your survey webpage
!
• Download survey.html and survey instructions
from class folder Des117-Driscoll
!
• Open survey.html in Dreamweaver !
(like a word processor) answer the questions and save on
your desktop as index.html
!
• Transfer completed survey to your webspace
!
• design.omsoft.com
username: you have one!
password: got one of those too!
We’ll go over file transfer protocol.....SFTP
You’ll Become A Code Warrior Using A Text Editor
!
• Text Editors (text wrangler, textedit (mac) or wordpad
(pc) text editors can write in unformatted style with no
extraneous mark-up
!
• TextWranger is free for Mac-we’ll use in class
!
• Download textsample.html
!
• We’ll demo textwrangler and text edit
!