SlideShare a Scribd company logo
WEB DESIGN
& DEVELOPMENT
TECHNOLOGIES
Presented by:
Md. Ekram
Chairman, civintech
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.
» Desktop Applications
» Web Applications
Types of Applications
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)
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.
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.
Website Layers
» Front-End
- HTML
- CSS
- JavaScript
» Back-End
- DBMS
•MySQL
•SQL Server
•Oracle
•SQLite
- Plain Files
- XML Files
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>
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>
Three Ways to Insert CSS
» There are three ways of inserting a style sheet
•External Style Sheet
•Internal Style Sheet
•Inline Style Sheet
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>
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"); ?>
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.
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.
Web Development
Life Cycle
Web Development Life Cycle
Web Development Life Cycle
Step 1 : Discussion
Step 2 : Brainstorming
Step 3 : Wireframe
Step 4 : Planning the Content
Step 5 : Initial Design
Step 6 : Client Feedback
Step 7 : Design Rework
Step 8 : Client Approval
Step 9 : Additional Page Design
Step 10 : Confirmation
Step 11 : Build the HTML
Step 12 : …and the CSS
Step 13 : Present to Client
Step 14 : Test
Step 15 : Launch
The 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.
How develop a web application?

More Related Content

What's hot (20)

PPT
Lecture1: HTML and JavaScript
omarshehab
 
PPTX
Static and Dynamic webpage
Aishwarya Pallai
 
PPT
Introduction css
sagaroceanic11
 
PPTX
Html n CSS
Sukrit Gupta
 
PPTX
Introduction to HTML
ShreyaShetty92
 
PPTX
Web Pages
Sayed Hamid Raza
 
PPTX
Static dynamic and active web pages
Mohammad Kamrul Hasan
 
PPT
Web browsers and web document
Mohammad Kamrul Hasan
 
PPT
Ndim1 2009 Web Design
guest0121dcd7
 
PPTX
WWW, Website & Webpage
Zeeshan Alam
 
PDF
Dynamic Web
Dave Wallace
 
PPTX
Web design
Romeo Karthik
 
PPTX
Web publishing
Kanav Sood
 
PPTX
What is web hosting
fastwebhost1
 
PPTX
Web technology P B Jadhav
PRASHANT JADHAV
 
PPT
Webdesign session1
Shehrevar Davierwala
 
PPTX
Digital Marketing - Key elements of a website
Arvind Srinivasan
 
PPTX
Web development using HTML and CSS
SiddhantSingh980217
 
PPTX
UVA MDST 3703 JavaScript 2012-09-27
Rafael Alvarado
 
PDF
Basic Introduction to Web Development
Burhan Khalid
 
Lecture1: HTML and JavaScript
omarshehab
 
Static and Dynamic webpage
Aishwarya Pallai
 
Introduction css
sagaroceanic11
 
Html n CSS
Sukrit Gupta
 
Introduction to HTML
ShreyaShetty92
 
Web Pages
Sayed Hamid Raza
 
Static dynamic and active web pages
Mohammad Kamrul Hasan
 
Web browsers and web document
Mohammad Kamrul Hasan
 
Ndim1 2009 Web Design
guest0121dcd7
 
WWW, Website & Webpage
Zeeshan Alam
 
Dynamic Web
Dave Wallace
 
Web design
Romeo Karthik
 
Web publishing
Kanav Sood
 
What is web hosting
fastwebhost1
 
Web technology P B Jadhav
PRASHANT JADHAV
 
Webdesign session1
Shehrevar Davierwala
 
Digital Marketing - Key elements of a website
Arvind Srinivasan
 
Web development using HTML and CSS
SiddhantSingh980217
 
UVA MDST 3703 JavaScript 2012-09-27
Rafael Alvarado
 
Basic Introduction to Web Development
Burhan Khalid
 

Similar to How develop a web application? (20)

PPTX
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
12KritiGaneriwal
 
PDF
Making Of PHP Based Web Application
Sachin Walvekar
 
PPTX
Learn web development: Front-end vs Back-end development
puneetbatra24
 
PPTX
Php
Saket Shukla
 
PPTX
Basics of Web Development.pptx
Palash Sukla Das
 
PPTX
Web Development
Harshdeep Singh
 
PPTX
Introduction to web application development
Ayyappadhas K B
 
PDF
Web Design & Development Courses in Pune | 3DOT Technologies
abeda786
 
PPTX
TOPIC 1 - INTRODUCTION TO WEBSITE DESIGN AND DEVELOPMENT.pptx
TemitopeOsadare1
 
PPTX
ppt of web development for diploma student
Abhishekchauhan863165
 
PPTX
Gettings started with Web development
Ujjwal Ojha
 
