Lec 1 2 3 5 4

WEB Technology revision mid tearm

By :Hamada Yasser mohammed

Web developer
Sector coder team
Part1
What is the Internet?

• The Internet is a collection of local, regional, national, and

international computer networks that is linked together to
exchange data and distribute processing tasks.

Who owns the Internet?

There is no single “owner” of the Internet but rather each of the networks
comprising the internet has its own owner such as an Internet Service
Provider (ISP), a government, an enterprise or a university.
Who is Structuring and Controlling The Internet?
• Currently, Internet structure is provided by the following
Entities:
1. Networks from corporations, commercial firms, and
other companies.
2. Telephone companies.
3. Cable companies.
4. Satellite companies.
5. Governments.

Who controls the internet?

• The Internet is a public, cooperative, and independent
network.
• No single entity controls or owns the Internet.
• Several non-profit organizations advise and define
standards for internet such as.
• Internet Corporation for Assigned Names and
Numbers (ICANN).
• Internet 2.
• World Wide Web Consortium (W3C).
Evolution of the Internet
The concept of a network connecting computers was developed by
government and university researchers to improve communication and
research sharing, so they collaborated.

How has this network grown?

Initially, ARPANET connected four nodes. As it expanded, hundreds of

college and university networks joined, consisting of DOS-based,
Windows-based, Macintosh, and UNIX computers. Later, protocols were
developed to unify these networks, with the first being the Network
Control Program.)NCP).

Evolution of the Internet

To standardize network communication, TCP/IP was created and became the
world's most widely used protocol. It enables electronic addressing and data
transmission over the internet. As networks adopted this standard, they could
communicate with any other network using TCP/IP, leading to the birth of the
Internet.

Email quickly followed, as network users wanted fast message transmission and notifications, aligning
with their initial goals.
Over time, new protocols were developed for specific tasks. FTP was created
for file transfers, while UDP was designed for fast, low-latency communication,
allowing data to be sent without waiting for the receiver's confirmation

Uniform Resource Locator (URL)

A URL is required to locate resources on the web, similar to a file name. It consists of two
main parts:

Protocol Identifier (e.g., http) specifies the protocol used.

Resource Name (e.g., www.apple.com) identifies the location.

The two parts are separated by ":" and "//".

Addressing schemes.

An IP address uniquely identifies each device on a network. It follows a

32-bit addressing scheme, divided into four octets (8 bits each),
represented in decimal and separated by dots (e.g., 198.172.168.10).

Domain Name system (DNS)

Computers communicate using IP addresses, but these

numbers are hard for humans to remember. DNS (Domain Name System)
translates domain names (e.g., www.eelu.edu.eg) into numerical IP
addresses (e.g., 196.219.3.89) for easier access.
Names & Addresses: Internet View

 Address: Specifies how to reach an object, has location semantics, and

is computer-friendly (e.g., 192.123.12.2).

 Name: Easier for humans to read and remember, without location

semantics (e.g., www.yahoo.com).

Web Browsers
To access the World Wide Web, you need an Internet connection and a web browser, which retrieves
and displays web pages and other resources like PDFs, images, and videos.

Web Browsers & URI:

 Each resource is identified by a Uniform Resource Identifier (URI).

 URI consists of:
o URN (identifies the name).
o URL (identifies the location, a subset of URI).
 Hyperlinks contain URIs to navigate between resources.

Additional Uses & Major Browsers:

 Browsers can access private networks and local files.

 Popular browsers: Firefox, Chrome, Internet Explorer, Opera, and Safari.

WWW Basics
 HTML (HyperText Markup Language) is a markup language used to
format web documents with tags that define text relationships.

 HTML allows links to navigate between documents, even across

different computers, and supports graphics, audio, and video.

 A website is a collection of related web pages.

 Web browsers use a layout engine to transform HTML into an

interactive document.

How Web Browsing Works

