1
Fork 0
mirror of https://github.com/Steffo99/unisteffo.git synced 2024-11-21 15:34:21 +00:00

Add screen width warnings

This commit is contained in:
Steffo 2022-02-04 18:41:40 +01:00
parent 2fb8610e64
commit 37d0b10388
12 changed files with 107 additions and 84 deletions

View file

@ -5,7 +5,7 @@ import 'katex/dist/katex.min.css';
export const Split = ({title = undefined, children}: any) => {
return (
return <>
<Bluelib.Chapter>
{title ?
<Bluelib.Heading level={3}>
@ -14,9 +14,8 @@ export const Split = ({title = undefined, children}: any) => {
: null}
{children}
</Bluelib.Chapter>
)
</>
}
export const Section = Split
export const Box = ({title = undefined, children, color = undefined}: any) => {
return (
@ -31,12 +30,6 @@ export const Box = ({title = undefined, children, color = undefined}: any) => {
)
}
export const Example = (props: any) => {
return (
<Bluelib.Panel builtinColor="magenta" style={{minWidth: "auto"}} {...props}/>
)
}
export const Plus = (props: any) => {
return (
<Bluelib.BaseElement builtinColor={"red"} kind="span" {...props}/>
@ -123,14 +116,27 @@ export const Image = (props: any) => {
)
}
export const Latex = LatexMath
export const Aside = (props: any) => {
return (
<Bluelib.Parenthesis {...props}/>
)
}
export const Example = (props: any) => {
return (
<Aside builtinColor="magenta" {...props}/>
)
}
export const Section = Split
export const Panel = Box
export const Latex = LatexMath
export const B = Bluelib.BringAttention
export const I = Bluelib.Idiomatic
export const LI = Bluelib.ListUnordered.Item
export const Anchor = Bluelib.Anchor
export const Link = Bluelib.Anchor
export const BaseLink = Bluelib.Anchor
export const Aside = Bluelib.Parenthesis
export const r = String.raw

View file

@ -0,0 +1,11 @@
@media screen and (min-width: 420px) {
.warn420 {
display: none;
}
}
@media screen and (min-width: 1024px) {
.warn1024 {
display: none;
}
}

21
components/warn.tsx Normal file
View file

@ -0,0 +1,21 @@
import * as React from "react"
import * as Bluelib from "@steffo/bluelib-react"
import style from "./warn.module.css"
export const Warn420 = () => {
return (
<Bluelib.Panel builtinColor="yellow" className={style.warn420}>
Unisteffo richiede uno schermo largo almeno 420px.
</Bluelib.Panel>
)
}
export const Warn1024 = () => {
return (
<Bluelib.Panel builtinColor="yellow" className={style.warn1024}>
Appuntiweb richiede uno schermo largo almeno 1024px.
</Bluelib.Panel>
)
}

View file

@ -20,8 +20,6 @@ function MyApp({ Component, pageProps }: AppProps) {
</Link>
</Heading>
<Component {...pageProps} />
</LayoutThreeCol.Center>
</LayoutThreeCol>
<Footer>
<p>
© {new Date().getFullYear()} <A href="https://steffo.eu/">Stefano Pigozzi</A> - Tutto il contenuto del sito è reso disponibile con la licenza <A href="https://creativecommons.org/licenses/by-sa/3.0/it/">CC-BY-SA 3.0 IT</A>.
@ -33,6 +31,8 @@ function MyApp({ Component, pageProps }: AppProps) {
Se il contenuto di questo sito ti è utile, <A href="https://ko-fi.com/steffo">offrimi un caffè</A>!
</p>
</Footer>
</LayoutThreeCol.Center>
</LayoutThreeCol>
</Bluelib>
</Theme.Provider>
)

View file

@ -2,6 +2,7 @@ import { Heading, Chapter, Box, Idiomatic as I, Anchor as A, ListUnordered, List
import type { NextPage } from 'next'
import { Link } from "../components/link"
import { ThemeSwitcher } from '../components/theme-switcher'
import { Warn420 } from '../components/warn'
const Home: NextPage = () => {
@ -14,6 +15,7 @@ const Home: NextPage = () => {
<Heading level={3}>
Dove sono?
</Heading>
<Warn420/>
<p>
Ciao! Benvenuto a <I>Unisteffo</I>, il sito su cui è caricato tutto il materiale per lo studio che ho utilizzato durante il mio percorso universitario!
</p>

View file

@ -1,6 +1,7 @@
import { Heading, Chapter, Box, Idiomatic as I, Panel, ListUnordered } from "@steffo/bluelib-react";
import { NextPage } from "next";
import { Link } from "../../../components/link";
import { Warn1024 } from "../../../components/warn";
const Page: NextPage = () => {
@ -34,6 +35,7 @@ const Page: NextPage = () => {
<Heading level={4}>
Appuntiweb
</Heading>
<Warn1024/>
<ListUnordered>
<ListUnordered.Item>
<Link href="/year2/calcolo/teoria">

View file

@ -1,6 +1,7 @@
import { Heading, Chapter, Box, Panel, Idiomatic as I, ListUnordered } from "@steffo/bluelib-react";
import { NextPage } from "next";
import { Link } from "../../../components/link";
import { Warn1024 } from "../../../components/warn";
const Page: NextPage = () => {
@ -43,6 +44,7 @@ const Page: NextPage = () => {
<Heading level={4}>
Appuntiweb
</Heading>
<Warn1024/>
<ListUnordered>
<ListUnordered.Item>
<Link href="/year2/database/teoria">

View file

@ -1,6 +1,7 @@
import { ListUnordered } from "@steffo/bluelib-react"
import {Heading, Chapter, Box, Panel, Idiomatic as I} from "@steffo/bluelib-react"
import { Link } from "../../../components/link"
import { Warn1024 } from "../../../components/warn"
export default function Fisica() {
@ -28,6 +29,7 @@ export default function Fisica() {
<Heading level={4}>
Appuntiweb
</Heading>
<Warn1024/>
<ListUnordered>
<ListUnordered.Item>
<Link href="/year2/fisica/teoria">

View file

@ -1,6 +1,7 @@
import { Heading, Chapter, Box, Panel, Idiomatic as I, ListUnordered, Emphasis } from '@steffo/bluelib-react'
import { Link } from '../../../components/link'
import type { NextPage } from 'next'
import { Warn1024 } from '../../../components/warn'
const Page: NextPage = () => {
@ -34,6 +35,7 @@ const Page: NextPage = () => {
<Heading level={4}>
Appuntiweb
</Heading>
<Warn1024/>
<ListUnordered>
<ListUnordered.Item>
<Link href="/year2/ottimizzazione/teoria">

View file

@ -1,5 +1,6 @@
import {Heading, Chapter, Panel, Idiomatic as I, Box, ListUnordered} from "@steffo/bluelib-react"
import { Link } from "../../../components/link"
import { Warn1024 } from "../../../components/warn"
export default function Statistica() {
@ -30,6 +31,7 @@ export default function Statistica() {
<Heading level={4}>
Appuntiweb
</Heading>
<Warn1024/>
<ListUnordered>
<ListUnordered.Item>
<Link href="/year2/statistica/teoria">

View file

@ -1,6 +1,7 @@
import { Heading, Chapter, Box, Idiomatic as I, Panel, ListUnordered } from '@steffo/bluelib-react'
import type { NextPage } from 'next'
import { Link } from '../../../components/link'
import { Warn1024 } from '../../../components/warn'
const Page: NextPage = () => {
return <>
@ -33,6 +34,7 @@ const Page: NextPage = () => {
<Heading level={4}>
Appuntiweb
</Heading>
<Warn1024/>
<ListUnordered>
<ListUnordered.Item>
<Link href="/year3/gestione/teoria">Appunti di teoria</Link>

View file

@ -42,41 +42,10 @@ const UIN = () => <Help text={`User Information Need, una descrizione in linguag
const Page: NextPage = () => {
return <>
<Heading level={2}>
<Link href="/year2/ottimizzazione">
Ottimizzazione lineare intera
<Link href="/year3/gestione">
Gestione dell'informazione
</Link>
</Heading>
<Split title={"Gestione dell'informazione"}>
<Box title={"Di cosa si tratta?"}>
<P>
Si parla di <B>come processare enormi quantità di testo</B> al fine di <B>effettuarvi
ricerche</B>.
</P>
<Aside>
Praticamente, si parla di come funzionano i motori di ricerca!
</Aside>
</Box>
<Box title={"Il corso all'Unimore"}>
<P>
🎓 Il corso è stato tenuto dalla <Anchor href={"mailto:federica.mandreoli@unimore.it"}>Prof.ssa Federica Mandreoli</Anchor>.
</P>
<P>
📘 Le dispense sono disponibili su <Anchor href={"https://dolly.fim.unimore.it/2020/course/view.php?id=69"}>Dolly (FIM)</Anchor>.
</P>
<P>
🎥 Le videolezioni <Color builtin={"red"}><abbr title={"Per via di una stupidissima politica di Unimore che prevede la cancellazione due settimane dopo la pubblicazione."}>sono state eliminate</abbr></Color>.
</P>
</Box>
<Box title={"Materiale utilizzato"}>
<ul>
<LI><Anchor href={"https://dolly.fim.unimore.it/2020/course/view.php?id=69"}>📄 Dispense su Dolly</Anchor></LI>
<LI><Anchor href={"https://www.wikipedia.org/"}>📰 Wikipedia</Anchor></LI>
<LI><Anchor href={"https://gitlab.com/2429571/gestione-informazione"}>🗒 Appunti open-source di Sharon Guerzoni</Anchor></LI>
<LI><Anchor href={"https://www.pearson.com/uk/educators/higher-education-educators/program/Baeza-Yates-Modern-Information-Retrieval-The-Concepts-and-Technology-behind-Search-2nd-Edition/PGM804983.html"}>📘 Libro di testo consigliato</Anchor></LI>
<LI><Anchor href={"https://nlp.stanford.edu/IR-book/"}>🌐 Introduction to Information Retrieval</Anchor></LI>
</ul>
</Box>
</Split>
<Split title={"Information Retrieval"}>
<Box title={"Cos'è?"}>
<P>
@ -96,8 +65,10 @@ const Page: NextPage = () => {
Possono essere di vario tipo: <B>pagine web</B>, <B>metadati di file</B>, <B>paper accademici</B>...
</P>
<Aside>
<p>
Ad esempio, i documenti di <Anchor href={"https://google.com"}>Google Search</Anchor> sono le <B>pagine web</B>.
<Image src={"/images/year3/gestione/documents.png"} alt={"I documenti di Google per il dominio steffo.eu"}/>
</p>
<Image src={"/images/year3/gestione/documents.png"} alt={"I documenti di Google per il dominio steffo.eu"} width={297} height={112}/>
</Aside>
<P>
Vengono raccolti in svariati modi: possono provenire da <B><API/></B>, essere forniti manualmente e poi processati con un <B>parser</B>, essere scoperti tramite <B>web crawling</B> e processati tramite <B>web scraping</B>...
@ -114,8 +85,10 @@ const Page: NextPage = () => {
La <B>richiesta di informazioni</B> effettuata da un utente, in un <B>linguaggio</B> che il motore di ricerca è <B>in grado di capire</B>.
</P>
<Aside>
<p>
In pratica, è quello che scrivi sulla casella di ricerca di Google!
<Image src={"/images/year3/gestione/query.png"} alt={"Un esempio di query su Google"}/>
</p>
<Image src={"/images/year3/gestione/query.png"} alt={"Un esempio di query su Google"} width={297} height={143}/>
</Aside>
<P>
Solitamente vi è possibile inserire <B>parole chiave</B> e <B>operatori</B> per specificare cosa
@ -137,9 +110,11 @@ const Page: NextPage = () => {
sezione del documento più rilevante.
</P>
<Aside>
<p>
Google Search mostra <B>URL</B>, <B>titolo</B> e <B>descrizione</B> della pagina (o un
suo <B>estratto</B> se una descrizione non è disponibile).
<Image src={"/images/year3/gestione/result.png"} alt={"Una risposta di Google"}/>
</p>
<Image src={"/images/year3/gestione/result.png"} alt={"Una risposta di Google"} width={297} height={80}/>
</Aside>
</Box>
</Split>
@ -644,7 +619,7 @@ const Page: NextPage = () => {
<P>
È quello che fa di default Google:
</P>
<Image src={"/images/year3/gestione/replacement.png"} alt={"Google ha corretto il token errato per me."}/>
<Image src={"/images/year3/gestione/replacement.png"} alt={"Google ha corretto il token errato per me."} width={284} height={98}/>
</Aside>
</Box>
<Box title={"Visualizzazione"}>
@ -658,7 +633,7 @@ const Page: NextPage = () => {
<P>
È quello che fa Google quando non è sicuro della correzione proposta:
</P>
<Image src={"/images/year3/gestione/suggestion.png"} alt={"Google suggerisce di correggere il token errato."}/>
<Image src={"/images/year3/gestione/suggestion.png"} alt={"Google suggerisce di correggere il token errato."} width={238} height={80}/>
</Aside>
</Box>
<Box title={"Aggiunta"}>
@ -1173,8 +1148,7 @@ const Page: NextPage = () => {
\\log \\frac{1 - P(k_i\\ |\\ \\overline{R}, \\vec{q})}{P(k_i\\ |\\ \\overline{R}, \\vec{q})}
`}</LatexMath></B>
<Split>
<Color builtin={"lime"}>
<Aside>
<Aside builtinColor="lime">
<B><LatexMath block={true}>{`
\\log \\frac{P(k_i\\ |\\ R, \\vec{q})}{1 - P(k_i\\ |\\ R, \\vec{q})}
`}</LatexMath></B>
@ -1182,9 +1156,7 @@ const Page: NextPage = () => {
Il valore del primo &quot;blocco&quot; dipende dalla presenza del token <LatexMath>{`k_i`}</LatexMath> nei documenti <B>rilevanti</B>: più il token vi appare, più il valore sarà <B>alto</B>.
</P>
</Aside>
</Color>
<Color builtin={"red"}>
<Aside>
<Aside builtinColor="red">
<B><LatexMath block={true}>{`
\\log \\frac{1 - P(k_i\\ |\\ \\overline{R}, \\vec{q})}{P(k_i\\ |\\ \\overline{R}, \\vec{q})}
`}</LatexMath></B>
@ -1192,7 +1164,6 @@ const Page: NextPage = () => {
Il valore del primo &quot;blocco&quot; dipende dalla presenza del token <LatexMath>{`k_i`}</LatexMath> nei documenti <B>non rilevanti</B>: più il token vi appare, più il valore sarà <B>basso</B>.
</P>
</Aside>
</Color>
</Split>
<Aside>
In generale, <LatexMath>{`c_i`}</LatexMath> avrà un valore <Color builtin={"lime"}>positivo</Color> se è più probabile che il termine appaia in documenti rilevanti e non in quelli irrilevanti; in caso contrario, esso avrà valore <Color builtin={"red"}>negativo</Color>.