Developing Web
Pages
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
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
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 )
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
How the Web
Works
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
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
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
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
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 WorldWide-Web
• Text only
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.
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
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
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 )
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:
)
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
Serving Up The Information
USER /
CLIENT
HTML
CSS ( Style Sheets )
JavaScript
JQuery
…others…
SERVER
PHP
PERL
Python
Ruby
MySQL
Java
…others
…
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
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
Web Page Addresses ( URLs )
http://www.example.com/2014/samples/first.html
• 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
Web Page Addresses ( URLs )
• Not every URL is as lengthy as shown previously
• Many addresses may simply point to a directory
http://www.philscis.com
• Server looks for default page – normally, index.html
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
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
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-ourold-school-ux-assumptions.htm
The End