1. User Action: The user types a URL in the browser’s address bar or clicks a
hyperlink.
2. DNS Lookup: The browser extracts the domain name and sends a request to a DNS
server.
3. IP Address Retrieval: The DNS server returns the corresponding IP address of the
website.
4. Request to Web Server: The browser sends a request to the web server using the
retrieved IP address.
5. Data Transmission: The request travels through routers on the Internet to reach the
web server.
6. Response from Server:
o If the resource exists, the web server sends it back to the browser.
o If not, the browser receives a 404 error (resource not found).
7. Display: The browser renders and displays the web page to the user.
Summary of the History of Web Browsers:
1. (1990 Nexus) – First web browser, originally called WorldWideWeb, developed on NeXT
computers.
2.
3. Mosaic (1993) – First commercially available browser; introduced inline images with text.
4.
5. Netscape Navigator (1994) – Became the most popular browser at its peak.
6.
7. Internet Explorer (1995) – Microsoft launched IE 1.0, later dominating with IE 6.0 (2002, 95%
market share).
8.
9. Opera (1996) – First released for Windows, Linux, Android, and iOS; later adapted for mobile
devices and gaming consoles.
10.
11. Mozilla Firefox (2004) – Developed from Netscape’s open-source code; gained popularity
quickly.
12.
13. Safari (2003) – Apple’s default browser for Mac and iOS; Windows version discontinued in
2012.
14.
15. Google Chrome (2008) – Fast and modern browser, built on Chromium with elements from
WebKit and Firefox.
16.
17. Vivaldi (2015) – Offers customizable themes and UI based on website colors.
18.
19. Microsoft Edge (2015) – Replaced Internet Explorer, now Chromium-based and default on
Windows.
20.
21. Brave (2016) – Focused on privacy, blocking ads and trackers.

Key Takeaways:

 Browsers evolved from simple text-based interfaces to modern, fast, and secure applications.

 Chrome, Safari, and Edge dominate today’s market.

 New browsers like Brave and Vivaldi focus on privacy and customization.

-------------------------------------------------------------------
How do you think the search engine
works?

How Search Engines Work

1. Crawling 🕷️
o A search engine sends bots (spiders) to explore web pages.
o These bots follow links and collect information from as many pages as possible.

2. Indexing 🕷️
o The search engine analyzes and stores important terms from each page.
o It creates a master index that links words to the pages where they appear.

3. Ranking & Retrieval 🕷️

o When a user enters a query, the search engine finds pages with matching terms.
o Results are ranked based on:
 Relevance (how well the page matches the query).
 Popularity (measured by backlinks, user engagement, etc.).

4. Displaying Results 🕷️
o The most relevant and popular pages appear first.
o Google and other engines use advanced algorithms (like PageRank) to improve
accuracy.

🕷️ Conclusion: Search engines crawl, index, rank, and retrieve information to give users the best search
results!

What Search Engines Can Do (Summary)

 Search engines do not gather information in real-time when a user searches.

 Instead, they continuously collect and index web data to provide instant results.
Search Engines Overview

 Search engines use advanced algorithms on powerful computers to process millions of

queries per minute in multiple languages.

 They deliver high-quality answers in seconds, ranking results by relevance and filtering
out low-value content.

 They can search various file formats, including PDFs, Word documents, PowerPoint files,
and even images or videos.

Search Engine Architecture

How Search Engines Work (Summary)

Web Crawling:

Search engines use automated programs called web crawlers or spiders

to continuously browse the web.

Crawlers start with popular sites, follow links to discover new pages, and
store copies for indexing.

Important pages are crawled more frequently based on factors like

update frequency and incoming links.

1. Indexing:

The fetched pages are analyzed and stored in a searchable index.

o
Stop words (e.g., "a," "the") are removed, and words are normalized
using stemming (e.g., "technologists" → "technology").

o A forward index is created, then converted into an inverted

index for fast searching.
o

Query Processing & Ranking:

When a user searches, the engine retrieves relevant pages from the
index.

Results are ranked based on multiple factors, including keyword

occurrences, document length, and link popularity.

The exact ranking algorithms are trade secrets of search engines.

Top of Form
Lec3
Web applications are modeled using three levels:

1. Content Level:
o Defines the structure of information, similar to a database schema.
o
o Ensures consistency by eliminating redundancies.
o
o Content remains unchanged even if the information updates frequently.
o
2. Hypertext Structure Level:
o Organizes content into nodes and links for efficient navigation.
o
o Allows multiple access paths to the same content.
o
o Uses recurring navigation patterns to prevent user confusion.
3. Presentation Level:
o Focuses on the layout and user interface for a consistent brand experience.
o
o Prioritizes structure over artistic design.
Mapping Between Levels
 The three levels are interconnected and should be mapped explicitly.

 Personalization can adjust hypertext access while keeping a unified content model.

 Data-heavy applications (e.g., databases) focus on content and hypertext, while presentation-
