Introduction to MATLAB/SciLab/Web Design (IT-406) - Unit 1 Short Notes

A. INTRODUCTION TO MATLAB

1.1. What is MATLAB?

• MATLAB (Matrix Laboratory) is a high-level technical computing environment designed for matrix manipulations, plotting, algorithm implementation, and data analysis.

• Primary applications: Engineering, scientific research, finance, academia.

• vs. Traditional languages (C/Python):

  • MATLAB is interpreted, matrix-oriented, with built-in functions for linear algebra.

  • C/Python are general-purpose, require explicit loops and external libraries (e.g., NumPy) for matrix operations.

  • MATLAB excels in rapid prototyping; C/Python offer greater control and scalability.

[!TIP] MATLAB’s core strength is vectorized operations—avoid loops for performance.

1.2. The MATLAB Environment

• Desktop Layout:

  • Command Window: Execute commands interactively.

  • Workspace: View variables in memory.

  • Current Folder: Navigate files.

  • Command History: Recall past commands.

  • Editor: Write/edit scripts (.m files).

• Navigation: Drag/drop panes, use Layouts preset.

• Getting Help:

  • help function – basic syntax.

  • doc function – detailed documentation with examples.

  • Search documentation via Help browser.

1.3. Basic Operations & Syntax

• Calculator mode: +, -, *, /, ^ (exponent).

• Order of precedence: PEMDAS (parentheses, exponents, multiply/divide, add/subtract).

• Suppress output: End command with ;.

• ans variable: Stores last unassigned result.

• Formatting numeric output:

  • format short (default, 4 decimals)

  • format long (15 decimals)

  • format bank (2 decimals, currency)

  • format rat (rational approximation)

1.4. Variables and Data Types

• Creation: No explicit declaration; x = 5;

• Naming rules: Start with letter, case-sensitive, no spaces, avoid MATLAB keywords (for, if).

• Fundamental types:

  • double (default numeric)

  • char (string in single quotes: 'text')

  • logical (true/false)

• Special values: Inf (infinity), NaN (Not-a-Number), pi, i/j (imaginary unit).

1.5. Vectors and Matrices (The Core of MATLAB)

• Defining:

  • Row vector: [1 2 3]

  • Column vector: [1; 2; 3]

  • Matrix: [1 2; 3 4]

• Creating vectors/matrices:

  • Colon operator: start:step:end or start:end (step=1).

    Example: 1:10 → [1 2 ... 10]; 1:0.5:5 → [1 1.5 ... 5].

  • linspace(a,b,n) – n linearly spaced points between a and b.

  • logspace(a,b,n) – n logarithmically spaced points.

• Basic operations:

  • Transpose: A' (conjugate transpose), A.' (non-conjugate).

  • Addition/Subtraction: Element-wise, same dimensions.

  • Scalar multiplication: c*A (each element multiplied by c).

  • Matrix multiplication: A*B (inner dimensions must match: size(A,2)==size(B,1)).

    \[ (AB)_{ij} = \sum_{k} A_{ik} B_{kj} \]

  • Element-wise multiplication: A.*B (same size, .* required).

  • Matrix division:

    • A/B ≈ A * inv(B) (right division)

    • A\B ≈ inv(A) * B (left division)

  • Element-wise division: A./B, A.\B.

• Indexing:

  • A(i,j) – row i, column j.

  • A(i) – linear indexing (column-major order).

  • A(end) – last element in that dimension.

• The Dot Operator: Critical for element-wise operations.

  \boxed{\text{Use } .*, ./, .^ \text{ for element-wise multiplication, division, power.}}

[!TIP] Common Pitfall: Forgetting . in .* or ./ causes dimension mismatch errors if A and B aren’t compatible for matrix ops.

1.6. Basic Plotting (2D)

• plot(x,y) – x and y vectors of same length.

• Customization:

  • title('Plot Title')

  • xlabel('X Axis'), ylabel('Y Axis')

  • grid on – add grid lines.

• Multiple datasets: plot(x1,y1, x2,y2) or hold on before subsequent plot.

• New figure window: figure.

1.7. Scripts and Live Scripts

• Scripts (.m files): Sequence of commands; run by filename or Run button.

• Live Scripts (.mlx): Combine code, output, formatted text (markdown, LaTeX); interactive.

B. INTRODUCTION TO SCILAB

2.1. What is Scilab?

