BSEB Inter Multimedia & Web Tech cheat sheet

Multimedia = integration of text, graphics, audio, video and animation under one interactive delivery system; a project is hypermedia when the elements are linked non-linearly.

Linear playback presents content in fixed sequence; non-linear (interactive) playback lets the user branch, so authoring tools must support navigation logic, not just timelines.

Authoring metaphors: card/page-based (sequence of screens), icon/event-based (flowchart of events), time-based (timeline with layers), and web-based (HTML/CSS/JS page authoring).

Analog-to-digital conversion requires sampling (discrete time) and quantization (discrete amplitude); bit depth sets quantization levels, sample rate sets the highest representable frequency.

Nyquist rule: sample rate must exceed twice the highest frequency component, so 40 kHz bandwidth needs more than 80 kHz sampling; 44.1 kHz audio captures up to about 22.05 kHz.

File size of uncompressed digital audio in bytes = sample rate x (bit depth / 8) x channels x duration in seconds.

Bitmap (raster) images store a value per pixel and degrade when scaled; vector images store geometric primitives plus attributes and scale without pixelation.

Storage estimate for a raster frame in bytes = width x height x (bit depth / 8); multiply by frame rate and duration for uncompressed video.

Delivery constraints drive design: bandwidth, target device, storage media capacity and playback software determine resolution, compression and element count.

Typeface is the design family; font is a specific style/weight instance. Serif fonts carry stroke endings, sans-serif do not, and both are distinct from decorative/display faces.

Measurements: 1 point = 1/72 inch; 1 pica = 12 points; em is relative to the current font size, so 2em at 16 px equals 32 px.

Leading is vertical line spacing, tracking is uniform spacing across a run of characters, and kerning adjusts the gap between a specific pair.

Legibility rules of thumb: body text commonly 12-16 px on screen, line length about 45-75 characters, and line height around 1.4-1.6 for continuous reading.

RGB is additive (screens, light), CMYK is subtractive (ink on paper); converting RGB to CMYK is lossy because CMYK gamut is narrower.

Color models: hue is the color family angle, saturation is purity, lightness/value is brightness; complementary hues sit opposite on the wheel and maximize contrast.

Raster formats: JPEG is lossy and suited to photographs; PNG is lossless with alpha transparency; GIF is limited to 256 colors and supports simple animation; SVG is XML-based vector.

Resolution: image pixels divided by output size gives effective PPI; a 1200 px wide image printed 6 inches wide yields 200 PPI.

Anti-aliasing smooths jagged edges by blending boundary pixels; it improves perceived quality but does not add real detail to a low-resolution source.

Digital audio chain: capture/transducer, sampling and quantization, editing, compression, then playback through a DAC; each stage can add noise or clipping.

Bit depth sets dynamic range: each extra bit adds roughly 6 dB, so 16-bit is about 96 dB and 24-bit about 144 dB theoretical signal-to-noise ratio.

Common delivery targets: 44.1 kHz/16-bit for music CDs, 48 kHz for video production, and 128-320 kbps for lossy distribution.

Lossless audio compression (FLAC, ALAC) reconstructs the exact samples; lossy codecs (MP3, AAC, Vorbis) discard psychoacoustically masked content and cannot be restored.

Video frame rate conventions: 24 fps cinematic, 25 fps PAL, 30 fps NTSC-derived; interlaced fields refresh twice per frame while progressive scans whole frames.

Video bitrate requirement in bits per second = frame width x frame height x bits per pixel x frames per second, before compression; compression ratios of 50:1 or more are typical.

Container versus codec: MP4, WebM, AVI and MKV are containers; H.264, H.265/HEVC, VP9 and AV1 are codecs that define the compressed bitstream.

Aspect ratio is width:height of the frame (16:9, 4:3); changing ratio without cropping or letterboxing distorts geometry.

Chroma subsampling (4:2:0, 4:2:2) stores color at lower resolution than luma, exploiting the eye's lower chroma acuity to reduce bitrate.

Frame rate and persistence of vision: smooth motion typically needs 12-24 fps or higher; the perceived smoothness depends on frame count and motion distance per frame.

Traditional techniques: cel (hand-drawn), stop-motion (physical objects photographed frame by frame), cut-out, rotoscoping (tracing live footage) and claymation.

Keyframe animation interpolates between defined key poses; tweening computes in-between frames automatically, and easing controls acceleration at the ends of a motion.

Frame-by-frame animation stores every drawing separately and gives full control at high file cost; tweened/symbol-based animation reuses one asset and stores only keyframes.

12 principles include squash and stretch, anticipation, staging, follow-through, slow in/slow out, arcs, exaggeration and timing; they apply to digital motion design too.

Onion skinning displays adjacent frames faintly so the animator can align successive drawings.

Web animation options: CSS transitions and keyframes (declarative, GPU-friendly), SVG SMIL or CSS, JavaScript with requestAnimationFrame, and canvas/WebGL for high-count particle rendering.

GIF animation is limited to 256 colors per frame and no audio; video formats or CSS/JS animation are preferred when color fidelity or sound matters.

File size of frame-based animation grows with frame count x frame area x color depth, so reuse of symbols and limited color palettes are standard size controls.

A document begins with , then a single root containing (metadata, title, linked CSS) and (rendered content).

Semantic landmarks: header, nav, main, article, section, aside, footer. They convey structure to assistive technology and search engines.

Heading levels h1-h6 must not skip levels for visual styling; use CSS for size instead.

Lists: ul for unordered, ol for ordered, dl for description lists with dt/dd pairs.

Links use ; images use where alt is required for informative images and empty for purely decorative ones.