driven applications (e.g., online stores) emphasize UI design.

Summary: Levels of Modeling

The process of modeling web applications depends on the modeler's approach and the type of
application. There are two main approaches:

1. Information-Driven Approach
2.
o Starts with content modeling.
o
o Suitable for data-heavy applications where structured information is key.
o
3. Presentation-Driven Approach
4.
o Starts with the user interface and presentation aspects.
o
o Ideal for visually focused applications like corporate portals or e-commerce sites.

The choice between these approaches depends on the application’s purpose and requirements.

Summary: Content Modeling & UML Class Diagrams

1. Content Modeling in Web Applications

 Static vs. Dynamic Modeling:

o Static web applications only require basic data modeling.
 o Complex applications need behavioral modeling, including static and dynamic aspects.
 Key Characteristics to Consider:
o
o Document-centric nature & multimedia: Supports different media formats
o .
o Integration with existing data & software: Web applications often rely on pre-existing
databases and software components.

 Goal of Content Modeling:
o Convert functional and informational requirements into structured models.
o Use class diagrams for structure and state/interaction diagrams for behavior.

2. UML Class Diagrams in Content Modeling

 Definition:
o A UML Class Diagram represents the structure of a system using classes, attributes,
methods, and relationships.
 Class Diagram Components:

o Class Name (Mandatory).
o
o Attributes (State variables, with data types).
o
o Methods (Operations/services of the class).
o
o Relationships (Connections between classes).
o
 Visibility Modifiers:
o + (Public) – Accessible from anywhere.
o
o - (Private) – Accessible only within the class.
o
o # (Protected) – Accessible within the class and its subclasses.

3. Perspectives of UML Class Diagrams

 Conceptual Perspective: Represents domain concepts, used for high-level planning.
 Specification Perspective: Focuses on interfaces and Abstract Data Types (ADTs).
 Implementation Perspective: Shows how classes implement their interfaces in the final system.
 Choosing a Perspective:
o Early Development: Conceptual model.
o Analysis Phase: Mix of Conceptual & Specification perspectives.
o Design Phase: Specification evolving into Implementation perspective.
This structured approach ensures efficient content modeling, clear navigation, and well-organized class
diagrams for web applications.

Summary: Hypertext Modeling in Web Applications

1. Importance of Hypertext in Web Applications

 Hypertext is a key aspect in modeling web applications, ensuring structured navigation.

 A well-designed hypertext structure helps prevent users from getting lost and reduces
cognitive overload.
 The goal of Hypertext (Navigation) Modeling is to define user navigation paths through the
web application’s content.

2. Hypertext Structure Modeling Concepts

 Hypertext is composed of:

o Nodes (Pages or Documents)
o Links (Connections between Nodes)
 The content model serves as the foundation for creating the hypertext model.

 Two main approaches to Hypertext Structure Modeling:
1. Derived from the Content Model:
 Nodes are created based on existing content objects.
 Links can be automatically generated based on content relationships.
2. Independent Hypertext Modeling:
 Some methods, like OOHDM (Object-Oriented Hypermedia Design Method),
model the hypertext structure directly based on user navigation requirements.

3. Hypertext Views & Navigation Classes

 Web applications often have different user roles, each requiring a distinct navigation view.
o Example: Reviewing System
 Author View: Can submit and manage their papers.
 Reviewer View: Can access assigned papers.
 PC Chair View: Can view all submitted papers and reviewer profiles.
 UML Representation
o Nodes (Pages) are represented as Navigation Classes (<<navigation class>>).
o Links between nodes are represented as Navigation Links (<<navigation link>>).
4. Types of Links in WebML (Web Modeling Language)

1. Intra-Page Links
o Source & destination exist within the same page.
o Example: Clicking a link to jump to the summary section on the same page.
2. Inter-Page Links
o Link source and destination are on different pages.
o Example: Clicking an author's name to view their papers.

5. Types of Links Based on Functionality

 Navigation Links: Allow movement between content nodes (e.g., linking a paper to its author).
 Process Links: Start a process (e.g., initiating a paper review).
 External Links: Direct users to external sources (e.g., conference formatting guidelines).

6. Object-Oriented Hypermedia (OO-H) Modeling - Types of Links

