Scribd
Upload
4 views

Part 01 - Introduction to Web Development Fundamentals

The document provides an overview of web development fundamentals, covering the web development ecosystem, including front-end, back-end, and full-stack development, along with essential technologies and tools. It discusses key practices such as responsive design, accessibility, and performance optimization, as well as modern trends like Progressive Web Apps and serverless architecture. Additionally, it delves into HTML, CSS, the Document Object Model (DOM), and rendering techniques, emphasizing their importance in creating efficient and user-friendly web applications.

Uploaded by

3sfr3sfr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Part 01 - Introduction to Web Development Fundamentals

The document provides an overview of web development fundamentals, covering the web development ecosystem, including front-end, back-end, and full-stack development, along with essential technologies and tools. It discusses key practices such as responsive design, accessibility, and performance optimization, as well as modern trends like Progressive Web Apps and serverless architecture. Additionally, it delves into HTML, CSS, the Document Object Model (DOM), and rendering techniques, emphasizing their importance in creating efficient and user-friendly web applications.

Uploaded by

3sfr3sfr
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

Advanced Web Programming

Part 01 – Introduction to Web


Development Fundamentals
Dr. Amjad AbuHassan

11/21/2024 Dr. Amjad AbuHassan 1


Overview of the Web
Development Ecosystem

11/21/2024 Dr. Amjad AbuHassan 2


What is the Web Development Ecosystem?
● A collection of technologies, tools, and practices used in the creation and
maintenance of websites and web applications.
● Components
● Front-End Development

● Back-End Development

● Full-Stack Development

● Development Tools and Practices

11/21/2024 Dr. Amjad AbuHassan 3


Front-End Development
● Focuses on the user interface and experience.
● Technologies
● HTML: Structure of web pages.

● CSS: Styling and layout.

● JavaScript: Interactivity and dynamic content.

● Frameworks/Libraries
● React, Angular, Vue.js

11/21/2024 Dr. Amjad AbuHassan 4


Back-End Development
● Manages server-side logic, databases, and application functionality.
● Technologies
● Languages: Node.js, Python, Ruby, Java

● Databases: SQL (MySQL, PostgreSQL), NoSQL (MongoDB)

● Frameworks
● Express.js, Django, Ruby on Rails

11/21/2024 Dr. Amjad AbuHassan 5


Key Differences
● Focus Area:
● Frontend: User Interface Design, Interactivity
● Backend: Data Management, Business Logic, Authentication
● Technologies:
● Frontend: HTML, CSS, JavaScript, Frontend Frameworks
● Backend: Node.js, Python, Ruby, Databases, Backend Frameworks
● Tools:
● Frontend: Browser DevTools, UI/UX Design Tools
● Backend: Server Environments, Database Management Tools, API Testing Tools
11/21/2024 Dr. Amjad AbuHassan 6
Full-Stack Development
● Involves both front-end and back-end development.
● Skill Set:
● Proficiency in both client-side and server-side technologies.

● Benefits:
● Flexibility in development

● Better understanding of the overall application architecture

11/21/2024 Dr. Amjad AbuHassan 7


Development Tools
● IDEs and Text Editors:
● VS Code, Sublime Text, Atom

● Version Control Systems:


● Git, GitHub, GitLab

● Package Managers:
● npm, Yarn

● Build Tools:
● Webpack, Gulp, Grunt

11/21/2024 Dr. Amjad AbuHassan 8


Development Practices
● Responsive Design:
● Ensuring web applications work on various devices and screen sizes.

● Cross-Browser Compatibility:
● Ensuring web applications function correctly across different browsers.

● Accessibility:
● Making web applications usable for people with disabilities.

● Performance Optimization:
● Improving load times and responsiveness.

11/21/2024 Dr. Amjad AbuHassan 9


Modern Web Development Trends
● Progressive Web Apps (PWAs):
● Web applications that provide a native app-like experience.
● Single Page Applications (SPAs):
● Web applications that load a single HTML page and dynamically update as the user interacts
with the app.
● Serverless Architecture:
● Running code without managing server infrastructure.
● Microservices:
● Architecting applications as a collection of loosely coupled services.
11/21/2024 Dr. Amjad AbuHassan 10
Anatomy of an HTTP Request

11/21/2024 Dr. Amjad AbuHassan 23


Overview of HTTP Requests

● Recap

https://www.youtube.com/watch?v=K2qV6VpfR7I

11/21/2024 Dr. Amjad AbuHassan 24


Review of Essential Front-end
Technologies

11/21/2024 Dr. Amjad AbuHassan 25


HTML

11/21/2024 Dr. Amjad AbuHassan 26


Introduction to HTML
● Definition: HyperText Markup Language.

● Purpose: Structuring and presenting web content.

● Core Components: Elements, attributes, tags.

● Versions: HTML4, XHTML, HTML5.

11/21/2024 Dr. Amjad AbuHassan 27


Basic HTML Structure
● Doctype Declaration:
● <!DOCTYPE html>.

