---
title: "Upute"
toc: false
number-sections: false
lang: hr-HR
comments: false
format:
html:
page-layout: full
body-classes: upute-page
include-in-header:
text: |
<style>
/* ── Layout shell ─────────────────────────────────────────── */
#quarto-sidebar { display: none !important; }
#quarto-margin-sidebar { display: none !important; }
.sidebar.sidebar-navigation { display: none !important; }
.page-columns { display: block !important; }
main.content, #quarto-document-content {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
grid-column: 1 / -1 !important;
}
/* ── Hero ─────────────────────────────────────────────────── */
.up-hero {
border-bottom: 2px solid rgba(28,25,22,.14);
padding: 3.5rem 0 2.5rem;
margin-bottom: 3rem;
}
.up-kicker {
display: inline-block;
font-family: "Public Sans", system-ui, sans-serif;
font-size: .72rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: #4A6B5C;
margin-bottom: .9rem;
}
.up-title {
font-family: "Newsreader", Georgia, serif;
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 500;
line-height: 1.15;
color: #1C1916;
margin: 0 0 1.1rem;
}
.up-lede {
font-family: "Public Sans", system-ui, sans-serif;
font-size: 1.08rem;
line-height: 1.65;
color: #6B6357;
max-width: 68ch;
margin: 0;
}
/* ── Section headings ─────────────────────────────────────── */
.up-section {
margin-bottom: 3rem;
}
.up-section-head {
display: flex;
align-items: baseline;
gap: 1rem;
border-bottom: 1px solid rgba(28,25,22,.10);
padding-bottom: .5rem;
margin-bottom: 1.5rem;
}
.up-section-num {
font-family: "Public Sans", system-ui, sans-serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #4A6B5C;
flex-shrink: 0;
}
.up-section-title {
font-family: "Newsreader", Georgia, serif;
font-size: 1.45rem;
font-weight: 500;
color: #1C1916;
margin: 0;
}
/* ── Tab grid ─────────────────────────────────────────────── */
.up-tab-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 1.1rem;
margin-bottom: 2rem;
}
.up-tab-card {
background: #F2EDE3;
border: 1px solid rgba(28,25,22,.10);
border-left: 3px solid #4A6B5C;
border-radius: 3px;
padding: 1.2rem 1.3rem;
text-decoration: none;
color: inherit;
transition: border-left-color .15s, box-shadow .15s;
}
.up-tab-card:hover {
border-left-color: #C8985E;
box-shadow: 0 2px 8px rgba(28,25,22,.08);
text-decoration: none;
color: inherit;
}
.up-tab-name {
display: block;
font-family: "Public Sans", system-ui, sans-serif;
font-size: .82rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #4A6B5C;
margin-bottom: .35rem;
}
.up-tab-desc {
display: block;
font-family: "Newsreader", Georgia, serif;
font-size: 1rem;
line-height: 1.5;
color: #1C1916;
margin-bottom: .5rem;
}
.up-tab-how {
display: block;
font-family: "Public Sans", system-ui, sans-serif;
font-size: .83rem;
line-height: 1.5;
color: #6B6357;
}
/* ── Spotlight boxes (Vodič, Pojmovnik, AI) ──────────────── */
.up-spotlight {
background: #EAE3D4;
border: 1px solid rgba(28,25,22,.12);
border-radius: 4px;
padding: 1.8rem 2rem;
margin-bottom: 1.5rem;
}
.up-spotlight + .up-spotlight {
margin-top: 1.1rem;
}
.up-spotlight-label {
display: inline-block;
font-family: "Public Sans", system-ui, sans-serif;
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #4A6B5C;
margin-bottom: .6rem;
}
.up-spotlight h3 {
font-family: "Newsreader", Georgia, serif;
font-size: 1.25rem;
font-weight: 500;
color: #1C1916;
margin: 0 0 .7rem;
}
.up-spotlight p {
font-family: "Public Sans", system-ui, sans-serif;
font-size: .93rem;
line-height: 1.65;
color: #6B6357;
margin: 0;
}
.up-spotlight ul {
font-family: "Public Sans", system-ui, sans-serif;
font-size: .93rem;
line-height: 1.7;
color: #6B6357;
margin: .6rem 0 0 0;
padding-left: 1.3rem;
}
.up-spotlight a {
color: #4A6B5C;
}
/* ── Accent rule ──────────────────────────────────────────── */
.up-rule {
display: flex;
align-items: center;
gap: .8rem;
color: rgba(28,25,22,.18);
font-family: "Public Sans", system-ui, sans-serif;
font-size: .8rem;
letter-spacing: .08em;
margin: 2.5rem 0;
}
.up-rule::before, .up-rule::after {
content: "";
flex: 1;
height: 1px;
background: rgba(28,25,22,.12);
}
/* ── Networked learning callout ───────────────────────────── */
.up-network-box {
border: 2px solid #4A6B5C;
border-radius: 4px;
padding: 1.8rem 2rem;
margin-bottom: 2rem;
background: rgba(74,107,92,.04);
}
.up-network-box .up-spotlight-label { color: #4A6B5C; }
.up-network-box h3 {
font-family: "Newsreader", Georgia, serif;
font-size: 1.25rem;
font-weight: 500;
color: #1C1916;
margin: 0 0 .7rem;
}
.up-network-box p, .up-network-box ul {
font-family: "Public Sans", system-ui, sans-serif;
font-size: .93rem;
line-height: 1.7;
color: #6B6357;
}
.up-network-box ul {
margin: .5rem 0 0;
padding-left: 1.3rem;
}
/* ── Dark mode ────────────────────────────────────────────── */
.quarto-dark .up-hero { border-bottom-color: rgba(242,237,227,.12); }
.quarto-dark .up-title { color: #F2EDE3; }
.quarto-dark .up-lede { color: #9C9382; }
.quarto-dark .up-section-head { border-bottom-color: rgba(242,237,227,.10); }
.quarto-dark .up-section-title { color: #F2EDE3; }
.quarto-dark .up-tab-card { background: rgba(28,25,22,.4); border-color: rgba(242,237,227,.10); }
.quarto-dark .up-tab-desc { color: #F2EDE3; }
.quarto-dark .up-tab-how { color: #9C9382; }
.quarto-dark .up-spotlight { background: rgba(28,25,22,.5); border-color: rgba(242,237,227,.10); }
.quarto-dark .up-spotlight h3 { color: #F2EDE3; }
.quarto-dark .up-spotlight p, .quarto-dark .up-spotlight ul { color: #9C9382; }
.quarto-dark .up-network-box { background: rgba(74,107,92,.08); border-color: #4A6B5C; }
.quarto-dark .up-network-box h3 { color: #F2EDE3; }
.quarto-dark .up-network-box p, .quarto-dark .up-network-box ul { color: #9C9382; }
</style>
---
```{=html}
<header class="up-hero">
<span class="up-kicker">Upute za korištenje</span>
<h1 class="up-title">Što ova knjiga može i kako je koristiti</h1>
<p class="up-lede">Ovo nije obični PDF koji se čita od prve do zadnje stranice. Knjiga je interaktivna platforma za učenje u kojoj grafovi reagiraju na unos parametara, pojmovnik prikazuje veze između ideja, vodič sažima svako poglavlje u jednu mentalnu mapu, a posebna stranica spaja čitatelja s alatima umjetne inteligencije. Ova stranica objašnjava što sve postoji i kako to koristiti.</p>
</header>
<!-- ── 1. Pregled tabova ────────────────────────────────────────────── -->
<section class="up-section">
<div class="up-section-head">
<span class="up-section-num">§ 01</span>
<h2 class="up-section-title">Pregled stranica i što se na svakoj nalazi</h2>
</div>
<div class="up-tab-grid">
<a class="up-tab-card" href="chapters/00-uvod.html">
<span class="up-tab-name">Knjiga</span>
<span class="up-tab-desc">Cjeloviti interaktivni udžbenik s 21 poglavljem u 5 dijelova, od uloge države do reformi javnog sektora.</span>
<span class="up-tab-how">Koristite lijevu traku (sadržaj) ili navigacijske strelice na dnu svake stranice. Grafovi reagiraju na promjenu parametara; isprobajte klizače i padajuće izbornike.</span>
</a>
<a class="up-tab-card" href="vodic.html">
<span class="up-tab-name">Vodič</span>
<span class="up-tab-desc">22 vizualne mentalne mape, po jedna za svako poglavlje. Svaka se čita za dvije minute.</span>
<span class="up-tab-how">Otvorite hub, odaberite poglavlje koje vas zanima i pročitajte mapu. Idealno za ponavljanje ili brzi pregled prije ispita.</span>
</a>
<a class="up-tab-card" href="pojmovnik.html">
<span class="up-tab-name">Pojmovnik</span>
<span class="up-tab-desc">Interaktivni mrežni grafikon svih ključnih pojmova knjige i veza između njih.</span>
<span class="up-tab-how">Kliknite pojam da vidite definiciju i koje je pojmove s njim povezane. Koristite pretragu za direktno pronalaženje. Prikaz mreže ili liste prepustite vlastitom afinitetu.</span>
</a>
<a class="up-tab-card" href="alat.html">
<span class="up-tab-name">Alat</span>
<span class="up-tab-desc">Pregled programskih alata, baza podataka i softvera koji se koriste u istraživanju i analizi javnih politika.</span>
<span class="up-tab-how">Pregledajte po kategorijama. Svaki alat ima kratki opis i poveznicu. Posebno korisno za studente koji žele početi s vlastitim analizama podataka.</span>
</a>
<a class="up-tab-card" href="podaci.html">
<span class="up-tab-name">Podaci</span>
<span class="up-tab-desc">Baza podataka iz Atlas projekta s ekonomskim i fiskalnim pokazateljima za Hrvatsku i usporedne zemlje.</span>
<span class="up-tab-how">Filtrirajte po varijabli ili zemlji. Podaci su preuzimljivi za daljnju upotrebu. Grafovi u knjizi koriste isti dataset.</span>
</a>
<a class="up-tab-card" href="uci-s-ai.html">
<span class="up-tab-name">Uči uz AI</span>
<span class="up-tab-desc">Čiste tekstualne verzije svakog poglavlja prilagođene za ChatGPT, Claude, Gemini i ostale AI asistente.</span>
<span class="up-tab-how">Preuzmite <code>.md</code> datoteku poglavlja, priložite je u razgovor s AI asistentom i postavljajte pitanja. Detaljne upute u odjeljku § 04 ispod.</span>
</a>
<a class="up-tab-card" href="predavanja.html">
<span class="up-tab-name">Nastava → Predavanja</span>
<span class="up-tab-desc">Reveal.js prezentacijski slajdovi koji prate knjižne cjeline, s interaktivnim grafovima.</span>
<span class="up-tab-how">Kliknite karticu predavanja da otvorite slajdove u novoj kartici. Tipke F (full screen) i S (speaker notes) aktiviraju dodatne načine prikaza.</span>
</a>
<a class="up-tab-card" href="silabus.html">
<span class="up-tab-name">Nastava → Silabus</span>
<span class="up-tab-desc">Cjeloviti silabus kolegija Javne politike (Odjel za sociologiju), uključujući literaturu i načine ocjenjivanja.</span>
<span class="up-tab-how">Referentni dokument za studente kolegija. Svaki tjedan je povezan s odgovarajućim poglavljima knjige.</span>
</a>
<a class="up-tab-card" href="raspored.html">
<span class="up-tab-name">Nastava → Tjedni raspored</span>
<span class="up-tab-desc">Pregled statusa svih nastavnih tjedana s informacijom o tome koje su cjeline obrađene i koje dolaze uskoro.</span>
<span class="up-tab-how">Pratite tjedan u kojem se nalazite. Status znakovi (dostupno / uskoro) pomažu da znate gdje ste u kolegiju.</span>
</a>
<a class="up-tab-card" href="resursi.html">
<span class="up-tab-name">Resursi</span>
<span class="up-tab-desc">Kurirana zbirka linkova koji obuhvaćaju HR institucije, EU tijela, akademske časopise, baze podataka i relevantne medije.</span>
<span class="up-tab-how">Koristite kao polazišnu točku za istraživanje. Organizirano je po kategorijama, od službenih izvora do akademske literature.</span>
</a>
</div>
</section>
<div class="up-rule">§</div>
<!-- ── 2. Vodič i mrežno učenje ────────────────────────────────────── -->
<section class="up-section">
<div class="up-section-head">
<span class="up-section-num">§ 02</span>
<h2 class="up-section-title">Vodič — učenje kroz mreže pojmova</h2>
</div>
<div class="up-network-box">
<span class="up-spotlight-label">Drugačiji pristup učenju</span>
<h3>Zašto mentalne mape, a ne linearni sažetci</h3>
<p>U doba AI alata reprodukcija gradiva postaje trivijalna jer asistent može u sekundi prepričati bilo koje poglavlje. Ono što ostaje vrijedno jest razumijevanje veza između ideja. Zašto eksternalija vodi do alokacijskog problema? Kako Arrowov teorem ograničava svaki glasački sustav? Zašto incentivni problemi u birokraciji i u tržištu imaju strukturno istu formu? Na ta pitanja ne odgovara reprodukcija, nego razumijevanje odnosa.</p>
<p><strong>Mrežno učenje</strong> polazi od pretpostavke da se znanje bolje zadržava kad se gradi kao mreža pojmova nego kao linearna sekvenca. Svaka mentalna mapa u Vodiču prikazuje poglavlje kao skup čvorova i bridova koji pokazuju uzročne, analogne ili kontrastne veze. Umjesto pamćenja definicija, time trenirate prepoznavanje obrazaca koji se ponavljaju kroz cijelu materiju.</p>
<p>Tri navike pomažu da mape rade za vas. Čitajte ih od rubova prema sredini, gdje su na periferiji primjeri, a u središtu mehanizam koji ih ujedinjuje. Ne čudite se kad iste pojmove sretnete u više mapa jer to nije greška nego namjera, a ponovljeno susretanje pojma u različitim kontekstima upravo je ono što gradi trajno razumijevanje. Imajte na umu i da su mape kompresija, a ne zamjena za tekst, pa se vraćajte u poglavlje kad god vam zatreba kontekst.</p>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Kako koristiti Vodič</span>
<h3>Tri načina rada</h3>
<p>Vodiču možete prići na tri načina, ovisno o tome učite li gradivo prvi put, pratite li poglavlje koje upravo čitate ili ponavljate pred ispit.</p>
<p>Linearno praćenje redoslijeda poglavlja od prvog do dvadeset drugog funkcionira jer se svaka mapa nadovezuje na prethodnu i uvodi pojmove koji će biti ključni u sljedećoj. Tematski pristup znači da mapu poglavlja koje upravo čitate otvarate kao vizualnu dopunu pomoću koje se nećete izgubiti u dugačkim odsjeccima. Uoči ispita prođite sve mape bez otvaranja knjige, jer svaka veza koja vam nije jasna pokazuje točno na mjesto na koje se isplati vratiti u tekstu.</p>
</div>
</section>
<div class="up-rule">§</div>
<!-- ── 3. Pojmovnik ────────────────────────────────────────────────── -->
<section class="up-section">
<div class="up-section-head">
<span class="up-section-num">§ 03</span>
<h2 class="up-section-title">Pojmovnik — kako je nastao i kako ga čitati</h2>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Metodologija</span>
<h3>Od teksta do grafa pojmova</h3>
<p>Pojmovnik nije klasični abecedni rječnik. To je <strong>grafikon znanja</strong> (*knowledge graph*) stvoren iz teksta knjige. Svaki čvor je pojam, svaki brid je semantička veza identificirana iz načina na koji se pojmovi zajednički pojavljuju i upućuju jedan na drugi kroz poglavlja.</p>
<p>Tri elementa nose taj prikaz. Čvorovi su ključni pojmovi knjige koji obuhvaćaju teorijske koncepte, ekonomske termine, institucije i mehanizme. Bridovi označavaju semantičku vezu između pojmova, koja može biti uzročno-posljedična kad jedan pojam vodi do drugoga, kontrastna kad jedan stoji nasuprot drugome ili analogna kad su dva pojma srodna po obliku. Boja i veličina čvora odražavaju centralnost pojma, pa što više veza čvor ima, to je pojam istaknutiji u mreži.</p>
<p>Graf je izgrađen iz <code>data/concept-graph.json</code>, strukturiranog dataseta koji je nastao analizom cijelog teksta knjige. Grafikon se renderira u pregledniku putem Observable JS, što omogućuje interaktivno istraživanje.</p>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Navigacija</span>
<h3>Interakcija s grafom</h3>
<p>Grafom se istražuje klikom, povlačenjem i pretragom, a po potrebi se cijeli prikaz prebacuje u obični popis.</p>
<p>Klikom na pojam otvarate njegovu definiciju i sve pojmove s kojima je izravno povezan, a povlačenjem čvorova preuređujete pogled dok ih fizikalna simulacija i dalje drži na okupu. Polje za pretragu služi za izravno pronalaženje pojma po nazivu, a prebacivanjem između mrežnog prikaza i popisa dobivate listu koja je korisnija kad pojam tražite abecedno.</p>
</div>
</section>
<div class="up-rule">§</div>
<!-- ── 4. Učenje uz AI ─────────────────────────────────────────────── -->
<section class="up-section">
<div class="up-section-head">
<span class="up-section-num">§ 04</span>
<h2 class="up-section-title">Kako učiti uz AI asistenta</h2>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Metoda 1 — Preuzmi i priloži</span>
<h3>Najpouzdaniji način</h3>
<p>Idite na <a href="uci-s-ai.html">Uči uz AI</a>, odaberite poglavlje i preuzmite <code>.md</code> datoteku. Priložite je u razgovor s AI asistentom (ChatGPT, Claude, Gemini) i zatim postavljajte pitanja. Asistent ne treba pristup internetu jer cijeli tekst već ima u kontekstu razgovora.</p>
<p>Metoda radi u svim asistentima, uključujući lokalne poput Ollame, jer su datoteke čisti Markdown bez suvišnih HTML tagova, grafova ili koda koji asistentu nisu potrebni. Jedno poglavlje pritom stane u standardni kontekstni prozor od 128 tisuća tokena.</p>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Metoda 2 — Otvori u asistentu</span>
<h3>Jedan klik do razgovora</h3>
<p>Svako poglavlje ima gumbe koji jednim klikom otvaraju Claude ili ChatGPT s već upisanim uvodnim pitanjem i poveznicom na tekst. Asistent treba pristup internetu da dohvati stranicu pa ga koristite kad ste online i ne želite ručno preuzimati datoteke.</p>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Savjeti za razgovor</span>
<h3>Kako izvući najviše iz AI asistenta</h3>
<p>Asistent najbolje radi kad ga tjerate na mehanizam i provjeru umjesto na puko prepričavanje gradiva.</p>
<p>Umjesto pitanja "što je eksternalija?" bolje je tražiti "zašto eksternalija dovodi do neoptimalne alokacije, korak po korak", jer definiciju asistent može izmisliti, ali mehanizam iz teksta mora biti točan. U istom duhu tražite primjer koji nije u tekstu, pa upit poput "navedi primjer eksternalije koji nije u poglavlju" testira razumijevanje, a ne reprodukciju. Budući da asistenti povremeno griješe, ključne tvrdnje uvijek provjerite u izvornom poglavlju. Za pripremu ispita tražite pitanja umjesto odgovora, gdje je dobar model upit "postavi mi pet pitanja o Arrowovom teoremu kojima bih mogao ili mogla biti testiran". Na stranici <a href="uci-s-ai.html">Uči uz AI</a> dostupna je usto i kompletna <code>llms-full.txt</code> datoteka s cijelom knjigom, namijenjena modelima s većim kontekstnim prozorom.</p>
</div>
</section>
<div class="up-rule">§</div>
<!-- ── 5. Interaktivni elementi ────────────────────────────────────── -->
<section class="up-section">
<div class="up-section-head">
<span class="up-section-num">§ 05</span>
<h2 class="up-section-title">Interaktivni elementi u knjizi</h2>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Observable JS grafovi</span>
<h3>Grafovi koji reagiraju na vaš unos</h3>
<p>Mnoga poglavlja sadrže interaktivne grafove koji se mijenjaju dok pomičete klizač ili mijenjate parametre. To nisu statične slike; svaka promjena parametra osvježava grafikon u stvarnom vremenu. Primjeri su Lafferova krivulja u petom poglavlju gdje pomičete stopu poreza i pratite prihode, glasačke funkcije u sedmom poglavlju gdje mijenjate broj birača i promatrate promjenu ishoda, te krivulje birokracije u desetom poglavlju za uspoređivanje javnog i privatnog sektora pri različitim pretpostavkama.</p>
<p>Kod iza grafova uvijek je vidljiv. Kliknite "Prikaži kod" da vidite izvorni R ili OJS kod.</p>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Komentari i anotacije</span>
<h3>Hypothesis — bilješke uz tekst</h3>
<p>Svako poglavlje ima ugrađen Hypothesis, alat za anotiranje teksta u pregledniku. Možete označiti odlomak i dodati javnu ili privatnu bilješku. Osobne bilješke sinkroniziraju se između uređaja, studenti koji dijele isti Hypothesis tim mogu vidjeti međusobne anotacije, a označena nejasna mjesta postaju podsjetnici za vraćanje u tekst.</p>
</div>
</section>
<div class="up-rule">§</div>
<!-- ── 6. Tehnički detalji ─────────────────────────────────────────── -->
<section class="up-section">
<div class="up-section-head">
<span class="up-section-num">§ 06</span>
<h2 class="up-section-title">Ostalo</h2>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">PDF verzija</span>
<h3>Preuzimanje knjige</h3>
<p>PDF verzija cijele knjige dostupna je putem ikone u lijevoj traci (📄). PDF je radna verzija koja se ažurira s glavnim tekstom; nije namijenjen tiskanoj distribuciji nego offline čitanju. Priručnik za građane dostupan je kao zasebni A5 dokument.</p>
</div>
<div class="up-spotlight">
<span class="up-spotlight-label">Prijavljivanje grešaka</span>
<h3>Pronašli ste pogrešku?</h3>
<p>Otvorite issue na <a href="https://github.com/lusiki/Javne-politike" target="_blank" rel="noopener">GitHub repozitoriju knjige</a>. Bugovi u kodu, tipfeleri u tekstu i propuštene reference jednako su dobrodošli. Knjiga je živi dokument koji se ažurira.</p>
</div>
</section>
```