PPT
Websites Unlimited - Pay Monthly Websites
websiteunlimited
 
PDF
Web Design & Development - Session 1
Shahrzad Peyman
 
PPT
The most efficient development tool is now available in Pakistan.ppt
Connect Solutions
 
PPTX
History of Web Technology
Shuvo Malakar
 
PDF
web development.pdf
JessicaArifa
 
PDF
The most efficient development tool is now available in Pakistan.pdf
Connect Solutions
 
PPT
The best development services available for Pakistan.ppt
Connect Solutions
 
PPTX
The Guide to Website Development for Beginners.pptx
Connect Solutions
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
12KritiGaneriwal
 
Making Of PHP Based Web Application
Sachin Walvekar
 
Learn web development: Front-end vs Back-end development
puneetbatra24
 
Basics of Web Development.pptx
Palash Sukla Das
 
Web Development
Harshdeep Singh
 
Introduction to web application development
Ayyappadhas K B
 
Web Design & Development Courses in Pune | 3DOT Technologies
abeda786
 
TOPIC 1 - INTRODUCTION TO WEBSITE DESIGN AND DEVELOPMENT.pptx
TemitopeOsadare1
 
ppt of web development for diploma student
Abhishekchauhan863165
 
Gettings started with Web development
Ujjwal Ojha
 
Websites Unlimited - Pay Monthly Websites
websiteunlimited
 
Web Design & Development - Session 1
Shahrzad Peyman
 
The most efficient development tool is now available in Pakistan.ppt
Connect Solutions
 
History of Web Technology
Shuvo Malakar
 
web development.pdf
JessicaArifa
 
The most efficient development tool is now available in Pakistan.pdf
Connect Solutions
 
The best development services available for Pakistan.ppt
Connect Solutions
 
The Guide to Website Development for Beginners.pptx
Connect Solutions
 
Ad

More from Md Ekram (13)

PPTX
FIVERR exclusive: few buyer request at fiverr
Md Ekram
 
PPTX
Modern professional smart CV
Md Ekram
 
PPT
Search buyer from social media
Md Ekram
 
PPTX
Graphic Skill: Income by business card design
Md Ekram
 
PPT
How to promote FIVERR GIG to get non-stop sales?
Md Ekram
 
PPTX
10 reasones why infographics is useful to SEO & Digital Marketing
Md Ekram
 
PPT
50 tips for increase fb like & 50 types of engaging post
Md Ekram
 
PPT
Guest blogging for marketing
Md Ekram
 
PPT
Product Buy Cycle (Sales Funnel)
Md Ekram
 
PPT
Facebook Marketing Guide Line
Md Ekram
 
PPT
Article Writing Tips
Md Ekram
 
PPT
Online Income by Facebook
Md Ekram
 
PPT
What is graphic design? How to be a successful designer? career of a designer.
Md Ekram
 
FIVERR exclusive: few buyer request at fiverr
Md Ekram
 
Modern professional smart CV
Md Ekram
 
Search buyer from social media
Md Ekram
 
Graphic Skill: Income by business card design
Md Ekram
 
How to promote FIVERR GIG to get non-stop sales?
Md Ekram
 
10 reasones why infographics is useful to SEO & Digital Marketing
Md Ekram
 
50 tips for increase fb like & 50 types of engaging post
Md Ekram
 
Guest blogging for marketing
Md Ekram
 
Product Buy Cycle (Sales Funnel)
Md Ekram
 
Facebook Marketing Guide Line
Md Ekram
 
Article Writing Tips
Md Ekram
 
Online Income by Facebook
Md Ekram
 
What is graphic design? How to be a successful designer? career of a designer.
Md Ekram
 
Ad

Recently uploaded (20)

PPTX
Natural Language processing using nltk.pptx
Ramakrishna Reddy Bijjam
 
PDF
Genomics Proteomics and Vaccines 1st Edition Guido Grandi (Editor)
kboqcyuw976
 
PDF
Our Guide to the July 2025 USPS® Rate Change
Postal Advocate Inc.
 
