Web Design and Development Life Cycle and Technologies


Published on

This presentation is an introduction to the design, creation, and maintenance of web design and development life cycle and web technologies. With it, you will learn about the web technologies, the life cycle of developing an efficient website and web application and finally some web essentials questions will be provided and reviewed.

Published in: Education
  • Be the first to comment

Web Design and Development Life Cycle and Technologies

  1. 1. https://www.facebook.com/Oxus20 oxus20@gmail.com Web Design & Development Life Cycle and Technologies Web Design & Development Web Development Life Cycle Web Essential Questions Review Prepared By: Samana Zia Edited By: Abdul Rahman Sherzad
  2. 2. https://www.facebook.com/Oxus20 2
  3. 3. Application » Application is a term for a set of instructions Which makes a computer to perform a task. » The set of instructions are commonly known as a program. » Many programs are not applications, a program with a User Interface is an application. 3 https://www.facebook.com/Oxus20
  4. 4. Types of Applications » Desktop Applications » Web Applications 4 https://www.facebook.com/Oxus20
  5. 5. Desktop Application » Software development began with Desktop Applications. » A desktop application means any software that can be installed on a single computer (laptop or desktop) and used to perform specific tasks. » Different type of desktop applications: ˃ Application for Communication (Microsoft Outlook) ˃ Application for Data Analysis and Diagram (Microsoft Excel) ˃ Application for Presentation and Graphic ( Microsoft PowerPoint, Adobe Photoshop) 5 https://www.facebook.com/Oxus20
  6. 6. Web Application » A Web Application is any application that uses a Browser as a client. » Online Shopping ˃ eBay.com ˃ Amazon.com ˃ etc. » Social Web Application ˃ Facebook.com ˃ Twitter.com ˃ etc. 6 https://www.facebook.com/Oxus20
  7. 7. Types of Web Applications » Client-side Web Applications » Server-side Web Applications 7 https://www.facebook.com/Oxus20
  8. 8. Client-side Web Applications » Applications on the World Wide Web (www) that run on the users and clients PCs and are executed by the browser installed on the user’s computer. » Examples: ˃ Java Applets ˃ HTML ˃ JavaScript 8 https://www.facebook.com/Oxus20
  9. 9. JavaScript » A scripting language used to design interactive Websites. » A JavaScript is a object oriented language that can be used to store and retrieve information on the visitor's computer. 9 https://www.facebook.com/Oxus20
  10. 10. AJAX (Asynchronous JavaScript and XML) » AJAX is not a new programming language, but a new way to use existing standards. » AJAX is the art of exchanging data with a server, and update parts of a web page without reloading the whole page. » Technologies combined together include the followings: ˃ HTML or XHTML ˃ Cascading Style Sheets ˃ JavaScript ˃ XML 10 https://www.facebook.com/Oxus20
  11. 11. J-Query » A free and open source JavaScript library, that is used by Web developers to navigate HTML documents, handle events, perform animations and add Ajax interactions to Web pages. 11 https://www.facebook.com/Oxus20
  12. 12. JAVA Applet » JAVA is a high-level programming language used to create applications for Desktop, Mobile, and Web. » Java Applets are programs that are embedded in other applications, typically in web pages displayed in a web browser on the client-side. 12 https://www.facebook.com/Oxus20
  13. 13. Sever Side Application » Web-based application that runs on the Web Server. ˃ ASP (Active Server Pages) ˃ PHP (PHP: Hypertext Preprocessor) ˃ and other technologies can be manipulated by the server side before sending the web page to the client. 13 https://www.facebook.com/Oxus20
  14. 14. What is a Website? » A website is an address (location) on the World Wide Web(www) that contains your web pages. » Basically, a website is your personal online communications connection to the rest of the world. » A website is totally different from any other type of publishing, advertising or communications media. 14 https://www.facebook.com/Oxus20
  15. 15. Website Layers » Front-End ˃ HTML ˃ CSS ˃ JavaScript » Back-End ˃ DBMS • MySQL • SQL Server • Oracle • SQLite ˃ Plain Files ˃ XML Files 15 https://www.facebook.com/Oxus20
  16. 16. HTML ( Hyper Text Markup Language) Definition Example » With HTML you can create your own Website structure and layouts. » HTML is not a programming language » HTML is a markup language with a set of markup tags. <html> <head> <title> welcome</title> </head> <body> <h1> Hello HTML</h1> </body> </html> 16 https://www.facebook.com/Oxus20
  17. 17. CSS (Cascading Style Sheet) » CSS is for control the style and layout of multiple Web pages all at once. » CSS affects all pages to which it is linked. » CSS separate design from Content. <html> <head> <style> h1 { font-style: italic; color: red; font-family: "Verdana, Arial, sans-serif"; font-size: 12pt; color: blue; } </style> </head> <body> <h1> Content </h1> </body> </html> https://www.facebook.com/Oxus20 17 ExampleDefinition
  18. 18. Three Ways to Insert CSS 18 https://www.facebook.com/Oxus20 » There are three ways of inserting a style sheet ˃ External Style Sheet ˃ Internal Style Sheet ˃ Inline Style Sheet
  19. 19. JavaScript Definition Example » A scripting language used to design interactive Web sites. » JavaScript allows developers to create interactive objects such as pop-up boxes, and drop-down menus…. <html> <head> <script type="text/javascript"> document.write( Date() ); </script> </head> </html> 19 https://www.facebook.com/Oxus20
  20. 20. PHP » PHP is a server-side scripting language » A powerful language for making dynamic and interactive Website and web applications; same as ASP and JSP does. » PHP executed on the server and supports many databases (MSQL, Oracle, Generic ODBC, etc.) » PHP is open source and free to download ˃ <?php echo date("Y/m/d"); ?> 20 https://www.facebook.com/Oxus20
  21. 21. Database » A database is a collection of related data. » By data, we mean known facts that can be recorded and that have implicit meaning. ˃ For example, consider the names, telephone numbers, and addresses of the people you know. You may have recorded this data in an indexed address book or you may have stored it on a hard drive, using a personal computer and software such as Microsoft Access or Excel. » This collection of related data with an implicit meaning is a database. 21 https://www.facebook.com/Oxus20
  22. 22. MySQL DBMS » MySQL is a fast, easy-to-use RDBMS being used for many small and big businesses. » MySQL works on many operating systems and with many languages including PHP, PERL, C, C++, JAVA, etc . » MySQL is very friendly to PHP, the most appreciated language for web development. 22 https://www.facebook.com/Oxus20
  23. 23. https://www.facebook.com/Oxus20 23
  24. 24. Web Development Life Cycle 24 https://www.facebook.com/Oxus20
  25. 25. Web Development Life Cycle 25 https://www.facebook.com/Oxus20
  26. 26. Step 1: Discussion 26 https://www.facebook.com/Oxus20
  27. 27. Step 2: Brainstorming 27 https://www.facebook.com/Oxus20
  28. 28. Step 3: Wireframe 28 https://www.facebook.com/Oxus20
  29. 29. Step 4: Planning the Content 29 https://www.facebook.com/Oxus20
  30. 30. 30 https://www.facebook.com/Oxus20 Step 5: Initial Design
  31. 31. 31 https://www.facebook.com/Oxus20 Step 6: Client Feedback
  32. 32. 32 https://www.facebook.com/Oxus20 Step 7: Design Rework
  33. 33. 33 https://www.facebook.com/Oxus20 Step 8: Client Approval
  34. 34. 34 https://www.facebook.com/Oxus20 Step 9: Additional Page Design
  35. 35. 35 https://www.facebook.com/Oxus20 Step 10: Confirmation
  36. 36. 36 https://www.facebook.com/Oxus20 Step 11: Build the HTML
  37. 37. 37 https://www.facebook.com/Oxus20 Step 12: …and the CSS
  38. 38. 38 https://www.facebook.com/Oxus20 Step 13: Present to Client
  39. 39. 39 https://www.facebook.com/Oxus20 Step 14 : Test
  40. 40. 40 https://www.facebook.com/Oxus20 Step 15: Launch
  41. 41. Final Step Deploy a Website On the Server » Once you have decided to establish a web site there are three steps to getting it online » Get a domain name - This is your personal/private address on the Web. » Find a web hosting service- Here is where your website will reside . Free vs Private Web Hosting » Design, build and upload your website - The process of website creation. 41 https://www.facebook.com/Oxus20
  42. 42. https://www.facebook.com/Oxus20 42
  43. 43. Why is Ajax an Important Tool in Website Development? » Ajax allows Web site developers to combine multiple Web design tools such as JavaScript and XML to improved client side usability and faster application loading time for end users and businesses. » Ajax allows asynchronous retrieval of data from the server without disturbing the display or behavior of the web pages that are in use. 43 https://www.facebook.com/Oxus20
  44. 44. How are HTML, SGML and XHTML used in Website Development? » HTML , SGML & XHTML are all markup languages used to develop documents for the Web. 44 https://www.facebook.com/Oxus20
  45. 45. Are Static and Dynamic Website the Same? NO !!! » In the static website all data are written in the HTML pages, and haven’t Database layer. » But all dynamic websites have separated layer for Insert, Update and Delete data are called web backend. 45 https://www.facebook.com/Oxus20
  46. 46. Are Java and JavaScript the Same? NO !!! Java and JavaScript are two completely different languages in both concept and design! » Java is an Object Oriented Programming language ,that be compiled before it can display properly on the web. You can use java in your HTML page with using <APPLET>tag . » JavaScript is an Object Oriented Programming language too . But used in billions of Web pages to add Functionality, Validate Forms, Communicate with the Server, and Interactivity. 46 https://www.facebook.com/Oxus20
  47. 47. All web Designing Languages are Programming Language? No !!! » Because all languages don’t have specification of a programming language like Classes ,Variables, Loops, Conditions and … . Like HTML,CSS » But PHP, JSP and ASP are OOP. we have Classes functions and other characteristic of programming language in these Web Server languages. » Just JavaScript is a client side and a programming language too. 47 https://www.facebook.com/Oxus20
  48. 48. YES !!! » All Client side and Server side languages are interpreted by the every browser that installed on the visitors computer. » All languages that interpreted aren’t independent. » All Client side languages need to Browser, and all Server side languages need to Server for interpreted. 48 https://www.facebook.com/Oxus20 Can Web Languages be Interpreted?
  49. 49. All DBMSes are Servers? YES !!! » All DBMSes are Servers because they provide services to manipulate and access the Databases and use from them. ˃ MySQL ˃ SQL Server ˃ Oracle 49 https://www.facebook.com/Oxus20
  50. 50. How can we Connected MySQL to PHP? It’s as easy as 1-2-3! » The syntax for the mysql_connect() function is: $DBConnect = mysql_connect( "host" , "user", “password" ); The syntax for the mysql_select_db() function is: mysql_select_db( database [, connection] ); 50 https://www.facebook.com/Oxus20
  51. 51. Where Can we Download the Tools? » Windows Users ˃ http://www.wampserver.com/en/ » MAC Users ˃ http://www.mamp.info/en/ » Linux Users ˃ http://lamphowto.com 51 https://www.facebook.com/Oxus20
  52. 52. END https://www.facebook.com/Oxus20 52