MARKDOWN

• Re-type img/ and organize them (FunDep, ER, UML, Rel, Design, Misc?).
• There is no good naming convention for the labels in the markdown file.
• Having one bib. per section: https://github.com/jgm/pandoc/issues/771. Warning, this is a different issue from using --reference-location=block --reference-links cf. https://pandoc.org/MANUAL.html.
• Add “Jump to solution” to every problem?
• Add “question” environments to all the problems and solutions: every time a problem is separated in questions, organize the solutions accordingly. So, do something like

Solution to Problem 1.1 (A database catalog for a campus) Pb 1.1 – Solution to Q. 1 … Pb 1.1 – Solution to Q. 2

Ideally, all the problems would be separated in questions.

DRAWINGS

• Check hat every ER diag. has a (correct) description.

MAKEFILE

• fig_svg should wait for fig to be completed before starting.
• The Phony rules should be called only if needed.
• How to get two rules for the latex files (to compile them, and to clean them)?
• How to get two rules for the SQL files (to test them, and to beautify them)?

HTML

• Make the site more accessible. Cf. for instance https://wave.webaim.org/report#/https://spots.augusta.edu/caubert/db/ln/CSCI_3410_lecture_notes.html
• Make a more “mobile-friendly” version. Defer loading of image?
• Make all the images clickable to open (in pop-ups?) better versions of them, or make the svg zoomable. Cf. (best one?) https://github.com/ariutta/svg-pan-zoom or https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f or http://www.petercollingridge.co.uk/tutorials/svg/interactive/pan-and-zoom/ or even https://stackoverflow.com/questions/25866342/zoomable-inline-svg
• Add alt text

About this last aspect:

