--- title: "ETC5523: Communicating with Data" subtitle: "Introduction to Web and Data Technologies - Part A" author: "Emi Tanaka" email: "ETC5523.Clayton-x@monash.edu" date: "Week 2" length: "50 minutes" department: "Department of Econometrics and Business Statistics" titlebgimg: "images/bg-04.png" output: xaringan::moon_reader: css: - ninjutsu - "assets/font-awesome-all.css" - "assets/tachyons-addon.css" - "assets/animate.css" - "assets/fira-code.css" - "assets/boxes.css" - "assets/table.css" - "assets/styles.css" - "assets/monash-brand.css" - "assets/monash-fonts.css" - "assets/slide-types.css" - "assets/lists.css" - "assets/countdown.css" - "assets/custom.css" self_contained: false seal: false chakra: 'lib/remark-latest.min.js' includes: in_header: "assets/head.html" lib_dir: lib #includes: # in_header: "assets/custom.html" mathjax: "lib/mathjax-local/MathJax.js?config=TeX-AMS-MML_HTMLorMML" nature: highlightStyle: magula highlightLanguage: r highlightLines: true highlightSpans: false countIncrementalSlides: false slideNumberFormat: '%current%/%total%' navigation: scroll: false touch: true click: false ratio: '16:9' --- ```{r, include = FALSE} current_file <- knitr::current_input() basename <- gsub(".Rmd$", "", current_file) js <- '' css <- '' library(tidyverse) library(timevis) library(widgetframe) library(htmltools) knitr::opts_chunk$set( fig.path = sprintf("images/%s/", basename), fig.width = 6, fig.height = 4, fig.align = "center", fig.retina = 3, echo = TRUE, warning = FALSE, message = FALSE, cache = FALSE, cache.path = "cache/" ) ``` ```{r titleslide, child="assets/titleslide.Rmd"} ``` --- name: web-tech class: transition # Introduction to # .yellow[Web Technologies] --- # 🌐 World Wide Web (WWW) .w-70[ * WWW (or the **Web**) is the information system where documents (web pages) are identified by Uniform Resource Locators (**URL**s) * A web page consists of: * **HTML** provides the basic structure of the web page * **CSS** controls the look of the web page (optional) * **JS** is a programming language that can modify the behaviour of elements of the web page (optional) ] -- .w-70[ * Keep in mind that you are not a web developer .font_small[(or maybe you are)] so you don't need to know these in-depth, but you require some knowledge in web technologies if you want to do some low-level customisation of HTML documents. ] --- # 🔨 Web Documents are Handy * HTML documents are really handy for including interactive elements and supported in almost all computer devices. * Naturally, this ties in well with interactive data visualisation. * Below is an interactive timeline visualisation of historical developments of HTML/CSS/JS: ```{r, echo = FALSE} data <- tribble(~id, ~content, ~start, ~end, ~style, 1, "CSS 1", "1996-12-17", NA, "font-size:10pt", 2, "CSS 2", "1998-05-01", NA, "font-size:10pt", 3, "CSS ", "1999-06-01", NA, "font-size:10pt;", 4, "HTML", "1989-01-01", NA, "font-size:10pt", 5, "HTML 2", "1995-11-24", NA, "font-size:10pt", 6, "HTML 3", "1997-01-14", NA, "font-size:10pt", 7, "HTML 4", "1997-12-18", NA, "font-size:10pt", 8, "HTML ", "2014-10-28", NA, "font-size:10pt", 9, "CSS", "1994-10-10", NA, "font-size:10pt", 10, "JS  ", "1995-12-04", NA, "font-size:10pt" ) dep <- htmltools::htmlDependency( "font-awesome", "5.0.13", c(href="libs"), stylesheet = "css/font-awesome.min.css" ) widget <- timevis(data, width = "100%", height = "300px") # note the widget gets placed in fig.path/widgets # omg emi, you made this way too complicated! frameWidget(appendContent(widget, tagList(tag("script", list("", src="fontawesome-5.0.13/js/fontawesome-all.min.js")), tag("link", list(rel="stylesheet", href="custom.css", type="text/css")), tag("link", list(rel="stylesheet", href="ninjutsu.css", type="text/css"))))) ``` --- class: transition # So what exactly is
.orange[HTML], .blue[CSS], and .yellow[JS]? --- name: html ```{r, include= FALSE} seetext <- '' seehtml <- '' ``` # Hyper Text Markup Language (HTML) * HTML files have the extension `.html`. * HTML files are often rendered using a web browser via an URL. * HTML files are just text files that follows a special syntax that alerts web browsers how to render it. .center[ `lecture-02-simple-example.html` ] .flex[ .w-50.br[ ## As seen via a *web browser* `r seehtml`
] .w-50.pl3[ ## As seen via a *text editor* `r seetext`
] ] --- # HTML Structure ```html Communicating with Data

I'm a first level header

This is a paragraph.

``` --- # HTML Syntax `r seetext` `Author content`
`r seehtml` Author content The breakdown of this syntax:
start tag:<span style="color:blue;">Author content</span>
end tag: <span style="color:blue;">Author content</span>
content: <span style="color:blue;">Author content</span>
element name: <span style="color:blue;">Author content</span>
attribute: <span style="color:blue;">Author content</span>
attribute name: <span style="color:blue;">Author content</span>
attribute value: <span style="color:blue;">Author content</span>
-- Not all HTML tags have an end tag: `r seetext` ``
`r seehtml` --- # Some HTML elements
block element:<div>content</div>
inline element:<span>content</span>
header level 1:<h1>content</h1>
header level 2:<h2>content</h2> (note: only up to 6 levels)
emphasised text:<em>content</em>
strong importance:<strong>content</strong>
link:<a href="https://cwd.numbat.space/">content</a>
insert new line:<br>
unordered list:<ul>
<li>item 1</li>
<li>item 2</li>
How these are rendered to the browser depends on the **browser default style values**, **style attribute** or **CSS**... --- name: css # `r css` Cascading Style Sheet (CSS) * CSS files have the extension `.css` .font_small[and styles also XHTML, plain XML, SVG and XUL]. * There are 3 ways to style elements in HTML: * **inline** by using the `style` attribute inside HTML start tag:
<h1 style="color:blue;">Blue Header</h1>
* **externally** by using the `` element:
<link rel="stylesheet" href="styles.css">
* **internally** by defining within ` ``` * By convention, the `