Basic Introduction to Web Development
10 likes11,126 views
The document outlines the stages and tools in web development, including concept development, prototyping, testing, deployment, and maintenance. It emphasizes the importance of a structured workflow and provides a demo for publishing a website using Git and GitHub. Additionally, it covers the technical aspects such as client-side and server-side technologies, as well as fundamental protocols and architecture used in web applications.
Basic Introduction to Web Development
- 1. WEB Β DEVELOPMENT TOOLS Β & Β FRAMEWORKS BURHAN Β KHALID Β (@BURHAN) GUST Β β MARCH Β 30 Β 2015
- 2. Todayβs Β Talk Brief Β History Β of Β Web Β Development Stages Β of Β Web Β Development β¦ Concept Β Development β¦ Prototyping β¦ Development β¦ Testing β¦ Launch β¦ Maintenance Tools Β & Β Frameworks Next Β Generation Β Development Β (exciting Β stuff!) Q&A
- 3. A Β brief Β history Β of Β Web Β Development https://pantheon.io/blog/history-Ββwebsite-Ββdevelopment-Ββinfographic
- 4. 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.
- 5. 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.
- 6. 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
- 7. Web Β 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?)
- 8. Web Β Development Β Stages 5 Β -Ββ Deployment Deployment Β Process Β Should Β Be: β¦ Documented β¦ Repeatable β¦ Predictable β¦ Rehearsed β¦ Tools Β help!
- 9. Web Β Development Β Stages 6 Β -Ββ Maintenance Small Β effort, Β big Β rewards β¦ Enable Β maintenance Β by Β tracking: β¦ Successful Β requests β¦ Failed Β requested β¦ Repeated Β failed Β requests β¦ Key Β function Β execution β¦ Infrastructure
- 10. Tools Β & Β Frameworks USE Β THESE Β TO Β JUMPSTART Β YOUR Β DEVELOPMENT
- 12. Categories Β of Β Tools Β & Β Frameworks: Server Β Side Β Development
- 13. Categories Β of Β Tools Β & Β Frameworks Frontend Β Development
- 14. Categories Β of Β Tools Β & Β Frameworks Platforms
- 15. Categories Β of Β Tools Β & Β Frameworks Development Β Helpers
- 17. A Β 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.
- 18. Quick Β Demo Web Β Development QUICKEST Β WAY Β TO Β PUBLISH Β A Β WEBSITE Β β GUARANTEED!
- 19. Demo Β Requirements Β β 30 Β minutes Windows β’ git β’ Text Β Editor β’ github.com account β’ Python Β (2 Β or Β 3) Mac β’ Same Linux β’ Same
- 20. 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:gust_demo 2. On Β Mac, Β default Β path Β is Β /Users/yourloginname/gust_demo 3. On Β Linux, Β default Β path Β is Β /home/yourusername/gust_demo 2. Create Β a Β index.html file Β in Β this Β directory, Β with Β any Β content Β you Β like. 3. Start Β a Β local Β server: 1. Python Β 2: 1. python βm SimpleHTTPServer 8000 2. Python Β 3: 1. python βm http.server 8000 4. Browse Β http://localhost:8000
- 21. Demo Β Steps Β β Phase Β 2 Publishing 1. Commit Β your Β files Β to Β git: 1. git init 2. git add . 3. git commit βm βinitial commitβ 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.github.io 4. Type these commands to configure git: 1. git config βglobal user.name βYour Nameβ 2. git config βglobal user.email βyou@email.comβ 3. Push Β your Β website: 1. git remote add origin https://github.com/name/name.github.io.git 2. git push βu origin master
- 22. Q&A
- 23. Web Β Development Β β Recap LETS Β STOP Β AND Β LOOK Β BACK Β AT Β WHAT Β WE Β DID
- 24. How Β Does Β It Β All Β Work? THE Β DETAILS
- 25. The Β Internet A Β LARGE Β NETWORK Β OF Β COMPUTERS, Β CONNECTED Β THROUGH Β A Β COMMON Β NETWORK Β SPREAD Β ACROSS Β A Β LARGE Β AREA.
- 26. World Β Wide Β Web AN Β INFORMATION Β NETWORK BUILT Β ON Β TOP Β OF Β THE Β INTERNET Β USING Β HYPERLINKED Β DOCUMENTS.
- 27. HTML Β & Β 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
- 28. CLIENT Β 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
- 29. SERVER Β SIDE A Β TERM Β USED Β TO Β DESCRIBE Β TECHNOLOGY Β THAT Β RUNS Β ON Β THE Β SERVERS Β CONNECTED Β TO Β THE Β INTERNET Β PROVIDING Β ONE Β OR Β MORE Β SERVICES.
- 30. USER Β AGENT THE Β TECHNICAL Β TERM Β FOR Β THE Β PIECE Β OF Β SOFTWARE Β THAT Β IS Β USED Β TO Β DISPLAY Β DOCUMENTS Β ON Β THE Β WORLD Β WIDE Β WEB Β (WWW).
- 31. DOCUMENT Β OBJECT Β MODEL A Β CONVENTION Β OF Β DESCRIBING Β AND Β INTERACTING Β WITH Β HTML Β DOCUMENTS Β AS Β A Β SERIES Β OF Β NODES Β ON Β A Β TREE. Β
- 32. TELNET 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.
- 33. TCP/IP IPv4 IPv6 PROTOCOLS Β USED Β TO Β COMMUNICATE Β WITH Β SERVERS Β ON Β THE Β INTERNET. Β EACH Β DEVICE Β THAT Β CONNECTS Β TO Β INTERNET Β NEEDS Β AN Β IP Β ADDRESS.
- 34. DOMAIN Β NAME Β SYSTEM A Β DISTRIBUTED Β SYSTEM Β DESIGNED Β TO Β ASSIGN Β NAMES Β TO Β IP Β ADDRESSES, Β IN Β ORDER Β TO Β IDENTIFY Β RESOURCES Β ON Β A Β NETWORK.
- 35. WEB Β SERVER A Β PIECE Β OF Β SOFTWARE Β CODE Β THAT Β LISTENS Β TO Β CONNECTIONS Β AND Β RESPONDS Β WITH Β DOCUMENTS Β OR Β OTHER Β RESOURCES Β ON Β THE Β WORLD Β WIDE Β WEB.
- 36. APACHE IIS NGINX POPULAR Β WEB Β SERVER Β USED Β ON Β THE Β INTERNET. Β APACHE Β CONTROLS Β THE Β MAJORITY Β OF Β THE Β MARKET.
- 37. HTTP HTTPS HYPERTEXT Β TRANSFER Β PROTOCOL. Β A Β TEXT Β PROTOCOL Β CONSISTING Β OF Β A Β SERIES Β OF Β COMMANDS Β USED Β TO Β SEND Β DATA Β AND Β REQUEST Β DOCUMENTS Β OVER Β THE Β WEB.
- 38. REQUEST/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.
- 39. FTP/SFTP FILE Β TRANSFER Β PROTOCOL. Β A Β METHOD Β OF Β TRANSFERRING Β DATA Β BETWEEN Β SERVERS. Β SFTP IS Β SECURE-ΒβFTP
- 40. SECURE Β SHELL Β (SSH) AN Β ENCRYPTED Β METHOD Β OF Β CONNECTING Β TO Β REMOTE Β COMPUTERS Β AND Β EXECUTING Β COMMANDS.
- 41. GIT MERCURIAL SUBVERSION POPULAR Β REVISION Β CONTROL Β SYSTEMS. Β THESE Β SYSTEMS Β TRACK Β CHANGES Β IN Β FILES Β ALLOWING Β EASY Β RECOVERY Β OF Β PREVIOUS Β VERSIONS.
- 42. DEMO PLEASE Β FOLLOW Β ALONG Β IF Β YOU Β CAN
- 43. Classic Β Web Β Application Β Architecture BASIC Β BUILDING Β BLOCKS Β FOR Β MOST Β WEB Β APPLICATIONS
- 44. 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
- 45. Modern Β Web Β Application Β Architecture ADVANCED Β APPLICATIONS Β β FOR Β ADVANCED Β DEVICES
- 46. Modern Β Applications Β (Simplified) Models (database, Β document) Services (API, Β Authentication, Β Caching, Β Serialization) Business Β Logic (controllers, Β routers) View Β Layer (code Β to Β render Β HTML) Models (client Β side Β models) Presentation (HTML, Β CSS, Β Responsive) Local Β Storage Β (HTML5)
- 47. DEMO CREATING Β A Β CMS Β FROM Β SCRATCH
- 48. Web Β Development Β β Part Β II USING Β A Β WORKFLOW Β FOR Β WEB Β DEVELOPMENT
- 49. Demo Β Requirements Β β 1 Β Hour Β (excluding Β download Β time) Β Jο Windows β’git β’Text Β Editor β’Python Β (2 Β or Β 3) β’node Β & Β npm β’virtualenv & Β pip β’A Β fast Β Internet Β connection β’Vagrant β’VirtualBox Mac β’ In addition Β to Β Windows β’ Homebrew β’ Xcode & Β Xcode Command Β Line Β Tools β’ brew Β install Β libpng libjpeg libxml2 Β postgresql Linux β’ In Β addition Β to Β Windows β’ Development toolchain
- 50. Pre-Ββrequisites Β β All Β Platforms
- 51. Demo
- 52. Q&A Thank Β You SLIDES Β AVAILABLE Β (@GDGKUWAIT / Β @BURHAN / Β @SIRDAB_LAB)