The alt attribute is useful in many cases (cf. https://www.w3schools.com/tags/att_alt.asp ):

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

You can see more reasons at https://www.w3.org/TR/html51/semantics-embedded-content.html#examples-of-scenarios-where-users-benefit-from-text-alternatives-for-images

Not having those alt attributes prevents the document from being accessible to everyone, and prevent the html document from being “valid” (cf. https://validator.w3.org/nu/?doc=http%3A%2F%2Fspots.augusta.edu%2Fcaubert%2Fdb%2Fln%2FCSCI_3410_lecture_notes.html )

In pandoc, the syntax is

![Alt text](img/reverse_eng_01.jpeg "Title")
\

(note the “" afterward, to prevent the image of being displayed as a figure). I have a convention for the relational models, i.e., in

![
CAR(VIN (PK), Make, Model, Year)
DRIVER(State (PK), Licence\_number (PK), Name, Address)
INSURANCE(Policy\_Number (PK), Insured\_Car (FK to CAR.VIN), Insured\_Driver\_State (FK to DRIVER.State), Insured\_Driver\_Num (FK to DRIVER.Licence\_number), Rate)
PRICE(Stock\_number (PK), Car\_Vin (FK to CAR.VIN), Price, Margin)
](fig/rel_mod/car_01)
\

the part between ![ and ](fig/rel_mod/car_01) is a description of the image you can see at https://spots.augusta.edu/caubert/db/ln/CSCI_3410_lecture_notes.html#example.

It’s not ideal, but it gives to someone without images, a good internet connection, etc., the possibility to still get the content. As of now, the lecture notes do not have a good “notation” to describe

• Entity-relational models,
• Functional dependencies,
• UML diagram,

And have not introduced “alt” attributes for (almost) any of the images that are displayed from the folder “img”.

CSS

• Wrap the line code. Now it is prevented by

    white-space: pre; div.sourceCode { margin: 1em 0; }

  cf. the discussion at https://stackoverflow.com/q/57812345/

  Line Wrapping in DB notes – Works more or less if there is only 1 line wrapped:

  .sourceLine{
  white-space: pre-wrap;
  display:inline-block;
  width:35m;
  }
  
  .sourceLine{
      background-position: right;
      background-repeat: no-repeat;// repeat-y;
  //    background-size: 1em 1em;
      background-size: 1em 100%;
      background-image: url('data:image/png;base64,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');
  }
  
  .sourceLine:first-line{
  background:blue;
  //  background:none!important
  }

  Attempt on the left:

  .sourceLine{
  white-space: pre-wrap;
  display:inline-block;
  width:35m;
  }
  
  .sourceLine{
  background-color:red;
  padding-left : 1em;
  background-position: left;
  background-repeat: repeat-y;
  //    background-size: 1em 1em;
  background-size: 1em;// 100%;
  background-image: url('data:image/png;base64,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');
  }
  .sourceLine:first-line{
  background-color:yellow;
  padding-left:-1em!important;
  margin-left:-1em;
  
  /*
  background:transparent!important;
  background-image:none!important;
  background:none!important;
      background-size:0 0!important;
  */
  }

  Almost there?

  .sourceLine{
  white-space: pre-wrap;
  display:inline-block;
  width:35m;
  }
  
  .sourceLine{
  background-color:red;
  margin-right:1em;
      background-position: right;
      background-repeat: repeat-y;
  //    background-size: 1em 1em;
      background-size: 1em;// 100%;
      background-image: url('data:image/png;base64,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');
  
  }
  .sourceLine:first-line{
  background-color:yellow;
  /*
  background:transparent!important;
  background-image:none!important;
  background:none!important;
      background-size:0 0!important;
  */
  }

• add actual links in code.

PDF

• The header are sometimes wrong (in the “Exercises” or “Problems” section, they keep the header of the last section).
• Offer multiple pdf format (binder, fewer margins)?
• One of the unicode symbol does not exist in the Linux Libertine font: ⌛ (U+231B)
• Some code lines and links are too long.
• The TOC for the probems has weird spacings when it comes to double-digits problems.

SQL

• Make sure the code is consistent with double quotes and single quotes.

OTHER

• It could be of interest to offer other formats (cf. http://pandoc.org/ for a complete list), like epub, docx, or mediawiki. Some preliminary tests have been conducted, with the command

  pandoc lectures_notes.md -t nameofoutputformat -o nameofoutput.ext

  Most formats listed below could use some formatting, but could be compiled. For example, all the HTML slideshows compiled but they just have horizontal line breaks as the end of each slide. These are all the formats tested, taken from pandoc.org, that can be exported from markdown (with exception of odt, html, pdf, and normal pandoc markdown):

  • asciidoc (AsciiDoc) or asciidoctor (AsciiDoctor)
  • beamer (LaTeX beamer slide show)
  • commonmark (CommonMark Markdown)
  • context (ConTeXt)
  • docbook or docbook4 (DocBook 4)
  • docbook5 (DocBook 5)
  • docx (Word docx)
  • dokuwiki (DokuWiki markup)
  • epub or epub3 (EPUB v3 book)
  • epub2 (EPUB v2)
  • fb2 (FictionBook2 e-book)
  • gfm (GitHub-Flavored Markdown), or the deprecated and less accurate markdown_github; use markdown_github only if you need extensions not supported in gfm.
  • haddock (Haddock markup)
  • html5 (HTML, i.e. HTML5/XHTML polyglot markup)
  • html4 (XHTML 1.0 Transitional)
  • icml (InDesign ICML)
  • ipynb (Jupyter notebook) (not tested)
  • jats_archiving (JATS XML, Archiving and Interchange Tag Set) (not tested)
  • jats_articleauthoring (JATS XML, Article Authoring Tag Set) (not tested)
  • jats_publishing (JATS XML, Journal Publishing Tag Set) (not tested)
  • jats (alias for jats_archiving)
  • jira (Jira wiki markup)
  • json (JSON version of native AST)
  • latex (LaTeX)
  • man (roff man)
  • markdown_mmd (MultiMarkdown)
  • markdown_phpextra (PHP Markdown Extra)
  • markdown_strict (original unextended Markdown)
  • mediawiki (MediaWiki markup)
  • ms (roff ms)
  • muse (Muse),
  • native (native Haskell),
  • opml (OPML)
  • opendocument (OpenDocument)
  • org (Emacs Org mode)
  • plain (plain text),
  • pptx (PowerPoint slide show) (not tested)
  • rst (reStructuredText)
  • rtf (Rich Text Format)
  • texinfo (GNU Texinfo)
  • textile (Textile)
  • slideous (Slideous HTML and JavaScript slide show)
  • slidy (Slidy HTML and JavaScript slide show)
  • dzslides (DZSlides HTML5 + JavaScript slide show),
  • revealjs (reveal.js HTML5 + JavaScript slide show)
  • s5 (S5 HTML and JavaScript slide show)
  • tei (TEI Simple)
  • xwiki (XWiki markup)
  • zimwiki (ZimWiki markup)