Empowerment Technology Reviewer

About This Reviewer

Welcome to Your Study Companion

This comprehensive reviewer is designed to help you master key concepts in Empowerment Technology. Whether you're preparing for exams or enhancing your understanding, this interactive guide covers all essential topics with practical examples and engaging content.

🎯 Learning Objectives

Master web design principles, database commands, programming concepts, mathematical foundations, and networking fundamentals essential for modern technology applications.

Bilingual Support

Switch seamlessly between English and Tagalog to enhance your learning experience and comprehension.

Progress Tracking

Monitor your study progress with visual indicators and stay motivated as you advance through topics.

Mobile Responsive

Study anywhere, anytime with our fully responsive design that works perfectly on all devices.

Interactive Code Examples

Learn with hands-on code examples, syntax highlighting, and copy-to-clipboard functionality.

How to Use This Reviewer

  1. Navigate: Use the sidebar menu to jump to any topic or search for specific concepts.
  2. Language: Toggle between English and Tagalog using the language switcher in the top-right corner.
  3. Study: Click on section headers to expand/collapse content and track your progress.
  4. Practice: Work through code examples and quiz questions to reinforce your learning.
Web Design (HTML & CSS)

Introduction to Web Design

Web design combines HTML for structure, CSS for styling, and JavaScript for interactivity to create engaging web experiences.

💡 Key Concept

HTML provides the skeleton, CSS adds the visual appeal, and JavaScript brings the page to life with dynamic functionality.

HTML Fundamentals

HTML (HyperText Markup Language) is the foundation of web pages, using tags to structure content.

Essential HTML Tags

  • <html> - Root element
  • <head> - Document metadata
  • <body> - Visible content
  • <div> - Container element
  • <p> - Paragraph
  • <a> - Hyperlink
  • <img> - Image

HTML Attributes

  • class - CSS class selector
  • id - Unique identifier
  • src - Source URL
  • href - Link destination
  • alt - Alternative text
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home Section</h2>
            <p>This is the main content area.</p>
            <img src="image.jpg" alt="Description of image">
        </section>
    </main>
    
    <footer>
        <p>© 2025 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

CSS Styling

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements.

CSS Selectors

  • element - Element selector
  • .class - Class selector
  • #id - ID selector
  • element:hover - Pseudo-class

CSS Properties

  • color - Text color
  • background - Background styling
  • margin - Outer spacing
  • padding - Inner spacing
  • border - Border styling
CSS 
/* Modern CSS Styling */
:root {
    --primary-color: #6366f1;
    --secondary-color: #f59e0b;
    --text-color: #1f2937;
    --bg-color: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.button {
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
    
    .button {
        width: 100%;
        padding: 16px;
    }
}
📝 Quick Quiz: What does CSS stand for?
Computer Style Sheets
Cascading Style Sheets
Creative Style Sheets
Colorful Style Sheets
Basic SQL Commands

Introduction to SQL

SQL (Structured Query Language) is the standard language for managing relational databases.

🎯 SQL Purpose

SQL enables you to create, read, update, and delete data (CRUD operations) in databases efficiently.

Essential SQL Commands

Data Retrieval

  • SELECT - Retrieve data
  • WHERE - Filter conditions
  • ORDER BY - Sort results
  • LIMIT - Limit results

Data Modification

  • INSERT - Add new records
  • UPDATE - Modify existing data
  • DELETE - Remove records

Database Structure

  • CREATE DATABASE - Create database
  • CREATE TABLE - Create table
  • ALTER TABLE - Modify table
  • DROP TABLE - Delete table

Advanced Operations

  • JOIN - Combine tables
  • GROUP BY - Group data
  • HAVING - Filter groups
SQL 
-- Create a database and table
CREATE DATABASE company_db;
USE company_db;

CREATE TABLE employees (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL,
    position VARCHAR(50),
    salary DECIMAL(10,2),
    department_id INT,
    hire_date DATE
);

-- Insert sample data
INSERT INTO employees (name, position, salary, department_id, hire_date) 
VALUES 
    ('Juan Dela Cruz', 'Developer', 75000.00, 1, '2023-01-15'),
    ('Maria Santos', 'Designer', 65000.00, 2, '2023-02-20'),
    ('Pedro Garcia', 'Manager', 90000.00, 1, '2022-11-10');

-- Retrieve data with conditions
SELECT name, position, salary 
FROM employees 
WHERE salary > 70000 
ORDER BY salary DESC;

-- Update employee salary
UPDATE employees 
SET salary = salary * 1.10 
WHERE department_id = 1;

-- Get average salary by department
SELECT department_id, AVG(salary) as avg_salary
FROM employees 
GROUP BY department_id
HAVING AVG(salary) > 60000;

-- Delete employees with low performance
DELETE FROM employees 
WHERE hire_date < '2023-01-01' AND salary < 50000;

Common SQL Functions

Function Purpose Example
COUNT() Count records SELECT COUNT(*) FROM employees
SUM() Sum values SELECT SUM(salary) FROM employees
AVG() Average value SELECT AVG(salary) FROM employees
MAX() Maximum value SELECT MAX(salary) FROM employees
MIN() Minimum value SELECT MIN(salary) FROM employees
📝 Quick Quiz: Which SQL command is used to retrieve data from a database?
GET
SELECT
RETRIEVE
FETCH
Java Programming

Introduction to Java

Java is a versatile, object-oriented programming language known for its "write once, run anywhere" philosophy.

☕ Java Features

Platform independence, object-oriented design, automatic memory management, strong typing, and extensive library support.

Object-Oriented Programming Concepts

Classes & Objects

Classes are blueprints for objects. Objects are instances of classes that contain data and methods.

Inheritance

Allows a class to inherit properties and methods from another class, promoting code reusability.

Encapsulation

Bundling data and methods together while hiding internal implementation details from external access.

Polymorphism

The ability of objects to take on multiple forms, enabling the same interface to work with different types.

Java 
// Java OOP Example
public class Vehicle {
    // Encapsulation: private fields
    private String brand;
    private int year;
    protected double price;
    
    // Constructor
    public Vehicle(String brand, int year, double price) {
        this.brand = brand;
        this.year = year;
        this.price = price;
    }
    
    // Getter and Setter methods
    public String getBrand() {
        return brand;
    }
    
    public void setBrand(String brand) {
        this.brand = brand;
    }
    
    // Method that can be overridden (Polymorphism)
    public void displayInfo() {
        System.out.println("Brand: " + brand + ", Year: " + year + ", Price: $" + price);
    }
    
    // Method for starting the vehicle
    public void start() {
        System.out.println(brand + " vehicle is starting...");
    }
}

// Inheritance: Car extends Vehicle
class Car extends Vehicle {
    private int doors;
    private String fuelType;
    
    public Car(String brand, int year, double price, int doors, String fuelType) {
        super(brand, year, price); // Call parent constructor
        this.doors = doors;
        this.fuelType = fuelType;
    }
    
    // Method overriding (Polymorphism)
    @Override
    public void displayInfo() {
        super.displayInfo();
        System.out.println("Doors: " + doors + ", Fuel Type: " + fuelType);
    }
    
    public void honk() {
        System.out.println("Car is honking: Beep! Beep!");
    }
}

// Main class to demonstrate usage
public class VehicleDemo {
    public static void main(String[] args) {
        // Creating objects
        Vehicle vehicle = new Vehicle("Generic", 2020, 25000);
        Car car = new Car("Toyota", 2023, 35000, 4, "Gasoline");
        
        // Demonstrating polymorphism
        Vehicle[] vehicles = {vehicle, car};
        
        for (Vehicle v : vehicles) {
            v.displayInfo(); // Calls appropriate method based on object type
            v.start();
            System.out.println("---");
        }
        
        // Car-specific method
        car.honk();
    }
}

Common Java Constructs

Construct Syntax Example
Variable Declaration type variableName = value; int age = 25;
If Statement if (condition) { } if (age >= 18) { ... }
For Loop for (init; condition; update) { } for (int i = 0; i < 10; i++) { ... }
While Loop while (condition) { } while (x > 0) { ... }
Array type[] arrayName = {...}; int[] numbers = {1, 2, 3, 4, 5};
📝 Quick Quiz: Which of these is NOT a principle of Object-Oriented Programming?
Encapsulation
Inheritance
Polymorphism
Compilation
Math for Computing

Statistics in Computing

📊 Statistical Measures

Understanding measures of central tendency and variability is crucial for data analysis in computing.

Central Tendency

  • Mean (Average): \( \bar{x} = \frac{\sum x_i}{n} \)
  • Median: Middle value when sorted
  • Mode: Most frequently occurring value

Data Types

  • Qualitative: Categorical data (colors, names)
  • Quantitative: Numerical data (age, income)
  • Discrete: Countable values
  • Continuous: Measurable values
Java - Statistics Example 
import java.util.*;

public class StatisticsCalculator {
    public static void main(String[] args) {
        int[] data = {85, 92, 78, 96, 87, 89, 91, 83, 95, 88};
        
        // Calculate mean
        double mean = calculateMean(data);
        System.out.println("Mean: " + mean);
        
        // Calculate median
        double median = calculateMedian(data);
        System.out.println("Median: " + median);
        
        // Find mode
        int mode = findMode(data);
        System.out.println("Mode: " + mode);
    }
    
    public static double calculateMean(int[] data) {
        int sum = 0;
        for (int value : data) {
            sum += value;
        }
        return (double) sum / data.length;
    }
    
    public static double calculateMedian(int[] data) {
        Arrays.sort(data);
        int n = data.length;
        
        if (n % 2 == 0) {
            return (data[n/2 - 1] + data[n/2]) / 2.0;
        } else {
            return data[n/2];
        }
    }
    
    public static int findMode(int[] data) {
        Map frequency = new HashMap<>();
        
        for (int value : data) {
            frequency.put(value, frequency.getOrDefault(value, 0) + 1);
        }
        
        int mode = data[0];
        int maxFreq = 0;
        
        for (Map.Entry entry : frequency.entrySet()) {
            if (entry.getValue() > maxFreq) {
                maxFreq = entry.getValue();
                mode = entry.getKey();
            }
        }
        
        return mode;
    }
}

Boolean Logic & Number Theory

A B A AND B A OR B NOT A A XOR B
000010
010111
100101
111100
🔢 Number Theory Applications
  • GCD/LCM: Used in algorithm optimization
  • Modular Arithmetic: Essential for cryptography
  • Prime Numbers: Foundation of encryption algorithms
📝 Quick Quiz: What is the median of the dataset [2, 4, 6, 8, 10]?
4
6
8
5
Computer Fundamentals

Computer System Components

💻 System Architecture

A computer system consists of hardware, software, and firmware working together to process information.

Hardware Components

  • CPU: Central Processing Unit - brain of computer
  • RAM: Random Access Memory - temporary storage
  • Storage: HDD/SSD - permanent data storage
  • Motherboard: Connects all components

Input/Output Devices

  • Input: Keyboard, mouse, microphone, camera
  • Output: Monitor, speakers, printer
  • Storage: USB drives, external hard drives

Software Types

  • System Software: Operating systems, drivers
  • Application Software: Word processors, games, browsers
  • Programming Software: IDEs, compilers, debuggers

Data Processing Cycle

  1. Input: Data entry into system
  2. Processing: CPU performs calculations
  3. Output: Results displayed/saved
  4. Storage: Data saved for future use

Operating System Functions

Function Description Examples
Process Management Controls running programs Task Manager, Activity Monitor
Memory Management Allocates RAM to applications Virtual memory, Garbage collection
File Management Organizes files and folders File Explorer, Finder
Device Management Controls hardware devices Device drivers, Plug and Play
Security Management Protects system and data User accounts, Firewall, Antivirus
📝 Quick Quiz: Which component is considered the "brain" of the computer?
RAM
CPU
Hard Drive
Motherboard
Flowcharting

Introduction to Flowcharts

Flowcharts are visual representations of algorithms and processes using standardized symbols and arrows to show the flow of operations.

🔄 Purpose of Flowcharts

Flowcharts help in planning, analyzing, and communicating complex processes in a clear, visual manner that's easy to understand and follow.

Flowchart Symbols

Start/End (Oval)

Represents the beginning or end of a process. Every flowchart must have exactly one start and at least one end symbol.

Process (Rectangle)

Indicates an action or process step. Contains instructions, calculations, or operations to be performed.

Decision (Diamond)

Represents a decision point with Yes/No or True/False outcomes. Has one input and two outputs based on the condition.

Input/Output (Parallelogram)

Used for data input (reading) or output (displaying/printing). Shows data flow in and out of the process.

Connector (Circle)

Connects different parts of a flowchart, especially when the chart spans multiple pages or sections.

Flow Lines (Arrows)

Show the direction of process flow. Arrows indicate the sequence and path of execution through the flowchart.

Flowchart Example: Calculate Average

Flowchart Steps 
Algorithm: Calculate Average of Three Numbers

1. START
   ↓
2. INPUT: "Enter first number (a)"
   ↓
3. INPUT: "Enter second number (b)"
   ↓
4. INPUT: "Enter third number (c)"
   ↓
5. PROCESS: Calculate sum = a + b + c
   ↓
6. PROCESS: Calculate average = sum / 3
   ↓
7. OUTPUT: "The average is: " + average
   ↓
8. END

Alternative with Decision:
1. START
   ↓
2. INPUT: "Enter three numbers: a, b, c"
   ↓
3. DECISION: Are all inputs valid numbers?
   ├─ YES → Continue to step 4
   └─ NO → Return to step 2
   ↓
4. PROCESS: sum = a + b + c
   ↓
5. PROCESS: average = sum / 3
   ↓
6. OUTPUT: "Average = " + average
   ↓
7. DECISION: "Calculate another average?"
   ├─ YES → Return to step 2
   └─ NO → Continue to step 8
   ↓
8. END
💡 Flowchart Best Practices
  • Use standard symbols consistently
  • Keep flow direction top-to-bottom and left-to-right
  • Label decision branches clearly (Yes/No, True/False)
  • Avoid crossing lines when possible
  • Test your flowchart with sample data

Common Flowchart Patterns

Pattern Purpose Example Use
Sequence Linear execution of steps Simple calculations
Selection (If-Then-Else) Conditional branching Grade classification
Repetition (Loop) Repeat actions while condition is true Input validation
Nested Decision Multiple levels of conditions Complex business rules
📝 Quick Quiz: Which flowchart symbol is used to represent a decision point?
Rectangle
Oval
Diamond
Circle
Computer Numerical Systems

Number System Fundamentals

Computer systems use different number bases to represent and process data efficiently. Understanding these systems is crucial for programming and computer science.

🔢 Why Different Number Systems?

Computers work with binary (0s and 1s) internally, but humans prefer decimal. Hexadecimal and octal provide compact representations for programming and debugging.

Number System Types

Decimal (Base 10)

  • Digits: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
  • Example: 125₁₀ = 1×10² + 2×10¹ + 5×10⁰
  • Use: Human-readable numbers

Binary (Base 2)

  • Digits: 0, 1
  • Example: 1101₂ = 1×2³ + 1×2² + 0×2¹ + 1×2⁰ = 13₁₀
  • Use: Computer internal representation

Hexadecimal (Base 16)

  • Digits: 0-9, A-F (A=10, B=11, C=12, D=13, E=14, F=15)
  • Example: 2A₁₆ = 2×16¹ + 10×16⁰ = 42₁₀
  • Use: Memory addresses, color codes

Octal (Base 8)

  • Digits: 0, 1, 2, 3, 4, 5, 6, 7
  • Example: 17₈ = 1×8¹ + 7×8⁰ = 15₁₀
  • Use: Unix file permissions, compact binary representation

Number System Conversions

Java - Number System Converter 
public class NumberSystemConverter {
    public static void main(String[] args) {
        int decimal = 42;
        
        System.out.println("Decimal: " + decimal);
        System.out.println("Binary: " + decimalToBinary(decimal));
        System.out.println("Hexadecimal: " + decimalToHex(decimal));
        System.out.println("Octal: " + decimalToOctal(decimal));
        
        // Using built-in Java methods
        System.out.println("\nUsing Java built-in methods:");
        System.out.println("Binary: " + Integer.toBinaryString(decimal));
        System.out.println("Hexadecimal: " + Integer.toHexString(decimal).toUpperCase());
        System.out.println("Octal: " + Integer.toOctalString(decimal));
        
        // Converting back to decimal
        String binary = "101010";
        String hex = "2A";
        String octal = "52";
        
        System.out.println("\nConverting to decimal:");
        System.out.println(binary + " (binary) = " + Integer.parseInt(binary, 2));
        System.out.println(hex + " (hex) = " + Integer.parseInt(hex, 16));
        System.out.println(octal + " (octal) = " + Integer.parseInt(octal, 8));
    }
    
    // Manual conversion methods
    public static String decimalToBinary(int decimal) {
        if (decimal == 0) return "0";
        
        StringBuilder binary = new StringBuilder();
        while (decimal > 0) {
            binary.insert(0, decimal % 2);
            decimal /= 2;
        }
        return binary.toString();
    }
    
    public static String decimalToHex(int decimal) {
        if (decimal == 0) return "0";
        
        String hexDigits = "0123456789ABCDEF";
        StringBuilder hex = new StringBuilder();
        
        while (decimal > 0) {
            hex.insert(0, hexDigits.charAt(decimal % 16));
            decimal /= 16;
        }
        return hex.toString();
    }
    
    public static String decimalToOctal(int decimal) {
        if (decimal == 0) return "0";
        
        StringBuilder octal = new StringBuilder();
        while (decimal > 0) {
            octal.insert(0, decimal % 8);
            decimal /= 8;
        }
        return octal.toString();
    }
    
    // Binary to Decimal
    public static int binaryToDecimal(String binary) {
        int decimal = 0;
        int power = 0;
        
        for (int i = binary.length() - 1; i >= 0; i--) {
            if (binary.charAt(i) == '1') {
                decimal += Math.pow(2, power);
            }
            power++;
        }
        return decimal;
    }
}

Conversion Quick Reference

Decimal Binary Octal Hexadecimal
0000000
1000111
2001022
3001133
4010044
5010155
6011066
7011177
81000108
91001119
10101012A
11101113B
12110014C
13110115D
14111016E
15111117F
📝 Quick Quiz: What is the decimal equivalent of binary 1101?
11
12
13
14
Basic Computer Networking

Introduction to Computer Networks

Computer networking enables devices to communicate and share resources across different locations, forming the backbone of modern digital communication.

🌐 Network Benefits

Networks enable resource sharing, communication, data backup, collaboration, and access to global information systems like the Internet.

Types of Networks

LAN (Local Area Network)

  • Coverage: Small geographic area
  • Examples: Home, office, school networks
  • Speed: High-speed (10/100/1000 Mbps)
  • Ownership: Private organization

WAN (Wide Area Network)

  • Coverage: Large geographic area
  • Examples: Internet, corporate networks
  • Speed: Variable (depends on technology)
  • Ownership: Multiple organizations/ISPs

WLAN (Wireless LAN)

  • Technology: Wi-Fi (IEEE 802.11)
  • Range: 30-300 meters
  • Advantages: Mobility, easy setup
  • Disadvantages: Security concerns, interference

MAN (Metropolitan Area Network)

  • Coverage: City or metropolitan area
  • Examples: Cable TV networks, city-wide Wi-Fi
  • Size: Between LAN and WAN

Network Components & Devices

Device Function OSI Layer Example Use
Router Routes data between networks Network (Layer 3) Internet connection
Switch Connects devices in a LAN Data Link (Layer 2) Office network
Hub Simple connection point (broadcast) Physical (Layer 1) Legacy networks
Access Point Wireless network access Data Link (Layer 2) Wi-Fi hotspots
Modem Modulates/demodulates signals Physical (Layer 1) Internet service connection
Firewall Security and access control Multiple layers Network protection

Network Protocols & Standards

TCP/IP Protocol Suite

  • TCP: Reliable data transmission
  • IP: Addressing and routing
  • HTTP/HTTPS: Web communication
  • FTP: File transfer

IP Addressing

  • IPv4: 32-bit addresses (e.g., 192.168.1.1)
  • IPv6: 128-bit addresses
  • Private IPs: Local network use
  • Public IPs: Internet communication

DNS (Domain Name System)

  • Purpose: Translate domain names to IP addresses
  • Example: google.com → 172.217.164.110
  • Types: Recursive, iterative queries

Network Security

  • Encryption: Data protection in transit
  • VPN: Secure remote connections
  • Authentication: User verification
  • Access Control: Permission management
📝 Quick Quiz: Which device operates at the Network Layer (Layer 3) of the OSI model?
Switch
Hub
Router
Access Point