2.
Slide3A brief history of Web Development https://pantheon.io/blog/history-‐website-‐development-‐infographic
3.
Web Development Stages1 – Concept Development Web Development Stages 1 – Concept Development Write down the following: ◦Who is this website for? (the types of users) ◦Why am I making it? (what is the problem?) ◦What is the most important thing visitors should do on your website. ◦Write, read. Write, read. Repeat. ◦Sketch (draw) your website outline.
4.
Web Development Stages2 – Prototype Development Web Development Stages 2 – Prototype Development A “broken” version of your website: ◦Links work, but don’t lead to any content. ◦“User Journey” is complete: ◦“As a I want to “ ◦Quick to change and move things around.
5.
Web Development Stages3 -‐ Development Web Development Stages 3 -‐ Development Ideally, your requirements are complete ◦Work at an iterative pace: ◦Develop at the lowest possible work unit ◦Use the tool that suits you, and makes you the most productive: ◦Text Editor ◦IDE ◦Terminal ◦GUI
6.
Web Development Stages 4 -‐ TestingWeb Development Stages 4 -‐ Testing If you don’t test; prepare to fail. Types of testing: ◦Functional Test (does the feature work?) ◦User acceptance test (is it what the user wants?) ◦Unit test (is the code stable?) ◦Coverage tests (are all code paths executing?)
7.
Web Development Stages5 -‐ Deployment Web Development Stages 5 -‐ Deployment Deployment Process Should Be: ◦Documented ◦Repeatable ◦Predictable ◦Rehearsed ◦Tools help!
8.
Web Development Stages6 -‐ Maintenance Web Development Stages 6 -‐ Maintenance Small effort, big rewards ◦Enable maintenance by tracking: ◦Successful requests ◦Failed requested ◦Repeated failed requests ◦Key function execution ◦Infrastructure
9.
Slide10Tools & Frameworks USE THESE TO JUMPSTART YOUR DEVELOPMENT
16.
A quick note about workflowsA quick note about workflows A good development workflow: ◦Helps you get started. ◦Maintains your dependencies. ◦Enforces best practices. ◦Prepares your tools. ◦Fights regressions. ◦Eases the release process.
17.
Slide18Quick Demo Web Development QUICKEST WAY TO PUBLISH A WEBSITE – GUARANTEED!
18.
Demo Requirements – 30 minutes Demo Requirements – 30 minutes Windows •git •Text Editor •github.com account •Python (2 or 3) Mac •Same Linux •Same
19.
Demo Steps – Phase 1Local Development & Testing Demo Steps – Phase 1 Local Development & Testing 1.Create a directory anywhere in your file system, and change (cd) into this directory: 1.On Windows – recommended to use a path without spaces, so D:\gustt_demo 2.On Mac, default path is /users/home/yourusername/gustt_demo 2.Create a index.httml file in this directory, with any content you like. 3.Start a local server: 1.Python 2: 1.pytthon –m SimpleHTTPServer 8000 2.Python 3: 1.pytthon –m httttp.server 8000 4.Browse httttp://localhostt:8000
20.
Demo Steps – Phase 2 PublishingDemo Steps – Phase 2 Publishing 1.Commit your files to git: 1.gitt initt 2.gitt add . 3.gitt committ –m “inittial committ” 2.Create a repository on github: 1.Login to your github account https://github.com/name/ 2.If you are creating an account for the first time, click on the welcome email to verify it. 3.Create a repository called name.gitthub.io 4.Type these commands to configure git: 1.gitt config –global user.name “Your Name” 2.gitt config –global user.email “you@email.com” 3.Push your website: 1.gitt remotte add origin httttps://gitthub.com/name/name.gitthub.io.gitt 2.gitt push –u origin mastter
24.
Slide25The Internet A LARGE NETWORK OF COMPUTERS, CONNECTED THROUGH A COMMON NETWORK SPREAD ACROSS A LARGE AREA.
25.
Slide26World Wide Web AN INFORMATION NETWORK BUILT ON TOP OF THE INTERNET USING HYPERLINKED DOCUMENTS.
26.
HTML & HTML5HTML & HTML5 HYPERTEXT MARKUP LANGUAGE. A LANGUAGE CONSISTING OF A SERIES OF TAGS USED TO ANNOTATE DOCUMENTS THAT ARE TO BE LINKED TOGETHER ON THE WEB. THE LATEST VERSION IS 5
27.
CLIENT SIDECLIENT SIDE A TERM USED TO DESCRIBE TECHNOLOGY THAT RUNS ON THE DEVICE CONNECTED TO THE INTERNET AND REQUESTING DOCUMENTS FROM A SERVER. EXAMPLE: JAVASCRIPT, FLASH
28.
SERVER SIDESERVER SIDE A TERM USED TO DESCRIBE TECHNOLOGY THAT RUNS ON THE SERVERS CONNECTED TO THE INTERNET PROVIDING ONE OR MORE SERVICES.
29.
Slide30USER AGENT THE TECHNICAL TERM FOR THE PIECE OF SOFTWARE THAT IS USED TO DISPLAY DOCUMENTS ON THE WORLD WIDE WEB (WWW).
30.
Slide31DOCUMENT OBJECT MODEL A CONVENTION OF DESCRIBING AND INTERACTING WITH HTML DOCUMENTS AS A SERIES OF NODES ON A TREE.
31.
Slide32TELNET A PLAIN TEXT BI-‐DIRECTIONAL PROTOCOL USED TO COMMUNICATE WITH SERVERS. IT IS ALSO THE NAME OF A PROGRAM THAT IS USED TO CONNECT OT SERVERS.
32.
TCP/IP IPv4 IPv6TCP/IP IPv4 IPv6 Protocols Used To Communıcate Wıth Servers on the Internet. Each Devıce That Connects to Internet Needs an Ip Address.
33.
DOMAIN NAME SYSTEMDOMAIN NAME SYSTEM A DISTRIBUTED SYSTEM DESIGNED TO ASSIGN NAMES TO IP ADDRESSES, IN ORDER TO IDENTIFY RESOURCES ON A NETWORK.
34.
WEB SERVERWEB SERVER A PIECE OF SOFTWARE CODE THAT LISTENS TO CONNECTIONS AND RESPONDS WITH DOCUMENTS OR OTHER RESOURCES ON THE WORLD WIDE WEB.
35.
Slide36APACHE IIS NGINX POPULAR WEB SERVER USED ON THE INTERNET. APACHE CONTROLS THE MAJORITY OF THE MARKET.
36.
Slide37HTTP HTTPS HYPERTEXT TRANSFER PROTOCOL. A TEXT PROTOCOL CONSISTING OF A SERIES OF COMMANDS USED TO SEND DATA AND REQUEST DOCUMENTS OVER THE WEB.
37.
Slide38REQUEST/RESPONSE THE NAME GIVEN TO THE COMPLETE CYCLE TO FETCH DOCUMENTS AND RESOURCES USING HTTP. THE CLIENT INITIATES THE REQUEST, AND THE SERVER SENDS THE RESPONSE.
38.
Slide39FTP/SFTP FILE TRANSFER PROTOCOL. A METHOD OF TRANSFERRING DATA BETWEEN SERVERS. SFTP IS SECURE-‐FTP
39.
Slide40SECURE SHELL (SSH) AN ENCRYPTED METHOD OF CONNECTING TO REMOTE COMPUTERS AND EXECUTING COMMANDS.
40.
GIT MERCURIAL SUBVERSIONGIT MERCURIAL SUBVERSION POPULAR REVISION CONTROL SYSTEMS. THESE SYSTEMS TRACK CHANGES IN FILES ALLOWING EASY RECOVERY OF PREVIOUS VERSIONS.
43.
The old (and current) way The old (and current) way DATABASE (the models) Server Code (controllers) View (code to render HTML) Client Side Javascript (jquery components) HTML Templates; CSS; layouts
WEB DEVELOPMENT TOOLS & FRAMEWORKS
Thank you for your comment.