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
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

END
52

Web Design and Development Life Cycle and Technologies

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (20)

Similar to Web Design and Development Life Cycle and Technologies

Similar to Web Design and Development Life Cycle and Technologies (20)

More from OXUS 20

More from OXUS 20 (8)

Recently uploaded

Recently uploaded (20)

Web Design and Development Life Cycle and Technologies