From 471fbd7c1ce52f8f9d7f8280fbc32c1ee7e447e8 Mon Sep 17 00:00:00 2001 From: Serhii Horodilov Date: Sun, 25 Feb 2024 21:30:54 +0200 Subject: [PATCH] GH-202: Add styles and complete 1NF presentation steps --- src/_static/scss/presentation-common.scss | 121 ++++++ .../scss/presentation-normalization.scss | 31 ++ src/pres/normalization/index.html | 407 ++++++++++-------- 3 files changed, 369 insertions(+), 190 deletions(-) diff --git a/src/_static/scss/presentation-common.scss b/src/_static/scss/presentation-common.scss index 2dae0650c..50e37ef11 100644 --- a/src/_static/scss/presentation-common.scss +++ b/src/_static/scss/presentation-common.scss @@ -40,3 +40,124 @@ display: none; } } + +/* colors */ +// todo: adjust colors +$background: #212121; +$on-background: white; +$surface: #212121; +$on-surface: white; +$primary: #212121; +$on-primary: white; +$secondary: #212121; +$on-secondary: white; + +body { + background: $background; +} + +/* fonts */ +$base-font-size: 3.75rem; +$title: $base-font-size * 2.5; +$subtitle: $base-font-size *2; +$section: $base-font-size * 1.5; + +body { + font-size: $base-font-size; + + h1 { + font-size: $title + } + + h2 { + font-size: $subtitle + } + + h3 { + font-size: $section + } + + small { + font-size: $base-font-size * 0.5; + } +} + +/* content align */ +.text-start { + text-align: start +} + +.text-center { + text-align: center +} + +.text-end { + text-align: end +} + +h1, h2, h3, caption { + @extend .text-center; + margin: 0 auto; +} + +/* impress presentation */ +$step-width: 1800px; + +#impress { + pointer-events: none; + + .step { + display: block; + position: relative; + width: $step-width; + padding: 60px; + + background-color: $surface; + color: $on-surface; + } + + .title, + #title { + h1 { + font-size: $title * 2; + } + + h2 { + font-size: $subtitle * 2; + } + } + + .overview, + #overview { + position: fixed; + background: none; + display: none; + } + + .db-table { + width: 75%; + + margin: auto auto 20px; + + font-family: Monospaced, monospace; + font-size: $base-font-size * 0.75; + + th, td { + padding: 1svh 3svw; + } + + th { + @extend .text-center; + + font-weight: bold; + font-size: $base-font-size * 0.8; + + background-color: $secondary; + color: $on-secondary; + } + } + + .description { + padding: 0 20px; + } +} diff --git a/src/_static/scss/presentation-normalization.scss b/src/_static/scss/presentation-normalization.scss index e69de29bb..574a6cc33 100644 --- a/src/_static/scss/presentation-normalization.scss +++ b/src/_static/scss/presentation-normalization.scss @@ -0,0 +1,31 @@ +@import "./presentation-common"; + +#normalization[aria-roledescription=presentation] { + #definition { + width: $step-width * 0.66; + padding: 0 0 120px 120px; + } + + .requirements { + h3 { + @extend .text-start; + } + } + + #mixed-data-types--1nf, + #no-mixed-data-types--1nf { + table { + margin-right: auto; + margin-left: auto; + width: 50%; + } + } + + #repeating-groups--1nf { + table { + margin-right: auto; + margin-left: auto; + width: 50%; + } + } +} diff --git a/src/pres/normalization/index.html b/src/pres/normalization/index.html index d8b828091..493a60aae 100644 --- a/src/pres/normalization/index.html +++ b/src/pres/normalization/index.html @@ -36,26 +36,28 @@ data-min-scale="0" data-perspective="1000"> -
+

Database normalization

-
-

- Normalization is a process of organizing data in a database so that it is free from redundancy and dependency. - It helps to eliminate data inconsistencies and anomalies, thereby improving data integrity. Normalization is a - set of rules or guidelines to design a database schema in such a way that it avoids data duplication, data - redundancy, and data inconsistency. +

+ + Normalization is a process of organizing data in a database so that it is free from redundancy and dependency. + It helps to eliminate data inconsistencies and anomalies, thereby improving data integrity. Normalization is a + set of rules or guidelines to design a database schema in such a way that it avoids data duplication, data + redundancy, and data inconsistency. +

-
+
@@ -69,28 +71,29 @@

Database normalization

- - - + + + - - - + + +
prombery877.75Advanced1 sword, 4 rings7.75Advanced1 sword, 4 rings
wheed1997Almost 7Intermediate18 copper coinsAlmost 7Intermediate18 copper coins
-
+

Insertion anomalies

-

- There are circumstances in which certain facts cannot be recorded at all. +

