Tvorba webů 101

Kubík Hampl

meta

Všechny modré texty v prezentaci jsou odkazy, které se ti nejspíš budou hodit.

Co si povíme

  • návrh, očekávání a realita
  • konfigurace a tvorba
  • ach, ty internety
  • diskuze??

návrh, očekávání a realita

AAAAAAAAAAAAAAAA

  • hromada standardů
  • milion frameworků
  • nespočet způsobů, jak docílit podobného výsledku
  • každý vám bude tvrdit něco jiného

důsledek: neexistuje správný postup

největší úskalí

interaktivita

největší úskalí

Tohle nechceme!

Náš web by:

  • neměl obsahovat zbytečně rušivé prvky
  • měl respektovat soukromí uživatelů
  • měl mít na prvním místě obsah

Cílíme na čtenářský komfort!

Case study – Kačí blog

  • o cestování
  • o knížkách
  • vlastní tvorba

co je špatně?

  • barva textu nemá dobrý kontrast (odkaz "O mně" skoro nejde přečíst)
  • je to nudné...

je třeba chytit správný vibe

"moře, pláž, letní, pohodovej, ale zároveň cute, a počkej, jako, *smích*, můžeš toho nechat? já se snažím vymyslet to slovo co chci říct. co děláš? minimalistickej zároveň."

"náčrt"

výběr fontu

hledání správné okrové

wireframe

  • nemusíte mít perfektní představu
  • vymýšlejte za pochodu
  • experimentujte!
  • cool vzhled je fajn, ale jde o obsah!

dobrý design neuděláte za noc

ale zase se nenechte unést...

konfigurace a tvorba

Nejdříve pár technikálií...

HTML

CSS

JavaScript

HTML

CSS

JavaScript

nebude potřeba :)

statické weby

  • jednou se vygenerují a zůstávají stejné
  • stačí jednoduchý webserver*
  • jednodušší na výrobu a údržbu

* k tomu, co je to webserver, se dostaneme později

dynamické weby

  • mění se v závislosti na uživateli (instagram, online obchody, atp.)
  • často vyžadují komplexnější logiku serveru
  • složitější na výrobu a údržbu

Jekyll

  • generátor statických webů
  • má podporu pro blogy, kategorie, štítky...
  • má komunitní pluginy, vzory, atd... (někdo udělal tu otravnou práci za vás)

TailwindCSS

  • rozšíření CSS
  • třídy s rozumnými defaulty
  • flexibilní konfigurace
  • velmi dobrý systém interaktivity!

JEKYLL TAILWIND TEMPLATE

  • můj výtvor
  • používám to na většině stránek, co pro svoje potřeby vyrobím
  • obsahuje návod, jak to nainstalovat a zprovoznit

Node.js a Ruby

  • Ruby pohání Jekyll
  • Node.js pohání TailwindCSS

motivace

  • Jekyll (když zrovna funguje) umí jednoduše vrstvit designy stránek, stará se za nás o hromadu technických věcí
  • TailwindCSS mi pomohl méně se zasekávat na "mikro úpravách" (má to tlačítko být 35 nebo 37 pixelů vysoké???)

THIS PAGE INTENTIONALLY LEFT BLANK

tady bude odkaz na záznam z prezentace, až bude dostupný :)

ACH, TY INTERNETY...

Je to složité místo...

a tahle část prezentace by zasloužila vlastní přednášku.

webserver

  • kouzelná krabička někde na internetu
  • servíruje náš web těm, kdo o něj zažádají

Na internetu je hodně kouzelných krabiček. Jak náš telefon ví, kterou kontaktovat?

Neví.

ip adresa

  • unikátní číslo každého počítače
  • je to složitější...

Na internetu je hodně unikátních čísel.
Jak náš telefon ví, které kontaktovat?

Neví.

doména

  • lidsky zapamatovatelný název
  • lze ji přiřadit k IP adrese
  • je potřeba si ji koupit

Jak náš telefon ví, ke které IP adrese patří doména, kterou hledá?

Neví.

DNS

  • globální systém překladu domén na IP adresy
  • hurá!!!

teď prakticky

Způsob 1

autismus

VPS

  • Virtual Private Server
  • dostane přiřazenou IP adresu
  • já používám Hetzner

VÝHODY
  • jsi pánem svého domu
  • můžete s tím dělat hodně věcí

NEVÝHODY
  • musíte se o to starat a platit
  • pokud se nevyznáte v Linuxu, budete brečet

REVERSE PROXY

Program, co vezme naše html soubory a předhodí je internetu.

Caddy


							kaculik.cz {
								root * /www/kaculik.cz
								file_server
							}

Doména

PLAUSIBLE

  • respektuje soukromí vašich návštěvníků
  • můžete si to platit nebo self-hostovat
  • (mám svoji vlastní instanci)

Způsob 2

normální

Github pages

Vbudovaný hosting přímo na GitHubu.

VÝHODY
  • velmi jednoduché zprovoznit
  • hosting a poddoména zadarmo

NEVÝHODY
  • nemáte takovou kontrolu
  • jste omezeni na 1 web

Způsob 3

je mi to jedno

webzdarma.cz, neocities, apod.

Velmi jednoduché a přívětivé hostingové služby (často zadarmo)

VÝHODY
  • velmi jednoduché zprovoznit
  • hosting a poddoména zadarmo

NEVÝHODY
  • často jste velmi omezeni
  • pro jisté účely až moc jednoduché

discovery

Máte cool stránku, ale nikdo na ni nechodí :(

RRS reader

  • všichni na tuhle technologii zapomněli :(
  • nic vám neservíruje algoritmus, sami si vybíráte, co sledujete
  • velmi open!!

cool list

Seznam cool stránek cool lidí o cool věcech.

PROČ?

  • každý má co nabídnout
  • seberealizace!
  • je to cool 😎

chamik.eu/smrst2024

Děkuji za pozornost <3

Zdroje obrázků