Scribd
Upload
1K views

Introduction To Web Design and Programming

This document provides an introduction and overview of web design and programming. It discusses the history and timeline of the internet and world wide web. It also covers key topics like HTML5, CSS3, JavaScript, web browsers, responsive design, and the differences between client-side and server-side scripting. Version control with Git and tools like GitLab Pipelines for continuous integration are also introduced. The document aims to give readers background knowledge on building modern web applications.

Uploaded by

Yustiar Adhinugroho
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

Introduction To Web Design and Programming

This document provides an introduction and overview of web design and programming. It discusses the history and timeline of the internet and world wide web. It also covers key topics like HTML5, CSS3, JavaScript, web browsers, responsive design, and the differences between client-side and server-side scripting. Version control with Git and tools like GitLab Pipelines for continuous integration are also introduced. The document aims to give readers background knowledge on building modern web applications.

Uploaded by

Yustiar Adhinugroho
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

01.

Introduction to Web
Design and
Programming
Perancangan & Pemrograman Web
Outline
● Background and Introduction

● The Web timeline

● Web Basics

● HTML5, CSS3, JavaScript, and JQuery

● Cient-Side Scripting vs. Server-Side Scripting

● Web Browsers

● Web Application Development

● Responsive Web Design

PERANCANGAN DAN PEMROGRAMAN WEB SEMESTER GANJIL 2017/2018


Background
oHistory of internet
◦ 1969: ARPANET. Early technology, limited access.
Funded by US Department of Defense.
First internet transmission between UCLA and
Standford by UCLA graduate student Charley Kline*.
◦ 1982: Computer Science Network (CSNet).
The emerging of internet to the public.
◦ 1986: UInet. Maintained by R.M. Samik Ibrahim.
◦ 1990: Sir Tim Berners-Lee invented the World Wide
Web (WWW). He developed three fundamental
technologies: HTML, URI, HTTP.
oDefinition: The Internet vs internet?
*http://mailblog.aol.com/2011/10/28/a-conversation-with-internet-pioneer-charley-kline
Introduction
Internet Users: 51% of World Population

Source: http://www.internetworldstats.com/stats.htm
Internet
https://www.digitalunite.com/sites/default/files/images/The-internet.jpg
The Web Timeline
How Internet works?

Client

Client

Web Server

Sumber: https://turbofuture.com/internet/How-The-Internet-Works-In-a-Nutshell
Web Programming
o The Internet and web programming technologies you’ll learn
in this book are designed to be portable, allowing you to
design web pages and applications that run across an
enormous range of Internet-enabled devices.

o Client-side programming technologies are used to build


web pages and applications that are run on the client (i.e., in
the browser on the user’s device).

o Server-side programming—the applications that respond to


requests from client-side web browsers, such as searching
the Internet, checking your bank-account balance, ordering a
book from Amazon, bidding on an eBay auction and
ordering concert tickets.
Web Basics
(Request and Receive Response)
HTTP Request: GET /books/downloads.html HTTP/1.1
Web Basics
(Request and Receive Response)
HTTP Response: HTTP/1.1 200 OK
How do we code in PPW

Laptop B CI / CD
Gitlab Pipeline
Commit
Code using
GIT push

The Internet

Accessing
the web page
Laptop A

HP XYZ HP ABC
What is Git?
ogit is a versioning tool created by Linus
Torvald. He created the tools to review and
combine contribution to his Linux kernel
from thousandof programmer around the
globe.
owe can see “git” as similar to dropbox,
onedrive, google but it is made for
programmer.
oit provides powerful tools for:
◦ text processing, version control and
◦ merge source code from differents programmer
concurrently and efficiently
Git 101
o Clone:
# git clone [url]

oCommit:
# git commit -a

oPush:
# git push

oPull:
# git pull
Client vs Server Side Scripting
CLIENT SIDE SCRIPTING SERVER SIDE SCRIPTING
- Runs on the user’s computer - Executed on the web server
(Browser or scripting host)
- Depends on browser → - Not depend on client: Wide
Browser must support the Range Programmatic
scripting language capabilities→ Programmers
have more flexibility
- User can view the script by - User cannot view the source
using the browser’s source code because the response is
viewing capability an HTML Page
Illlustration Client Side - Server Side
Client Side Scripting Languages
Server Side Scripting Language
Responsive Web Design
Framework for Responsive Web
Web Application Development
There are several trend, tools and best practices uses in Web
Application Development. In this course, student will be taught on
those best practice in different level of understanding:
Understand how it work: (detail explanation is given)
o Client side: Bootstrap
o Web Application Framework: Django
Understand how to do it: (basic concept is explained)
o Version Control, code repository: gitlab
o Test Driven Development: TDD
Know how to use it: (provided for you in the tutorial)
o Continous Integration: gitlab pipelines
o Cloud Computing Deployment: Heroku
o Authentication: oauth, (e.g. login by google account)
Multi-tiered Application Architecture
(Domain Name System)
DNS Resolving
What is DNS, and why we need it?
oDNS is like a phone book for the Internet. If
you know a person’s name but don’t know
their telephone number, you can simply
look it up in a phone book. DNS provides
this same service to the Internet, resolving
name to IP Address.
oEvery Client (Browser, Mobile Phone)
always resolving DNS to IP before
accessing the Server
DNS Resolving

You might also like