1. I-Links (Internal Links): Connect nodes within the same navigation requirement (e.g., linking a
reviewer to their review details).
2. T-Links (Traversal Links): Link to nodes covering different navigation requirements (e.g., linking
an author to their papers).
3. R-Links (Requirement Links): Define dependencies between navigational elements.
4. X-Links (External Links): Point to external resources (e.g., external formatting rules).
5. S-Links (Service Links): Point to services, such as an external search engine.

Key Takeaways

 Hypertext modeling ensures effective user navigation by structuring nodes and links.
 Different types of links help define user flow within a web application.
 Hypertext views must be tailored for different user roles.
 OO-H Modeling provides detailed link classifications, enhancing navigability and usability.

This structured approach optimizes user experience and ensures efficient content accessibility in web
applications. 🕷️
Lec4
Summary: Presentation Modeling in Web Applications

1. What is Presentation Modeling?

 Similar to traditional software engineering, presentation modeling focuses on the user

interface (UI), determining the look and feel of a web application.
 Unlike traditional applications, web applications use the web page as the main visualization
unit.
 The goal of presentation modeling is to ensure that the UI is:
o Simple and self-explanatory.
o Supports smooth interaction with the application.
o Provides clear communication and representation of information.

2. Key Aspects of Presentation Modeling

(A) Structure of the Page

Presentation modeling defines a uniform presentation concept by designing recurring elements like:

 Headers and footers (e.g., website navigation bar).

 Text fields, images, forms, and buttons.

It is structured into three hierarchical levels:

1. Presentation Page (<<page>>)

o Represents a full web page shown to the user.
o Can contain multiple presentation units.
2. Presentation Unit (<<presentation unit>>)
o Represents logical fragments of a page.
o Groups related UI elements.
o Corresponds to a node from the hypertext model.
3. Presentation Element (<<presentation element>>)
o Basic building blocks of the UI (e.g., text, images, audio, video).

🕷️ Example: In a paper reviewing system, the page “PaperPage” contains:

 Fields (paper title, abstract, etc.).

 Links (to the full version of the paper, author details).
 Buttons (to add a new review).
 The "AuthorPage" contains a list of authors and detailed information for each author.
(B) Behavior of the Page

 Defines user interactions and how UI elements respond to user actions.

 Helps ensure that users don’t get lost while navigating.
 Provides orientation aids such as:
o Breadcrumb navigation (showing the current path).
o Session history (showing recently visited pages).

🕷️ Example: Reviewer Interaction

 A reviewer logs in and uses the navigation bar to go to their assigned papers list.
 The list is retrieved from the content level and displayed.
 The reviewer selects a paper, and the paper details view is displayed.
 This process can be modeled using sequence diagrams or state diagrams.

3. UML Representation of Presentation Modeling

 Uses UML Composition Diagrams to visualize page structures.

 Stereotype classes (<<page>>, <<presentation unit>>) help distinguish:
o Pages (e.g., PaperPage, AuthorPage).
o Units within pages (e.g., list of papers, author details).
 Behavioral aspects can be modeled with sequence diagrams (showing user interactions with UI
components).

Key Takeaways

✅ Presentation modeling defines both the UI structure and behavior.

✅ Three levels: Page → Presentation Unit → Presentation Element.
✅ Clear navigation paths help users avoid confusion.
✅ UML diagrams help visualize structure and interaction flows.
✅ Behavioral diagrams (e.g., sequence diagrams) model user interactions.

This structured approach ensures consistent UI design and enhanced user experience in web
applications! 🕷️
Summary: Web Application Architectures

Web architecture defines how a web application is structured, implemented, and understood. It
consists of components, their interfaces, and relationships. There are three key properties of web
architecture:

1. Architecture Describes Structure

 Defines the static (components, interfaces, relationships) and dynamic (behavior) aspects of a
web application.
 Acts as a blueprint for software, similar to a building design in construction.

2. Architecture Bridges Analysis & Implementation

 Breaks down functional requirements into smaller software components.

  Uses an iterative approach to connect:
o Analysis (requirements, system design)
o Implementation (coding, software development)
 Helps ensure that the system meets both functional and quality requirements.

3. Architecture Improves Understanding

 Dividing a software system into smaller models simplifies complexity.

 Allows easier management, debugging, and maintenance.
 Helps developers and stakeholders better understand the system.

Key Takeaways

