Web Design and Development Life Cycle and Technologies

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


mailto:[email protected]


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


Types of Applications

» Desktop Applications

» Web Applications

4


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


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


Types of Web Applications

» Client-side Web Applications

» Server-side Web Applications

7


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


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


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


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


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


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


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


Website Layers

» Front-End ˃ HTML

˃ CSS

˃ JavaScript

» Back-End ˃ DBMS

• MySQL

• SQL Server

• Oracle

• SQLite

˃ Plain Files

˃ XML Files

15


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


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>


17

Example Definition

Three Ways to Insert CSS

18


» 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


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


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


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



23


24



25


Step 1: Discussion

26


Step 2: Brainstorming

27


Step 3: Wireframe

28


Step 4: Planning the Content

29


30


Step 5: Initial Design

31


Step 6: Client Feedback

32


Step 7: Design Rework

33


Step 8: Client Approval

34


Step 9: Additional Page Design

35


Step 10: Confirmation

36


Step 11: Build the HTML

37


Step 12: …and the CSS

38


Step 13: Present to Client

39


Step 14 : Test

40


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



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


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


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


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


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


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


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


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


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


http://www.wampserver.com/en/

http://www.mamp.info/en/

http://www.mamp.info/en/

http://lamphowto.com/

END


52

Education

Web Design and Development Life Cycle and Technologies