• Open-source alternative to MATLAB, licensed under GPL (free).

• Developed by Scilab Consortium (now ESI Group).

• Use cases: Academia, research, industrial numerical computation where cost is a constraint.

2.2. The Scilab Environment

• Desktop: Console (command line), Browser (help/demos), Editor (SciNotes), Variable Browser.

• Navigation: Similar pane management to MATLAB.

• Getting Help:

  • help – command-line help.

  • apropos keyword – search functions.

  • demogui – launch demo GUI.

2.3. Basic Syntax and Operations

• Calculator operations identical to MATLAB.

• Suppress output with ;.

• ans variable for last result.

• format options: format short, format long, etc.

2.4. Variables and Data Types

• Dynamic typing: No declaration; type determined at assignment.

• Common types:

  • Matrices (default numeric type)

  • Polynomials (%s type, e.g., %s = [1 2 3] represents $$\displaystyle x^2 + 2x + 3 $$)

  • Strings ("text" or 'text')

  • Booleans (%T for true, %F for false)

• Special constants: %pi, %e, %inf, %nan.

2.5. Matrices and Linear Algebra (The Core of Scilab)

• Defining: Same [] syntax as MATLAB.

• Creating special matrices:

  • zeros(m,n) – zero matrix.

  • ones(m,n) – matrix of ones.

  • eye(n) or eye(m,n) – identity matrix.

  • rand(m,n) – uniform random numbers (0–1).

• Colon operator: start:step:end identical to MATLAB.

• Operations:

  • Transpose: A' (or A.' for non-conjugate).

  • Addition/Subtraction, scalar multiplication: same as MATLAB.

  • Matrix multiplication: A*B; element-wise: A.*B.

  • Matrix division: A/B, A\B; element-wise: ./, .\.

• Indexing:

  • A(i,j) – 2D indexing.

  • A(i) – linear indexing (column-major).

  • $` – last index in a dimension: `A($) last element, A(1:$)` all rows? Actually, `A($) is last element linearly; A($,j) last row, column j.

• Element-wise operators: .^, .*, ./, .\ (same as MATLAB).

2.6. Basic Plotting (2D)

• plot(x,y) – same as MATLAB.

• Customization: title, xlabel, ylabel, xgrid (toggle grid on x-axis; ygrid for y).

• Multiple curves: plot(x1,y1,x2,y2).

• Clear figure: clf.

2.7. Scripts and Functions

• Scripts: .sce or .sci files; execute with exec('file.sce') or from editor.

• Functions:

  
  function [out1, out2] = fname(in1, in2)
  
    // body
  
  endfunction
  
  

  Save in separate file named fname.sci or at end of script.

C. COMPARATIVE ANALYSIS: MATLAB vs. SCILAB

3.1. Licensing and Cost

3.2. Syntax and Compatibility

