Scribd
Upload
94 views33 pages

WDD 01

This document provides an overview of key concepts for a university course on web design and development. It discusses the course's learning outcomes, which involve developing and evaluating application systems to help solve problems. The main topics to be covered are introduced as web concepts and technologies. Specific sub-topics that will be discussed include introductions to web technology and core web concepts. Examples of course documents are also listed.

Uploaded by

rheyliu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
94 views33 pages

WDD 01

This document provides an overview of key concepts for a university course on web design and development. It discusses the course's learning outcomes, which involve developing and evaluating application systems to help solve problems. The main topics to be covered are introduced as web concepts and technologies. Specific sub-topics that will be discussed include introductions to web technology and core web concepts. Examples of course documents are also listed.

Uploaded by

rheyliu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 33

IS556

WEB DESIGN & DEVELOPMENT


Tatap Muka 01
TM01
Konsep-konsep Dan Teknologi
Web

• Capaian Pembelajaran Lulusan (CPL) yang


Dibebankan pada Mata Kuliah
• Level KKNI: 6
•  CPK-11 Mampu membuat dan mengevaluasi
sistem aplikasi dalam membantu dalam penyelesaian
masalah dan pengambilan keputusan berbasis
project.
TM01
Konsep-konsep Dan Teknologi
Web

• CPMK01-1 : Mahasiswa mampu menjelaskan tentang konsep


dan teknik web untuk pengembangan aplikasi
• Pokok Bahasan:
– Konsep-konsep Dan Teknologi Web
 
• Sub-Pokok Bahasan:
– Pengantar Teknologi Web
– Konsep-konsep web
Where Do I Start?
• Where Do I Start?
• What Does a Web Designer Do?
• What Languages Do I Need to Learn?
• What Do I Need to Buy?
Where Do I Start?
• Contoh testimoni
Where Do I Start?
• Where Do I Start?
• Your particular starting point will no
doubt depend on your background and
goals. However, a good first step for
everyone is to get a basic understanding
of how the Web and web pages work
What Does a Web Designer Do?
• If a small website on your own, you will
need to wear many hats
• Large-scale websites are almost always
created by a team of people, numbering
from a handful to hundreds.
• “web design” into four very broad
categories: design, development,content
strategy, and multimedia
Design !
• a number of specializations
• Interaction Design (IxD), User Interface (UI)
design, and User Experience (UX) design.
• Documents : User research and testing reports,
wireframe diagrams, site diagram, Storyboards
and user flow charts
• “web design” into four very broad categories:
design, development,content strategy, and
multimedia
Documents
Documents
Documents
Frontend vs Backend
• Frontend Versus Backend
• You may hear web designers and
developers say that they specialize in
either the frontend or backend of
website creation.
Frontend vs Backend
Frontend vs Backend
Development !
• authoring,
• styling, and
• scripting/programming
How The Web Works
• The Internet Versus the Web
• Serving Up Your Information
• A Word About Browsers
• Web Page Addresses (URLs)
• The Anatomy of a Web Page
• Putting It All Together
The Internet Versus the Web
• The Internet is a network of connected
computers. No company owns the
Internet;
• The Web (originally called the World
Wide Web, thus the “www” in site
addresses) is just one of the ways
information can be shared over the
Internet
Serving Up Your Information
• Server
• HTTP
• Apache or IIS?
• IP
• DNS
A Word About Browsers
• Client- Server
• Internet Explorer, Chrome,
Firefox, and Safari, Opera,
others
• Intranets and Extranets
Web Page Addresses (URLs)
The Anatomy of a Web Page
• HTML  HTML5
The Anatomy of a Web Page
• HTML  HTML5
Putting It All Together
Some Big Concepts You Need To Know
• A Dizzying Multitude of Devices
• Sticking With The Standards
• Progressive Enhancement
• Responsive Web Design
• One Web for All (Accessibility)
• The Need for speed (site Performance)
A Dizzying Multitude of Devices
Sticking With The Standards
• HTML, CSS, and JavaScript standards as
documented by the World Wide Web
Consortium (W3C)
Progressive Enhancement
• Authoring strategy
• Styling strategy
• Scripting strategy
Responsive Web Design
• Responsive web design is a strategy for
providing custom layouts to devices based on
the size of the viewport (browser window).
• The trick to responsive web design is serving
a single HTML document to all devices,
• but applying different style sheets based on
the screen size in order to provide the
mostoptimized layout for that device
Responsive Web Design
Responsive Web Design
One Web for All (Accessibility)
• Design for accessibility
• Four broad categories of disabilities :
Vision impairment., Mobility
impairment, Auditory impairment, &
Cognitive impairment
The Need for speed (site Performance)
• Optimizing
• Minimize HTML and CSS documents
• Keep JavaScript to a minimum.
• Add scripts in a way that load in parallel with
other page assets and don’t block rendering.
• Don’t load unnecessary assets (such as images,
scripts, or JavaScript libraries).
• Reduce the number of times the browser makes
requests of the server (known as HTTP requests).
Terima kasih
Atas Perhatian Anda

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy