2. pment
Slide 2
Objectives
At the end of this module, you will be able to:
Importance of Web Development
Web Designer Vs. Web Developer
Front-end and Back-end Web Development
HTML, CSS and JavaScript - An Overview
JavaScript Frameworks - jQuery and AngularJS
Advanced Web Development Topics
3. Importance of Web Development
Slide 3
The Internet is ubiquitous
• Accessible through mobile and desktop
• Customers/users need to find you/your business
• Builds trust in your organization and improves your reputation
• Your website is your first round-the-clock sales person!
The Website
• Creates first impression of your business
• Create it to suit the needs of your target audience
• Reflects your expertise and reputation
• Can bring business from any part of the world!
• Call to Action – Encourage the users to give you business
You need Web Development skills to create a Website!
4. Web Designer Vs. Web Developer
Slide 4
A Web Designer
• Designs the look and feel of a website (creative side of website)
• Decides the layout, fonts, color, images and overall branding
• Creates the visual mock-up of the website
• Rarely does the development of a website!
• A Right-brained (Creative) Person
A Web Developer
• Brings the website mock-up to life on the Internet (development side of website)
• Develops the website and hosts on a web server
• Has Web Development Skills: HTML, CSS, JavaScript, PHP, Perl, Python, Java, Ruby
• A Left-brained (Logical) Person
Gain Web Development skills to become a Web Developer!
5. Front End and Back End Web Development
Slide 5
Front End Web Development
• Defined components on the page with HTML
• Make them look pleasing with CSS
• Enable interactivity with JavaScript
• Enhance productivity with use of frameworks
Back End Web Development
• Create the page components and content dynamically on the web server
• Send the HTML + CSS + JavaScript to web browser (used by a human user)
• Generate pages by programming in Java, JavaScript, PHP, Perl, Python, Ruby
• Aim to achieve fast response times to end users
Front End Web Development is the focus of this webinar!
6. HTML, CSS, and JavaScript – An Overview
HTML
• Hypertext Markup Language
• Structure of Page
JavaScript
• Interactivity with User
• Dynamic Updates in a Web Page
CSS
• Cascading Style Sheets
• Presentation/Styling
Slide 6
7. Hypertext - Origins
HyperText
• Text with references (hyperlinks) to other text
“Hyper” - meaning
• Greek Origin: “over”, “beyond”
First Idea
• Vannevar Bush, USA, in 1945
Slide 7
8. A Simple HTML5 Page
Slide 8
Save the following code in a test.html file
<!DOCTYPE html>
<html>
<head>
<title>This is a Web Course</title>
</head>
<body>
<p>Welcome to HTML5, CSS3 and JavaScript!</p>
</body>
</html>
9. Hosting a Web Site
Slide 9
A Web Site
• Serves one or more HTML Pages
Default Page: index.html, index.php
Served / Hosted by a Web Server
• HTTP Web Server
httpd, apache2, Ngnix, inetmgr.exe - Internet Information Server (Microsoft’s)
• Web Application Server
Apache Tomcat (Open Source), IBM WebSphere (Licensed)
Technologies
• HTML, HTTP, TCP/IP Protocols
• Operating Systems: Linux, Windows, MacOS
10. HTML Page
Slide 10
HTML (Web) Page / Document
• User Interface for the Web (site or application)
• A plain text file – human readable
• Transported on HTTP - HyperText Transfer Protocol
Page Types
• Static – ready-made pages with fixed page content
File Extension: .html, .htm
• Dynamic – generated on the fly with varying page content
Generated on the Web Server
Interspersed with JavaScript, PHP, JSP, ASP
File Extensions: .js, .php, .jsp, .asp, .aspx
26. Web Application
Types of Software
Desktop Applications
Server Softwares
Plugins
Embedded Software
What is a Web Application?
Is Website a Web Application?
31. Components of a Website
Logo
Navigation
Search
Content
Images & Multimedia
Gallery & Slideshows
Blog
Contact Form
Registration form
Members only area
Downloadable files
Shopping cart
32. Lets list all probable components
of a Web App say Facebook
33. Components of a Web Application
Logo
Sign-up or Log in
Dashboard
Navigation
Notifications
Search features
Activity Log
Statistics
Various Forms
Settings
User Profiles
Reports
34. In a most simplified language a full fledged Web Applications
consist of three basic components
Architecture of a Web Application
35. GUI – Client Side
The user interface is always rendered on a browser
Popular browsers
Programming languages
HTML (renders actual content)
CSS (Beautifies the content)
Javascript (Add effects, interaction, alter content)
36. Web Server
Web servers are computers that deliver Web pages.
Web server has an IP address and most of the times a domain
name
Eg. http://www.webfanzine.com/index.html
Any computer can be turned into Web Server
38. Data Storage
Server side scripting language can communicate with
database
Common databases
MySQL
SQL (DB2 & Microsoft)
Microsoft Access
Oracle
39. Basic Web Application - Requirements
Local Web Server
A browser
Basic knowledge of HTML, CSS, Javascript, PHP and MySQL
Online Web Server to deploy the application
40. Basic Web App – Development
Idea – Decide what is the purpose of your web application
Wireframe – On paper or a rapid prototype
Create a dedicated folder for your app
Create separate folders for css, js, images etc
Create main file – name it index.php
41. Basic Web App – Development
The index.php file will be similar to HTML (.html) file,
difference being you can write PHP code inside that file
Follow basic structure of HTML file
After you write HTML for the content that will be displayed,
add CSS to each element as per the design
42. Basic Web App – Development
All CSS will go in separate file say main.css in CSS folder
Follow PHP syntax to do any kind of computation or server
side validation.
In order to fetch or save data to database
Connect to MySQL database
Fetch the data in PHP variables or save the data
Close the connection
You can display the fetched data by populating the HTML
elements with PHP variables
43. Basic Web App – Development
Save this folder (say firstapp) into proper (www) folder of your
local web server
You can open your application by opening url like
http://localhost/firstapp/ in your browser.
Let us check the actual mini app for the syntax