Slide 1

Developing Web Pages

Slide 2

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

Slide 26

The End