Web Design and Development Life Cycle and Technologies

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

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
ExampleDefinition

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

END
52

Web Design and Development Life Cycle and Technologies

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Web Design and Development Life Cycle and Technologies

Similaire à Web Design and Development Life Cycle and Technologies (20)

Plus de Abdul Rahman Sherzad

Plus de Abdul Rahman Sherzad (20)

Dernier

Dernier (20)

Web Design and Development Life Cycle and Technologies