Tables are for tabular data: caption, thead, tbody, th with scope; layout tables are obsolete.

Forms pair with an input id; input types (email, number, date, tel) trigger validation and appropriate mobile keyboards.

Void elements (img, br, hr, input, meta, link) have no closing tag; block elements start on a new line while inline elements flow within text.

Attributes: id must be unique per document, class may repeat, and data-* attributes store custom values readable by scripts.

The box model: content, padding, border, margin. With box-sizing: border-box, declared width includes padding and border.

Specificity order: inline style > id > class/attribute/pseudo-class > element/pseudo-element; !important overrides normal declarations and should be rare.

Cascade and inheritance: later rules of equal specificity win; inherited properties (color, font-family) flow to children while non-inherited ones (margin, border) do not.

Layout: Flexbox for one-dimensional alignment, CSS Grid for two-dimensional layout, and media queries for responsive breakpoints based on viewport width.

Mobile-first design writes base styles for small screens and adds min-width media queries for larger viewports.

WCAG principles are Perceivable, Operable, Understandable, Robust (POUR); conformance levels are A, AA and AAA.

Contrast minimums: 4.5:1 for normal text and 3:1 for large text (18 pt or 14 pt bold) at level AA; 7:1 and 4.5:1 at AAA.

Accessible names come from visible label text, aria-label or alt; keyboard operability requires visible focus indicators and logical tab order.

Color must never be the sole carrier of meaning; pair it with text, pattern or icon so color-blind users receive the same information.

Client-side JavaScript runs in the browser and can be viewed and altered by the user, so it must never enforce security; server-side code validates and authorizes.

DOM manipulation: getElementById, querySelector, createElement, appendChild, textContent; addEventListener binds handlers without overwriting existing ones.

Variables: let is block-scoped and reassignable, const is block-scoped and not reassignable, var is function-scoped and hoisted.

Equality: == performs type coercion while === compares value and type; use === unless coercion is intended.

Asynchronous patterns: callbacks, Promises with then/catch, and async/await with try/catch; fetch returns a Promise resolving to a Response.

Form validation must be repeated server-side; client-side checks improve UX but are bypassable.

Common web attacks: SQL injection (parameterized queries defend), XSS (escape output, use textContent, CSP), CSRF (tokens, SameSite cookies).

HTTP methods and semantics: GET retrieves and is cacheable, POST submits and is not idempotent, PUT/DELETE are idempotent, and status codes 200, 301, 404, 500 signal outcomes.

Separation of concerns: structure in HTML, presentation in CSS, behavior in JavaScript, and data/persistence on the server.

IP addresses identify hosts; DNS resolves domain names to IP addresses through a hierarchy of root, TLD and authoritative servers.

TCP is connection-oriented and reliable (three-way handshake, retransmission); UDP is connectionless with lower overhead, used for streaming and DNS queries.

HTTP is a request-response protocol over TCP; HTTPS adds TLS encryption, integrity and server authentication on port 443 versus 80 for plain HTTP.

URL anatomy: scheme://host:port/path?query#fragment; the fragment is handled by the browser and is not sent to the server.

Publishing workflow: register domain, configure DNS records (A, AAAA, CNAME, MX, TXT), obtain hosting, upload via FTP/SFTP or Git, then test.

Hosting types: shared (low cost, shared resources), VPS/dedicated (more control), and cloud/static hosting (scalable, often CDN-backed).

Bandwidth is data rate (bits per second); latency is delay. Transfer time in seconds is approximately file size in bits divided by throughput in bits per second.

Search engine basics: crawling, indexing and ranking; robots.txt and meta robots control crawling, and sitemaps aid discovery.

Web standards bodies: W3C and WHATWG define HTML/CSS/DOM, IETF publishes RFCs for protocols, and ICANN coordinates domain names.

Project phases: analysis (audience, goals), design (wireframes, storyboards, style guide), development, testing (function, usability, accessibility), deployment and maintenance.

Storyboard defines scene sequence, visuals, audio and interaction; a wireframe defines layout and hierarchy without visual styling.

Scope control: define deliverables, milestones and acceptance criteria before production; change requests are logged and re-estimated.

Copyright: protection arises automatically on fixation; using someone's image, audio or code requires permission, a license or a valid exception such as fair use/fair dealing.

Licenses: Creative Commons variants differ on attribution, commercial use and share-alike; public domain works have no remaining rights; open-source licenses govern code reuse.

Attribution requires the creator, title, source and license; removing a watermark or credit without permission is an ethical and legal breach.

Privacy and consent: collect only necessary personal data, disclose purpose, secure it, and follow applicable rules such as consent for cookies and data-subject rights.

Accessibility and inclusion are ethical obligations as well as technical: provide alt text, captions, transcripts and keyboard access for every media element.

Testing before release: validate markup, check links, test across browsers/devices, measure load performance, and verify contrast and keyboard navigation.

Deliverable checklist: brief, sitemap, wireframes, storyboard, asset list with sources and licenses, style guide, test log and final published site.

Asset provenance log records file name, creator, source URL, license and modification date for every third-party asset used.

Version control with Git: commits record changes, branches isolate work, and merges integrate; a README documents setup and credits.

Performance budget: cap page weight and request count, compress images, lazy-load below-the-fold media, and minify CSS/JS.

Team roles in multimedia production typically split into project manager, designer, developer, content/audio-video specialist and tester.

Ethical review questions: Is the content accurate? Is consent documented? Are sources credited? Does it exclude any user group?

Deadlines and estimation: break work into tasks, estimate per task, add contingency, and track against milestones rather than end-date only.

Post-launch maintenance covers content updates, broken-link checks, security patches, analytics review and accessibility re-audits.