✅Web application architecture defines structure and behavior.

✅Acts as a bridge between analysis and implementation.
✅Simplifies complexity by dividing the system into components.
✅Ensures the application is manageable, scalable, and maintainable.

This structured approach helps in building efficient and maintainable web applications! 🕷️

Functional Requirements for System Architecture

The architecture of a web application is shaped by three main factors:

1. Functional Requirements

 Define the services and features the system must provide.

 The architecture should support the application's core functionalities, ensuring smooth
operations and usability.

2. Quality Considerations

 Performance (speed, efficiency).

 Scalability (handling growth in users and data).
  Security (protection against attacks).
 Maintainability (ease of updates and modifications).

3. Technical Constraints

 System Software (Operating System, Database, Web Server).

 Middleware (e.g., CORBA, API integrations).
 Legacy Systems (older software that needs to be integrated).
 Development Standards (coding guidelines, security policies).
 Distribution Aspects (deploying across multiple locations).

4. Role of the Software Architect

 The architect’s experience and decision-making significantly impact the final architecture.
 They balance functional needs, technical constraints, and quality factors.

Key Takeaways

✅Functional needs drive system architecture.

✅Quality factors (scalability, performance) shape design decisions.
✅Technical constraints (OS, middleware, legacy systems) influence implementation.
✅An experienced architect ensures a balanced and efficient system.

A well-defined architecture ensures a robust, scalable, and maintainable web application! 🕷️

Summary: Web Application Architectures

ayering Aspect

 Definition: Web applications follow a multi-tier architecture to separate concerns.

 Structure:
1. Presentation Layer – User interface.
 2. Application Layer – Business logic.
3. Data Layer – Databases and storage.
 Benefit: Improves scalability, maintainability, and modularity.

data Aspect

 Types of Data:
o Structured Data (organized, follows a schema, e.g., databases, XML).
o Unstructured Data (e.g., images, videos, audio).
 Challenges: Unstructured data is harder to process automatically.

️Middleware

 Definition: A software layer that enables communication between different components of a

system.
 Purpose: Helps integrate heterogeneous systems without rebuilding them.

Types of Middleware

1. RPC-Based Middleware – Remote functions behave like local calls.

2. Object Request Broker (ORB) – Allows distributed objects to communicate.
3. Message-Oriented Middleware (MOM) – Supports asynchronous message exchange.

4️Distributed Computing Architectures

 Distributed Object Middleware (DOM)

o Uses Remote Procedure Calls (RPC) to make remote objects appear local.
 Virtual Shared Memory (VSM)
o Allows multiple processors to share memory virtually.
 Message-Oriented Middleware (MOM)
o Ensures message delivery even if the receiver is offline.
 Peer-to-Peer (P2P)
o All nodes have equal responsibilities, used in file sharing, messaging, and VoIP.
 Service-Oriented Middleware (SOM)
o Supports Service-Oriented Architecture (SOA) for flexibility and interoperability.
️ Key Takeaways

✅Layered architecture improves organization and scalability.

✅Middleware integrates distributed systems efficiently.
✅Various distributed computing models exist for different needs.
✅SOA & SOM ensure flexibility and interoperability in modern applications.

🕷️ A well-structured architecture is the backbone of a successful web application! 🕷️

Web Architecture Components

Web architectures consist of several key components that work together to deliver web applications.

1️ Client

 Definition: The user agent (e.g., browser, mobile app) that interacts with the web application.
 Examples: Chrome, Firefox, Safari, mobile apps.

2️ Web Server

 Function: Handles client requests via web protocols like HTTP/HTTPS.

 Examples: Apache, Nginx, Microsoft IIS.

3️ Firewall

 Function: Controls network security by filtering incoming and outgoing traffic based on
predefined rules.
 Purpose: Protects against unauthorized access.

4️Proxy Server

 Function:
o Caches web pages to improve loading speed.
o Customizes content for users.
o Enables user tracking and access control.
5️ Database Server

 Function: Stores and manages structured data (e.g., relational databases).

 Examples: MySQL, PostgreSQL, Oracle Database.

6️ Media Server

 Function: Handles non-structured bulk data like audio, video, and images for streaming and
delivery.
 Examples: Wowza Media Server, Adobe Media Server.

7️ Content Management Server

 Function: Stores semi-structured data (e.g., XML documents) for managing digital content.
 Examples: WordPress, Joomla, Drupal.

8️ Application Server

 Function: Manages business logic and application processes.

 Examples: Tomcat, JBoss, WebLogic.

️ Summary & Key Takeaways

✅Clients interact with web applications via browsers or apps.

✅Web servers handle HTTP/HTTPS requests.
✅Firewalls secure networks from unauthorized access.
✅Proxy servers cache pages, customize content, and track users.
✅Database servers store structured data (e.g., tables).
✅Media servers manage and stream multimedia content.
✅Content management servers handle semi-structured data.
✅Application servers process business logic and workflow.

🕷️ Each component plays a critical role in delivering a scalable, secure, and efficient web application!
Lec5

Web Application Design – Presentation Design

1. Website Presentation Concept

 A website presentation is a virtual presentation conducted in a website format instead of

traditional methods.
 It consists of:
o The presenter: Responsible for website and presentation design.
o The viewers: Access the website using individual passwords to view the content.
 Presentation design determines how multimedia content is structured and displayed on the
website.

2. Tools for Web Application Presentation Design

Tools can be categorized into two main types:

1. Conventional Page Editors, such as:

o Dreamweaver
o FrontPage
 2. Content Management Systems (CMS), such as:
o WordPress
o Joomla
o Drupal

3. Conventional Page Editors

Advantages:

✅Familiar environment similar to standard software.

✅Allows direct content formatting and customization.

Disadvantages:

❌Requires HTML knowledge for advanced tasks.

❌Work is done at the page level, making it hard to maintain a global perspective of the design.
❌Mixing layout, navigation, and interaction may work for small projects but not for complex
applications.

4. Content Management Systems (CMS)

 A CMS is software that helps users create, manage, and modify website content without
requiring deep technical knowledge.
 It allows anyone to easily add and manage content on a website.

Examples of CMS Platforms:

1. WordPress
o Powers over 30% of websites globally.
o Easy to use, flexible, and reliable.
o Available for free or at affordable pricing.
2. Joomla
o The second most popular CMS after WordPress.
o Provides powerful web page creation without coding skills.
3. Drupal
o More complex than WordPress or Joomla.
o Designed by developers for developers, offering advanced capabilities.
5. Benefits of Content Management Systems (CMS)

✅User-Friendly Interface: Allows non-technical users to manage content easily.

✅Real-Time Content Updates: Enables immediate control and structuring of website content.
✅Seamless Content Integration: Stores content in databases rather than hardcoded web pages.
✅Scalability: Makes it easy to add new pages, update themes, and modify elements.

6. Drawbacks of Content Management Systems (CMS)

❌Slow website performance due to multiple plugins and complex functions.

❌Limited SEO optimization—some features may require additional purchases.
❌Higher costs for advanced themes, plugins, and specialized features.

Conclusion

 For small websites or temporary projects, Conventional Page Editors are a practical choice.
 For larger and more dynamic websites, CMS platforms are the best option despite potential
performance and SEO challenges.
Interaction Design in Web Applications
1. What is Interactive Web Design?

 Interactive web design integrates inbuilt software, modules, or features to create an engaging
user experience (UX).
 It ensures active user participation in a website or web application.
 Interaction design focuses on five key dimensions:
1. Words – Text and labels that guide users.
2. Images – Visual elements like icons and graphics.
3. Space – Layout and structure of the design.
4. Time – Dynamic interactions and animations.
5. Behavior – How users interact with the interface.
 Interaction design combines visual, dynamic, functional, and technical aspects to enhance the
web experience.

2. Four Main Aspects of Web Interaction

1. User Interaction
o Converts user intentions into HTML elements.
o Covers information transport, layout, interaction, navigation, and direct access to
content.
2. User Interface (UI) Organization
o Defines how information is presented using different approaches:
1. Full-page HTML with scripts/plugins – Allows user interaction without
unnecessary navigation.
2. Full-page HTML without scripts – Users navigate using internal links.
3. Partial view approach – Displays meaningful portions of content, allowing users
to navigate for more details.
3. Navigation Design
o Defines elements needed for smooth navigation and user orientation.
o Link Representation:
 Anchors (Hyperlinks) should be self-explanatory.
 Icons can enhance link visibility.
o Link Internals:
 Users trigger navigation by clicking anchors (URLs).
 The system processes the request and loads the destination page.