● HTML Document Structure:


● <html lang="en">

● <head>

● <body>

11/21/2024 Dr. Amjad AbuHassan 28


HTML Head Section
● Metadata: <meta charset="UTF-8">, <meta name="viewport"
content="width=device-width, initial-scale=1.0">

● Title: <title>Page Title</title>.

● Links and Scripts:


● <link rel="stylesheet" href="styles.css">

● <script src="script.js"></script>
11/21/2024 Dr. Amjad AbuHassan 29
HTML Body Section
● Content Elements: Text, images, links, lists.

● Semantic Elements: <header>, <footer>,


<article>, <section>, <nav>, <aside>.

● Structural Elements: <div>, <span>.

11/21/2024 Dr. Amjad AbuHassan 30


Common HTML Tags
● Headings: <h1> to <h6>.
● Paragraphs: <p>.
● Links: <a href="url">link text</a>.
● Images: <img src="image.jpg" alt="description">.
● Lists: Ordered <ol>, Unordered <ul>, Definition <dl>.

11/21/2024 Dr. Amjad AbuHassan 31


HTML Attributes
● Definition: Additional information about elements.

● Common Attributes: id, class, src, href, alt, style.

11/21/2024 Dr. Amjad AbuHassan 32


HTML Forms
● Purpose: Collecting user input.
● Form Elements: <form>, <input>, <textarea>, <button>, <select>, <option>, <label>
● Attributes: action, method, name, value, placeholder, required.

11/21/2024 Dr. Amjad AbuHassan 33


HTML Tables
● Structure: <table>, <tr>, <td>, <th>.

● Attributes: border, cellpadding,


cellspacing, colspan, rowspan.

11/21/2024 Dr. Amjad AbuHassan 34


HTML Lists
● Types: Ordered lists <ol>, unordered lists <ul>,
definition lists <dl>.

● List Items: <li> for ordered and unordered


lists, <dt> and <dd> for definition lists.

11/21/2024 Dr. Amjad AbuHassan 35


HTML Semantic Elements
● Purpose: Provide meaning and structure.

● Examples: <header>, <nav>, <main>, <footer>, <article>, <section>, <aside>,


<figure>, <figcaption>.

● Benefits: Improved accessibility, SEO, and readability.

11/21/2024 Dr. Amjad AbuHassan 36


HTML5 New Features
● Multimedia: <audio>, <video>.

● Graphics: <canvas>, <svg>.

● Forms: New input types like email, date, range.

● APIs: Geolocation, Local Storage, Web Workers.

11/21/2024 Dr. Amjad AbuHassan 37


HTML Validation
● Importance: Ensure code adheres
to standards.

● Tools: W3C Markup Validation


Service.

11/21/2024 Dr. Amjad AbuHassan 41


CSS

11/21/2024 Dr. Amjad AbuHassan 44


Overview of CSS

● Recap

Next Lecture

11/21/2024 Dr. Amjad AbuHassan 45


DOM

11/21/2024 Dr. Amjad AbuHassan 59


Introduction to the DOM
● Definition: Document Object Model (DOM)

● Purpose: Interface for HTML and XML documents

● Components: Nodes, elements, attributes, text

● Importance: Foundation for interactive web pages

11/21/2024 Dr. Amjad AbuHassan 60


The DOM Tree Structure
● Hierarchy: Parent, child, sibling
relationships

11/21/2024 Dr. Amjad AbuHassan 61


Visual Representation: Diagram of a DOM tree

11/21/2024 Dr. Amjad AbuHassan 62


Types of Nodes in the DOM
● Element Nodes: Represent HTML tags (e.g., <div>, <p>)

● Text Nodes: Represent text within elements

● Attribute Nodes: Represent attributes of elements (e.g., class, id)

● Comment Nodes: Represent comments in the code (e.g., <!-- comment -->)

11/21/2024 Dr. Amjad AbuHassan 63


Accessing DOM Elements

11/21/2024 Dr. Amjad AbuHassan 64


Modifying DOM Elements

11/21/2024 Dr. Amjad AbuHassan 65


Creating and Inserting DOM Elements

11/21/2024 Dr. Amjad AbuHassan 66


Removing DOM Elements

11/21/2024 Dr. Amjad AbuHassan 67


Event Handling in the DOM
● Types of Events: Click, mouseover, keydown, etc.
● Event Listeners: addEventListener, removeEventListener

11/21/2024 Dr. Amjad AbuHassan 68


Debugging DOM Manipulation
● Tools: Browser DevTools, console.log, breakpoints
● Techniques: Inspect element, monitor events, profile performance

11/21/2024 Dr. Amjad AbuHassan 71


DOM Manipulation Libraries
● Popular Libraries: jQuery, D3.js
● Benefits: Simplified syntax, cross-browser compatibility

11/21/2024 Dr. Amjad AbuHassan 72


Rendering

11/21/2024 Dr. Amjad AbuHassan 74