+ + There are circumstances in which certain facts cannot be recorded at all. +

@@ -106,40 +109,42 @@

Insertion anomalies

prombery87 - 7.75 - Advanced - 1 sword, 4 rings + 7.75 + Advanced + 1 sword, 4 rings wheed1997 - Almost 7 - Intermediate - 18 copper coins + Almost 7 + Intermediate + 18 copper coins acen1999 - 1 - Beginner - + 1 + Beginner +
-
-
- When a new player acen1999 join the game, they have nothing in their inventory. - Therefore, the details of any player who have at least one item can be recorded, but a newly game member - who has no items cannot be recorded, except by setting the inventory to null. +
+ When a new player acen1999 join the game, they have nothing in their inventory. + Therefore, the details of any player who have at least one item can be recorded, but a newly game member + who has no items cannot be recorded, except by setting the inventory to null. +
-

Update anomalies

- The same information can be expressed on multiple rows; therefore updates to - the relation may result in logical inconsistencies. + + The same information can be expressed on multiple rows; therefore updates to + the relation may result in logical inconsistencies. +

@@ -157,46 +162,48 @@

Update anomalies

prombery87 7.75 Advanced - 1 sword, 4 rings + 1 sword, 4 rings acen1999 - 1 + 1 Beginner - 1 wizard hat + 1 wizard hat wheed1997 - Greater than 7 - Intermediate - 18 copper coins + Greater than 7 + Intermediate + 18 copper coins acen1999 - 2 + 2 Beginner - 1 wizard hat, 1 robe + 1 wizard hat, 1 robe
-
-
- The same information can be expressed on multiple rows, therefore updates to the relation may result in - logical inconsistencies. If the wheed1997 increase their level, when the - rank should be updated as well. But if the update is only partial successful, then the - relation is left in an inconsistent state. Specifically. the relation provides conflicting information - on "level -- rank" for "wheed1997" player, and on "inventory" and "level" for "acen1999". +
+ The same information can be expressed on multiple rows, therefore updates to the relation may result in + logical inconsistencies. If the wheed1997 increase their level, when the + rank should be updated as well. But if the update is only partial successful, then the + relation is left in an inconsistent state. Specifically. the relation provides conflicting information + on "level -- rank" for "wheed1997" player, and on "inventory" and "level" for "acen1999". +
-
+

Deletion anomalies

- Under certain circumstances, the deletion of data representing certain facts - necessitates the deletion of data representing completely different facts. + + Under certain circumstances, the deletion of data representing certain facts + necessitates the deletion of data representing completely different facts. +

@@ -231,17 +238,18 @@

Deletion anomalies

-
-
- If a player looses their items completely, the record must be deleted, unless the inventory - field is set to null. This leads to the loosing all other information about a player. +
+ If a player looses their items completely, the record must be deleted, unless the inventory + field is set to null. This leads to the loosing all other information about a player. +
-
-

First normal form

+
+

First normal form

Requirements

    @@ -249,8 +257,8 @@

    Requirements

    Row order should not be used to convey information
  • - Data types should not be mixed within the same column - (And the RDBMS won't let you do it anyway) + Data types should not be mixed within the same column
    + (and the RDBMS won't let you do it anyway)
  • Tables should have their primary keys @@ -262,189 +270,203 @@

    Requirements

-
-
+
+
- + - - - + + + - - - + + + - - - + + +
Player Level
username level
prombery877.75
prombery877.75
wheed1997Almost 7
wheed1997Almost 7
acen19991
acen19991
+
Mixed types are not allowed
+
+
+
+
- + - - - + + + - - - + + + - - - + + +
Player Level
username level
prombery877
prombery877
wheed19976
wheed19976
acen19991
acen19991
-
-
- - Data types should not be mixed within the same column +
Mixed types are not allowed
-
+
- + - + - + - + - + - + - +
Player Inventory
username inventory
prombery871 sword, 4 rings1 sword, 4 rings
wheed199718 copper coins18 copper coins
acen19991 wizard hat, 1 robe1 wizard hat, 1 robe
+
Repeating groups are eliminated
+
+
+
+
- + - + - + - + - + - +
Player Inventory
username item_type item_quantity
prombery87 sword 1
prombery87 ring 4
wheed1997 copper coin 18
acen1999 wizard hat 1
acen1999 robe 1
-
-
- - Repeating groups should be eliminated +
Repeating groups are eliminated
-
+
- + - + - + - + - + - + - + - + - + - + - +
Player Inventory
username item_type item_quantity
prombery87 sword11
prombery87 ring44
wheed1997 copper coin1818
acen1999 wizard hat11
acen1999 robe11
-
- - Tables should have their primary keys -
-
+
+
+ +

Second normal form

Requirements

@@ -454,14 +476,15 @@

Requirements

-