4. User Activities
o Covers how users interact with content, forms, buttons, and system processes.
o Focuses on workflow, interaction efficiency, and user behavior tracking.
3. Configuration Management in Web Interaction

 Configuration Management involves:

✅Managing technical descriptions of the system.
✅Tracking and managing changes during system evolution.
✅Ensuring stability and consistency in complex systems.

Conclusion

 Interaction design ensures seamless user engagement through well-structured navigation, UI

organization, and configuration management.
 A well-designed interactive web application enhances usability, efficiency, and user
satisfaction.

User Interface (UI) Design in Web Applications

1. What is a User Interface (UI)?

 The User Interface (UI) of a web application displays large amounts of information, operations,
and relationships.
 UI design must balance technical functionality with visual aesthetics to create an interface that
is:
✅ Operational – Works effectively.
✅ Usable – Easy to navigate and understand.
✅ Adaptable – Can change based on user needs.

2. Processes of User Interface Design

The UI design process consists of several key phases, depending on the project’s complexity:

1. Functionality Requirements Gathering

o Identifying the core functions of the system.
o Defining project goals and user needs.
2. User Analysis
o Understanding who the users are and their expectations.
o Key questions to ask:
a. What does the user want?
b. How will the system fit into their daily activities?
c. What is their level of technical knowledge?
d. What design styles appeal to them?
3. Information Architecture
o Structuring the layout, navigation, and flow of information.
o Examples: Website page hierarchy, menu structure, and user pathways.
4. Prototyping
o Creating wireframes or interactive screens to visualize the interface.
o Focuses on layout and functionality without detailed visuals.
5. Usability Testing
o Testing prototypes with real users to get feedback.
o One technique: “Think Aloud Protocol” – Users describe their thoughts while using the
interface.
6. Graphic Interface Design
o Finalizing the look & feel of the interface based on:
✅ Prototypes
✅ Usability test findings
✅ User feedback

Conclusion

A well-designed UI ensures that the user experience (UX) is smooth, intuitive, and effective. The UI
design process follows a structured approach, from understanding user needs to testing and refining
the interface.

Web Metrics and Web Quality Dimensions

1. What are Web Metrics?

 Web metrics are measurements used to track website performance and user behavior.
  They help website owners analyze trends and optimize their sites for better engagement.

2. Examples of Web Metrics

✅ Visitor Traffic

 Measures how many people visit the site.

 High traffic usually indicates success.

✅ Traffic Sources

 Shows where visitors come from (e.g., search engines, social media, direct links).

✅ Top Viewed Pages

 Identifies which pages get the most visits.

 Helps optimize low-performing pages.

✅ Bounce Rate

 Measures how many users leave the site quickly.

 A high bounce rate means visitors aren’t finding what they need.

✅ Conversion Rate

 Tracks how many visitors complete an action (e.g., making a purchase, signing up).

3. Dimensions in Web Quality

Web quality is crucial for success, ensuring a website is functional, user-friendly, and effective.

(1) Web Features Dimension

Focuses on three key aspects:

1️ Content – Includes text, images, videos, and interactive elements.

2️ Navigation – Ensures easy access to information using clear menus and links.
🕷️ Presentation – The visual design of the website, impacting user experience.

🕷️ 52% of web quality metrics focus on presentation, highlighting its importance.

(2) Quality Characteristics Dimension

Based on the ISO 9126 standard, it includes:

✅ Functionality – Ensures the site has all the needed features.

✅ Reliability – Keeps performance stable over time.
✅ Usability – Makes the site easy to use.
✅ Efficiency – Optimizes resources for fast performance.
✅ Maintainability – Allows easy updates and modifications.
✅ Portability – Ensures the site works across different devices and browsers.

🕷️ Most web metrics focus on usability because user experience is a priority.

(3) Lifecycle Processes Dimension

Focuses on different stages of website development:

1️ Development Process – Building the website.

2️ Exploitation Process – Running and supporting the website.
3️ Maintenance Process – Updating and evaluating the website.

🕷️ Most web metrics focus on maintenance and exploitation, as websites constantly evolve.

Conclusion

Web metrics and web quality dimensions help improve website performance, usability, and user
satisfaction. By analyzing metrics like traffic, bounce rate, and conversion rate, businesses can optimize
their sites for better results.

GOOD LUCK❤
ENG:Hamada
Yasser Mohammed