• Similarities: Matrix-centric, similar operators (*, .*, ', :).

• Key Differences:

  | Feature | MATLAB | Scilab | |------------------|-------------------------|------------------------| | Polynomials | Vectors of coefficients | %s type | | Last index | end | $ | | Function def | function y = f(x) ... end | function [y] = f(x) ... endfunction | | String quotes | Single ' ' | Double " " or single ' ' | | Logical true/false| true/false | %T/%F |

• Toolboxes/Modules: MATLAB has extensive commercial toolboxes; Scilab uses ATOMS modules (community-contributed).

3.3. Environment and Tooling

• MATLAB: Full-featured IDE with advanced debugger, profiler, app designer.

• Scilab: Simpler IDE; basic debugging via pause or exec; less polished but functional.

3.4. Community and Support

• MATLAB: Large commercial community, official MathWorks support, extensive documentation, Stack Overflow presence.

• Scilab: Smaller open-source community, forums, mailing lists; documentation good but less comprehensive.

D. INTRODUCTION TO WEB DESIGN (HTML & CSS FUNDAMENTALS)

4.1. How the Web Works (Conceptual)

• Client-Server model: Browser (client) requests resources from a web server.

• Browsers: Render HTML/CSS, execute JavaScript.

• Core triad:

  • HTML – structure/content.

  • CSS – presentation/style.

  • JavaScript – behavior/interactivity.

4.2. HTML (HyperText Markup Language) – Structure

• Basic Document Structure:

  
  <!DOCTYPE html>
  
  <html>
  
    <head>
  
      <title>Page Title</title>
  
    </head>
  
    <body>
  
      <!-- visible content -->
  
    </body>
  
  </html>
  
  

• Core Elements:

  • Headings: <h1> (largest) to <h6> (smallest).

  • Paragraphs: <p>Text</p>.

  • Text formatting: <strong> (bold), <em> (italic), <br> (line break), <hr> (horizontal rule).

  • Lists:

    
    <ul> <!-- unordered -->
    
      <li>Item</li>
    
    </ul>
    
    <ol> <!-- ordered -->
    
      <li>Item</li>
    
    </ol>
    
    

  • Links: <a href="url">Link Text</a> – absolute (https://example.com) vs. relative (page.html).

  • Images: <img src="path.jpg" alt="Description"> (self-closing).

• Semantic HTML5: Tags for meaningful structure:

  <header>, <nav>, <main>, <section>, <article>, <footer>.

  Improves accessibility and SEO.

• Tables:

  
  <table>
  
    <tr><th>Header</th></tr>
  
    <tr><td>Data</td></tr>
  
  </table>
  
  

  Attributes: colspan (merge columns), rowspan (merge rows).

• Forms and Input:

  
  <form action="submit.php" method="post">
  
    <label for="name">Name:</label>
  
    <input type="text" id="name" name="name">
  
    <input type="checkbox" name="subscribe"> Subscribe
  
    <input type="radio" name="gender" value="male"> Male
  
    <select name="city"><option>Delhi</option></select>
  
    <textarea name="msg"></textarea>
  
    <input type="submit" value="Submit">
  
  </form>
  
  

  Common input types: text, password, checkbox, radio, submit.

4.3. CSS (Cascading Style Sheets) – Presentation

• Ways to Apply CSS:

  1. Inline: <p style="color:red;"> (avoid for maintainability).

  2. Internal: <style> p { color: red; } </style> in <head> (for single-page).

  3. External: <link rel="stylesheet" href="styles.css"> (best practice – reusable, cacheable).

• CSS Syntax: selector { property: value; }

• Common Selectors:

  | Selector Type | Example | Meaning | |----------------|------------------|-----------------------------| | Element | p | All <p> tags | | Class | .highlight | Elements with class="highlight" | | ID | #header | Element with id="header" | | Descendant | nav a | Links inside <nav> | | Grouping | h1, h2, h3 | Apply to all listed |

• The Box Model:

  DiagramSEARCH: CSS box model diagram

  \boxed{\text{Box Model: Content → Padding → Border → Margin}}

  • box-sizing: border-box includes padding/border in width/height.

• Key Properties:

  • Text: font-family, font-size, color, text-align.

  • Background: background-color, background-image.

  • Layout:

    • width, height

    • display: block (new line), inline (same line), inline-block, none (hide).

    • position: static (default), relative, absolute, fixed.

    • float: left, right (legacy layout).

  • Modern Layout – Flexbox:

    
    .container {
    
      display: flex;
    
      flex-direction: row; /* or column */
    
      justify-content: center; /* main axis */
    
      align-items: center; /* cross axis */
    
    }
    
    

• Cascading and Specificity: Styles resolved by:

  1. Importance: !important overrides.

  2. Specificity: Inline (1000) > ID (100) > Class (10) > Element (1).

  3. Source order: Later rules override earlier if specificity equal.

  [!TIP] Avoid !important; use specific selectors instead.

4.4. Development Workflow

• Project structure:

  
  /project
  
    index.html
  
    css/
  
      styles.css
  
    js/
  
      script.js
  
    images/
  
  

• Editor: VS Code, Sublime Text (with HTML/CSS extensions).

• Linking external CSS: <link rel="stylesheet" href="css/styles.css">.

• Debugging: Browser Developer Tools (F12) – Inspect Element to view/modify HTML/CSS live, check box model, network requests.

E. PRACTICAL APPLICATIONS & CONTEXT

5.1. Typical Use Cases

5.2. Setting Up the Development Environment

• MATLAB: Download from MathWorks (trial/student license); install; activate.

• Scilab: Download from scilab.org; install (no license needed).

• Web Design:

  1. Create project folder.

  2. Use text editor (VS Code).

  3. Create index.html with basic structure and "Hello World".

  4. Create css/styles.css and link it.

  5. Open index.html in browser; use DevTools to inspect.

• Verification: Run a simple script in MATLAB/Scilab (e.g., plot(1:10)); view HTML page in browser.