Introduction to Rendering

● Purpose: Converting HTML, CSS, and JavaScript into a visual display


● Components: Rendering engine:
● layout, paint, and composite
● Importance: Key for performance and user experience
● Types of Rendering:
● Client-Side Rendering (CSR): Rendering happens in the browser
● Server-Side Rendering (SSR): Initial rendering happens on the server
11/21/2024 Dr. Amjad AbuHassan 75
Rendering Pipeline Overview

● Stages:
● Parse HTML and CSS: Create the DOM and CSSOM trees
● Construct Render Tree: Combine DOM and CSSOM
● Layout: Calculate geometry of elements
● Paint: Fill pixels on the screen
● Composite: Combine layers and render final image
● Performance Tip: Minimize the amount of CSS and use efficient selectors
11/21/2024 Dr. Amjad AbuHassan 76
Rendering Pipeline Flowchart

11/21/2024 Dr. Amjad AbuHassan 77


DOM Tree Example

11/21/2024 Dr. Amjad AbuHassan 79


CSSOM Tree Example

11/21/2024 Dr. Amjad AbuHassan 80


CSSOM Tree Example cont.

11/21/2024 Dr. Amjad AbuHassan 81


Constructing the Render Tree
● Combining DOM and CSSOM: Create the render tree
● Render Tree: Represents visual elements
● Example:
● DOM: <body>, <h1>, <p>

● CSSOM: Styles for body, h1, p

● Render Tree: Styled h1 and p elements

● Exclusions: Non-visual elements (e.g., <head>, display: none)


● Performance Tip: Avoid complex CSS that can slow down render tree construction
11/21/2024 Dr. Amjad AbuHassan 82
Layout Phase
● Purpose: Calculate position and size of elements
● Process:
● Traverse render tree

● Calculate geometry

● Handle layout dependencies (e.g., flexbox, grid)

● Example: Box model: margin, border, padding, content


● Impact: Affects performance (e.g., reflows)
● Performance Tip: Minimize layout thrashing by reducing layout changes
11/21/2024 Dr. Amjad AbuHassan 84
Box Model Example

11/21/2024 Dr. Amjad AbuHassan 85


Layout Phase Example

11/21/2024 Dr. Amjad AbuHassan 86


Painting Phase
● Purpose: Fill pixels on the screen
● Process:
● Traverse render tree

● Apply styles (e.g., colors, shadows, borders)

● Performance Tip: Use CSS shorthand properties to reduce the amount of code

11/21/2024 Dr. Amjad AbuHassan 87


Diagram: Painting Process
● Render Tree:
● - <button style="background-color: blue; color: white; border: 1px solid black; box-shadow: 2px
2px 5px gray;">Click Me</button>

● Paint:
● - Fill background color: blue

● - Fill text color: white

● - Draw border: 1px solid black

● - Apply box-shadow: 2px 2px 5px gray

11/21/2024 Dr. Amjad AbuHassan 88


Compositing Phase
● Purpose: Combine layers to create the final image
● Layers: Separate layers for elements (e.g., fixed positions, animations)
● Process:
● Composite layers

● Render final image

● Example: Layers for a complex web page with fixed headers and animated content
● Performance Tip: Limit the number of layers to avoid excessive memory usage

11/21/2024 Dr. Amjad AbuHassan 89


Diagram: Compositing Layers
● Layers:
● 1. Background layer

● 2. Content layer

● 3. Fixed header layer

● 4. Animated content layer

● Compositing:
● - Merge layers 1, 2, 3, and 4 to create the final image

11/21/2024 Dr. Amjad AbuHassan 90


Reflows and Repaints
● Definitions:
● Reflow: Layout recalculation

● Repaint: Redrawing elements

● Triggers:
● Reflow: Adding/removing elements, resizing window, changing CSS properties affecting layout

● Repaint: Changing styles (e.g., color, visibility) without affecting layout (affect the appearance)

● Performance Impact: Minimize reflows and repaints for better performance

11/21/2024 Dr. Amjad AbuHassan 91


Reflows and Repaints cont.

● Best Practices:
● Batch DOM updates
● Minimize layout thrashing
● Use CSS transitions/animations

11/21/2024 Dr. Amjad AbuHassan 92


Modern Rendering Techniques
● Client-Side Rendering (CSR):
● Pros: Dynamic, interactive experiences

● Cons: Initial load time, SEO challenges

● Server-Side Rendering (SSR):


● Pros: Faster initial load, improved SEO

● Cons: Increased server load, complexity

11/21/2024 Dr. Amjad AbuHassan 97


Modern Rendering Techniques cont.
● Static Site Generation (SSG):
● Pros: Fast load times, simplicity

● Cons: Limited interactivity, build time

● Hybrid Approaches: Combining CSR, SSR, and SSG

● Future Trends: WebAssembly, Progressive Web Apps (PWAs)

11/21/2024 Dr. Amjad AbuHassan 98

You might also like