Web Design and Development Life Cycle and Technologies
3 likes1,490 views
The document outlines various aspects of web design and development, including the definitions and types of applications (desktop and web), languages used (HTML, CSS, JavaScript, PHP), and the web development life cycle. It discusses key concepts like AJAX for dynamic web interactions and differentiates between static and dynamic websites, as well as between Java and JavaScript. Finally, it provides details on database management systems and tools for different operating systems.
![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](https://image.slidesharecdn.com/webdesignanddevelopmentlifecycleandtechnologies-140921235944-phpapp01/85/Web-Design-and-Development-Life-Cycle-and-Technologies-50-320.jpg)
Web Design and Development Life Cycle and Technologies
- 1. https://www.facebook.com/Oxus20 [email protected] 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
- 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. Types of Applications »Desktop Applications »Web Applications 4 https://www.facebook.com/Oxus20
- 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. 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. Types of Web Applications »Client-side Web Applications »Server-side Web Applications 7 https://www.facebook.com/Oxus20
- 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. 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. 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. 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. 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. 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. 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. 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. 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. 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 Example Definition
- 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. 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. 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. 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. 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
- 24. Web Development Life Cycle 24 https://www.facebook.com/Oxus20
- 25. Web Development Life Cycle 25 https://www.facebook.com/Oxus20
- 26. Step 1: Discussion 26 https://www.facebook.com/Oxus20
- 27. Step 2: Brainstorming 27 https://www.facebook.com/Oxus20
- 28. Step 3: Wireframe 28 https://www.facebook.com/Oxus20
- 29. Step 4: Planning the Content 29 https://www.facebook.com/Oxus20
- 30. 30 https://www.facebook.com/Oxus20 Step 5: Initial Design
- 31. 31 https://www.facebook.com/Oxus20 Step 6: Client Feedback
- 32. 32 https://www.facebook.com/Oxus20 Step 7: Design Rework
- 33. 33 https://www.facebook.com/Oxus20 Step 8: Client Approval
- 34. 34 https://www.facebook.com/Oxus20 Step 9: Additional Page Design
- 35. 35 https://www.facebook.com/Oxus20 Step 10: Confirmation
- 36. 36 https://www.facebook.com/Oxus20 Step 11: Build the HTML
- 37. 37 https://www.facebook.com/Oxus20 Step 12: …and the CSS
- 38. 38 https://www.facebook.com/Oxus20 Step 13: Present to Client
- 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
- 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. 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. 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. 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. 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. 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. 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. 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. 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