How develop a web application?

34
WEB DESIGN & DEVELOPMENT TECHNOLOGIES Presented by: Md. Ekram Chairman, civintech

Transcript of How develop a web application?

Page 1: How develop a web application?

WEB DESIGN& DEVELOPMENT

TECHNOLOGIES

Presented by:

Md. EkramChairman, civintech

Page 2: How develop a web application?

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.

Page 3: How develop a web application?

» Desktop Applications» Web Applications

Types of Applications

Page 4: How develop a web application?

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)

Page 5: How develop a web application?

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.

Page 6: How develop a web application?

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.

Page 7: How develop a web application?

Website Layers

» Front-End - HTML - CSS - JavaScript

» Back-End - DBMS

•MySQL •SQL Server •Oracle •SQLite

- Plain Files - XML Files

Page 8: How develop a web application?

HTML ( Hyper Text Markup Language)

Definition » 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.

Example

<html> <head>

<title> welcome</title> </head> <body>

<h1> Hello HTML</h1> </body>

</html>

Page 9: How develop a web application?

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

</style> </head> <body>

<h1> Content </h1> </body>

</html>

Page 10: How develop a web application?

Three Ways to Insert CSS

» There are three ways of inserting a style sheet •External Style Sheet •Internal Style Sheet •Inline Style Sheet

Page 11: How develop a web application?

JavaScript

Definition » 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….

Example :<html>

<head> <script type="text/javascript">

document.write( Date() ); </script>

</head> </html>

Page 12: How develop a web application?

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"); ?>

Page 13: How develop a web application?

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.

Page 14: How develop a web application?

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.

Page 15: How develop a web application?

Web Development Life Cycle

Page 16: How develop a web application?

Web Development Life Cycle

Page 17: How develop a web application?

Web Development Life Cycle

Page 18: How develop a web application?

Step 1 : Discussion

Page 19: How develop a web application?

Step 2 : Brainstorming

Page 20: How develop a web application?

Step 3 : Wireframe

Page 21: How develop a web application?

Step 4 : Planning the Content

Page 22: How develop a web application?

Step 5 : Initial Design

Page 23: How develop a web application?

Step 6 : Client Feedback

Page 24: How develop a web application?

Step 7 : Design Rework

Page 25: How develop a web application?

Step 8 : Client Approval

Page 26: How develop a web application?

Step 9 : Additional Page Design

Page 27: How develop a web application?

Step 10 : Confirmation

Page 28: How develop a web application?

Step 11 : Build the HTML

Page 29: How develop a web application?

Step 12 : …and the CSS

Page 30: How develop a web application?

Step 13 : Present to Client

Page 31: How develop a web application?

Step 14 : Test

Page 32: How develop a web application?

Step 15 : Launch

Page 33: How develop a web application?

The Final StepDeploy 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.

Page 34: How develop a web application?