Web Design and Development Life Cycle and Technologies

50 %
50 %
Information about Web Design and Development Life Cycle and Technologies

Published on March 19, 2014

Author: absherzad

Source: slideshare.net


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.

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

https://www.facebook.com/Oxus20 2

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

Types of Applications » Desktop Applications » Web Applications 4 https://www.facebook.com/Oxus20

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

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

Types of Web Applications » Client-side Web Applications » Server-side Web Applications 7 https://www.facebook.com/Oxus20

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://www.facebook.com/Oxus20 23

Web Development Life Cycle 24 https://www.facebook.com/Oxus20

Web Development Life Cycle 25 https://www.facebook.com/Oxus20

Step 1: Discussion 26 https://www.facebook.com/Oxus20

Step 2: Brainstorming 27 https://www.facebook.com/Oxus20

Step 3: Wireframe 28 https://www.facebook.com/Oxus20

Step 4: Planning the Content 29 https://www.facebook.com/Oxus20

30 https://www.facebook.com/Oxus20 Step 5: Initial Design

31 https://www.facebook.com/Oxus20 Step 6: Client Feedback

32 https://www.facebook.com/Oxus20 Step 7: Design Rework

33 https://www.facebook.com/Oxus20 Step 8: Client Approval

34 https://www.facebook.com/Oxus20 Step 9: Additional Page Design

35 https://www.facebook.com/Oxus20 Step 10: Confirmation

36 https://www.facebook.com/Oxus20 Step 11: Build the HTML

37 https://www.facebook.com/Oxus20 Step 12: …and the CSS

38 https://www.facebook.com/Oxus20 Step 13: Present to Client

39 https://www.facebook.com/Oxus20 Step 14 : Test

40 https://www.facebook.com/Oxus20 Step 15: Launch

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

https://www.facebook.com/Oxus20 42

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

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

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

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

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

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?

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

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

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

END https://www.facebook.com/Oxus20 52

Add a comment

Related presentations

Related pages

The Website Development Life Cycle - Web Design

Our Services Web Design Services. Web Design & Development; ... development. Though some technologies ... of website development life cycle ...
Read more

Web Development Life Cycle - Texas Southern University

Web Development Life Cycle . ... environment will allow the designer to know what type of Technologies to use. ... Web Site design and Development .
Read more

Web Technologies LLC > Home

Web Technologies LLC focuses on managing the full life cycle of application development. We support your entire technology solution: design, development ...
Read more

Syscom Technologies | Home | Web Design and Development ...

SYSCOM Technologies S.A.R.L. was established in Lebanon as a member of a group of companies ... Web Design & Development. ... Our Projects Life Cycle.
Read more

Web development - Wikipedia

Web development is a broad term for the work ... An ever growing set of tools and technologies have helped developers ... Web design; Web development ...
Read more

Web design - Wikipedia

The different areas of web design include web ... imagery or design prototypes. Technologies used to ... web standards; Web design and development ...
Read more

Web Development Company, Website Designing, PHP ...

Our professional experts Web Development Team implement the latest PHP technologies to ... web development life cycle ... Web Design • Web Development
Read more

Following A Web Design Process – Smashing Magazine

A Web development process is a documented outline of the steps ... Search on Smashing Magazine Search. ... our new book on real-life responsive design.
Read more