PDF
Indian National movement PPT by Simanchala Sarab, Covering The INC(Formation,...
Simanchala Sarab, BABed(ITEP Secondary stage) in History student at GNDU Amritsar
 
PDF
WATERSHED MANAGEMENT CASE STUDIES - ULUGURU MOUNTAINS AND ARVARI RIVERpdf
Ar.Asna
 
PDF
Andreas Schleicher_Teaching Compass_Education 2040.pdf
EduSkills OECD
 
PDF
TLE 8 QUARTER 1 MODULE WEEK 1 MATATAG CURRICULUM
denniseraya1997
 
PPTX
Exploring Linear and Angular Quantities and Ergonomic Design.pptx
AngeliqueTolentinoDe
 
PPTX
Iván Bornacelly - Presentation of the report - Empowering the workforce in th...
EduSkills OECD
 
PDF
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.06.25.pdf
TechSoup
 
DOCX
Lesson 1 - Nature and Inquiry of Research
marvinnbustamante1
 
PPTX
How to Create & Manage Stages in Odoo 18 Helpdesk
Celine George
 
PDF
AI-assisted IP-Design lecture from the MIPLM 2025
MIPLM
 
PPTX
How to Setup Automatic Reordering Rule in Odoo 18 Inventory
Celine George
 
PDF
Cooperative wireless communications 1st Edition Yan Zhang
jsphyftmkb123
 
PPTX
Aerobic and Anaerobic respiration and CPR.pptx
Olivier Rochester
 
PPTX
Elo the Hero is an story about a young boy who became hero.
TeacherEmily1
 
PPTX
The Gift of the Magi by O Henry-A Story of True Love, Sacrifice, and Selfless...
Beena E S
 
PPTX
Ward Management: Patient Care, Personnel, Equipment, and Environment.pptx
PRADEEP ABOTHU
 
PPTX
Nitrogen rule, ring rule, mc lafferty.pptx
nbisen2001
 
Natural Language processing using nltk.pptx
Ramakrishna Reddy Bijjam
 
Genomics Proteomics and Vaccines 1st Edition Guido Grandi (Editor)
kboqcyuw976
 
Our Guide to the July 2025 USPS® Rate Change
Postal Advocate Inc.
 
Indian National movement PPT by Simanchala Sarab, Covering The INC(Formation,...
Simanchala Sarab, BABed(ITEP Secondary stage) in History student at GNDU Amritsar
 
WATERSHED MANAGEMENT CASE STUDIES - ULUGURU MOUNTAINS AND ARVARI RIVERpdf
Ar.Asna
 
Andreas Schleicher_Teaching Compass_Education 2040.pdf
EduSkills OECD
 
TLE 8 QUARTER 1 MODULE WEEK 1 MATATAG CURRICULUM
denniseraya1997
 
Exploring Linear and Angular Quantities and Ergonomic Design.pptx
AngeliqueTolentinoDe
 
Iván Bornacelly - Presentation of the report - Empowering the workforce in th...
EduSkills OECD
 
TechSoup Microsoft Copilot Nonprofit Use Cases and Live Demo - 2025.06.25.pdf
TechSoup
 
Lesson 1 - Nature and Inquiry of Research
marvinnbustamante1
 
How to Create & Manage Stages in Odoo 18 Helpdesk
Celine George
 
AI-assisted IP-Design lecture from the MIPLM 2025
MIPLM
 
How to Setup Automatic Reordering Rule in Odoo 18 Inventory
Celine George
 
Cooperative wireless communications 1st Edition Yan Zhang
jsphyftmkb123
 
Aerobic and Anaerobic respiration and CPR.pptx
Olivier Rochester
 
Elo the Hero is an story about a young boy who became hero.
TeacherEmily1
 
The Gift of the Magi by O Henry-A Story of True Love, Sacrifice, and Selfless...
Beena E S
 
Ward Management: Patient Care, Personnel, Equipment, and Environment.pptx
PRADEEP ABOTHU
 
Nitrogen rule, ring rule, mc lafferty.pptx
nbisen2001
 

How develop a web application?

  • 1. WEB DESIGN & DEVELOPMENT TECHNOLOGIES Presented by: Md. Ekram Chairman, civintech
  • 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. » Desktop Applications » Web Applications Types of 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. 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.
  • 7. Website Layers » Front-End - HTML - CSS - JavaScript » Back-End - DBMS •MySQL •SQL Server •Oracle •SQLite - Plain Files - XML Files
  • 8. 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>
  • 9. 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>
  • 10. Three Ways to Insert CSS » There are three ways of inserting a style sheet •External Style Sheet •Internal Style Sheet •Inline Style Sheet
  • 11. 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>
  • 12. 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"); ?>
  • 13. 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.
  • 14. 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.
  • 18. Step 1 : Discussion
  • 19. Step 2 : Brainstorming
  • 20. Step 3 : Wireframe
  • 21. Step 4 : Planning the Content
  • 22. Step 5 : Initial Design
  • 23. Step 6 : Client Feedback
  • 24. Step 7 : Design Rework
  • 25. Step 8 : Client Approval
  • 26. Step 9 : Additional Page Design
  • 27. Step 10 : Confirmation
  • 28. Step 11 : Build the HTML
  • 29. Step 12 : …and the CSS
  • 30. Step 13 : Present to Client
  • 31. Step 14 : Test
  • 32. Step 15 : Launch
  • 33. The 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.