Where Do I Start ? No doubt, depends on your background and
goals Good first step: basic understanding of the Web and web pages
Many levels: web-site for yourself to full-time career For
full-time career, skills need to be at a professional level
Slide 3
What Does a Web Designer Do ? Web Design have become a
catch-all for a number of different careers Typical groups Content
strategy and creation: Support getting the content, message,
functionality to users Design: User experience, interaction, and
interface design how does web site look Development: Creation and
troubleshooting of documents, style sheets, images, etc.
Multimedia: Adding sound, video, animation to web sites
Slide 4
What Do I Need to Learn ? EVERYONE should know ( CSIS 1430 )
HyperText Markup Language ( HTML ) Cascading Style Sheets ( CSS )
JavaScript scripting JQuery ( or similar language ) Server-side
programming ( CSIS 2440 ) Advanced JavaScript and JSP ( CSIS 2470
)
Slide 5
What Do I Need to Have ? Equipment A solid, up-to-date
computer: Windows, Mac, or Linux A large monitor Software Windows:
Eclipse, NotePad++, TextPad, Sublime Text, NetBeans Mac: Eclipse,
TextMate, TextEdit File-Transfer Protocol: Filezilla, WS_FTP
Browsers Chrome, Firefox, Internet Explorer, Safari, Opera
Slide 6
How the Web Works
Slide 7
What is the Internet Used For ? Current usage is falling into
four areas Communication: eMail, Twitter, Instagram Business:
Business-to-Business, Business-to-Consumer, Consumer-to-Consumer
Recreation: no one plays any online games, do they ? Research and
Academic use
Slide 8
The Internet vs the Web Distinction between two words often
used almost interchangeably Internet Network of interconnected
computers Governed by a system of standards and rules Includes
email, FTP, other specialized modes Web Originally called the
World-Wide-Web Just one of the many ways information is shared
Slide 9
Internet History Cold War ( 1962 ): Military saw a need for a
redundant network to control ICBMs 1969: ARPA ( DARPA ) awarded a
contract for development of the network to UCLA, Stanford, UC Santa
Barbara, University of Utah Called ARPANet Grew to about 100 sites
Text Only
Slide 10
Internet History Original protocol could not find a new route
in middle of a message New Protocol: Transmission Control Protocol
( TCP / IP ) TCP: Message fragmented into individually routed
packets IP: Dynamic routing of packets, messages could arrive in
random order Demonstrated at International Computer Communications
Conference ( 1972 ) Xerox introduced EtherNet in 1980 standardized
in 1983 as IEEE 802.3 Several wiring and signaling variants of the
OSI physical layer
Slide 11
Internet History Mid-1980s: ARPANet turned over to National
Science Foundation ( NSF ) Divided US into 5 regions Used
supercomputer as hub 1987: faster lines / more powerful computers
Became NSFNet In 1989 Tim Berners-Lee ( at CERN ) saw an
opportunity to join hypertext with the Internet creating the World-
Wide-Web Text only
Slide 12
Internet History 1990: Metropolitan nets began feeding into the
NSF Net Networks were opened to IBM and MCI AOL began 1991:
Commercial Information Exchange ( CIX ) developed to allow for
commercial / profit uses Gopher ( search program ) developed by
Thinking Machines Inc Later Archie, Veronica, etc.
Slide 13
Internet History High Performance Computing Act of 1991 ( HPCA
) Built on developing a national networking infrastructure, ARPANET
in the 1960s and the National Science Foundation Network ( NSFnet )
in the 1980s. The renewed effort became known in popular language
as building the Information superhighway In 1992, led to Mosaic
being created by National Center for Supercomputing Applications (
NCSA ) University of Illinois Urbana-Champaign Was the first web
browser Credited with popularizing the World Wide Web Was a client
for FTP, NNTP, and gopher Named Mosaic for its support of multiple
internet protocols
Slide 14
Internet History Other Browsers Marc Andreessen, James H Clark,
and four other students and staff of the University of Illinois
started Mosaic Communications Corp which eventually became Netscape
Communications Corp, producing Netscape Navigator. Netscape was the
dominant web browser during the 1990s Apple Safari was released on
June 23, 2003 Microsoft licensed Mosaic in 1995 for $2 million,
modified it, and renamed it Internet Explorer Opera was first
released publicly with version 2.0 in 1996
Slide 15
Internet History Domain name allocation The Network Information
Center ( NIC ), also known as InterNIC From 1993 until 1998, it was
the Internet governing body primarily responsible for domain name
allocations. From 1972 until October 1, 1991, it was run by the
Stanford Research Institute ( SRI ) From Oct 1991 until Sept 18,
1998, it was run by Network Solutions After Sept 1998, the
responsibility was assumed by the Internet Corporation for Assigned
Names and Numbers ( ICANN )
Slide 16
Serving Up The Information Many applications can be run on the
Internet ( listing ports ) :80 HTTP: Web ( also :443 HTTPS: ) :25
:110 and :143 eMail :21 FTP: File Transfer Protocol to move files
from one device to another :22 SSH: Secure FTP :23 Telnet: Virtual
terminals :119 NNTP: Network News Transfer Protocol
http://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers Most
common to majority of users is the Web ( ports 80: and 443: )
Slide 17
Serving Up The Information Clients run Browsers Servers respond
to requests from the browsers Several server software applications.
Most common are Apache Internet Information Services ( IIS ) NGINX
( newer web server program ) Others
Slide 18
USER / CLIENT Internet SERVER HTML CSS ( Style Sheets )
JavaScript JQuery others PHP PERL Python Ruby MySQL Java others
Serving Up The Information
Slide 19
A Word About Browsers Servers do the serving Browsers do the
requesting Most popular include: Chrome, Firefox, Internet
Explorer, Safari, Opera Users today are accessing the web using
browsing clients built into mobile phones and tablets Be aware that
different browsers may display pages differently
Slide 20
Web Page Addresses ( URLs ) Every page and resource has its own
special address Address is called a Uniform Resource Locater ( URL
) Some are short and sweet Others may look like someone went
crazy
Slide 21
Web Page Addresses ( URLs ) Pieces of a web address http:
Protocol www: First subdomain name ( host name ) example: Second
subdomain name ( may have more that a single word separated by
periods ) com: Last subdomain is top-level-domain name ( TLD )
/2014/samples/: Directory path first.html: Document
http://www.example.com/2014/samples/first.html
Slide 22
Web Page Addresses ( URLs ) Not every URL is as lengthy as
shown previously Many addresses may simply point to a directory
Server looks for default page normally, index.html
http://www.philscis.com
Slide 23
Web Page Addresses ( URLs ) Original TLDs were.com: commercial
org.edu: educational institution.gov: government agency.org:
nonprofit org.net: network service provider.mil: US Military.int:
International TLD may also be a country code As of October 2009,
there are 21 generic top-level domains and 250 two-letter
country-code top-level domains
Slide 24
A Dizzying Multitude of Devices Until around 2007, most users
sat at a desk with a large screen monitor and was easy to design
for With the introduction of the iPhone and Android devices plus 3G
and 4G networks, a huge shift in how, when, and where we accessed
the Internet changed Brad Frost summed it up nicely with these
diagrams
Slide 25
A Dizzying Multitude of Devices Designers need to resist making
assumptions about Network speed Screen size Where the user is when
accessing the Internet Scott Jensen takes a look at inexpensive
networked devices http://designmind.frogdesign.com/blog/the-coming-
zombie-apocalypse-small-cheap-devices-will-disrupt-our-
old-school-ux-assumptions.htm
http://designmind.frogdesign.com/blog/the-coming-
zombie-apocalypse-small-cheap-devices-will-disrupt-our-
old-school-ux-assumptions.htm