Exemples del que es vol aconseguir
Idea general
En el Notion es poden incrustar pàgines externes (embed page).
En general per allotjar una pàgina web s’ha de pagar un servidor i un domini públic.
GitHub pages et permet allotjar webs (estàtiques) gratuïtament i per sempre.
Utilitzarem doncs GitHub pages com a servidor i com a proveïdor d’un domini públic, tot sense haver de pagar res. Això és així perquè GitHub és el magatzem de codi obert més gran del món.
Com funciona una web estàtica?
Molt a grosso modo i sense entrar en detalls una web general sol tenir una part de frontend, una part de backend i una base de dades.
En el cas de les webs estàtiques no hi ha backend (el que gestiona per darrera la web i la seva lògica interna) ni tampoc hi ha bases de dades associades. Aleshores tot es simplifica al frontend, un conjunt d’arxius HTML, CSS i Javascript.
El frontend està enfocat al que veu directament l’usuari. Sense entrar en massa detalls es podria resumir de la següent manera.
l’HTML posa el contingut, el CSS li dona l’estil i el JS el dota del poder de la programació, els algoritmes, condicionals… permetent la possibilitat d’animacions i afegir interactivitat.
Exemple simple
En l’HTML posem el text “Hola bon dia”, en el CSS seleccionem la font i el color d’aquest text, i en JS fem que el text reboti d’esquerra a dreta de la pantalla o que al clicar-lo canviï de color.
Dificultat d’aprenentatge dels 3 llenguatges
HTML
l’HTML és increïblement simple (per la majoria d’usos que volem donar-li aquí). Sempre segueix una plantilla molt bàsica.
<!DOCTYPE html> <html> <head> <title>Títol pàgina</title> <link rel="stylesheet" href="estil.css"> <script src="codi.js"></script> </head> <body> <!-- AQUÍ VA TOT EL CONTINUGT /--> <div class="caixa"> <p>Això és text dins d'una caixa</p> </div> </body> </html>
El divideix en dos parts: el head i el body. En el head principalment diem a on es troben els fitxers CSS i Javascript i donem un títol a la pagina (podem fer moltes més coses evidentment), i en el body i posem tot el contingut, generalment organitzat en caixes anomenades divs.
Hi ha més coses com el posar id’s als diferents atributs i organitzar-los en classes (class) per després poder decidir a quins fer referència en l’arxiu CSS, però això és el principal.
CSS
El CSS també és a priori molt senzill per fer coses simples, per coses més sofisticades de disseny si que pot ser tot un repte, però pel que volem fer aquí és bastant senzill.
Funciona indicant a cada conjunt d’elements un conjunt de propietats, per exemple.
p { font-family: Arial; font-size: 12px; } .caixa{ border: 2px; border-color: blue; background-color: yellow; }
La principal gràcia està en que, tal i com diu el nom “Cascade Style Sheets”, hi ha una jerarquia (text dins de caixa, caixa dins de body, body dins de html…) i tu pots declarar les propietats que vulguis a cada element que si hi ha un “conflicte” entre elles el CSS el resoldrà per jerarquia i només farà cas a una.
Javascript
El javascript, com a llenguatge de programació interpretat que és, té les seves similituds amb el Python. És a dir que no ens constaria tampoc molt d’aprendre les coses bàsiques si ja hem fet Informàtica a 1r…
const num1 = 5; const num2 = 3; // Sumem dos números const sum = num1 + num2; // Mostrem el resultat console.log('La suma de ' + num1 + ' i ' + num2 + ' és: ' + sum);
…Ara bé, les coses bàsiques en Javascript no ens seran de massa utilitat pel que volem aconseguir aquí.
La funció que segurament li voldrem donar al Javascript en aquestes webs estàtiques incrustades al Notion és la de fer gràfics interactius. O altres coses per l’estil (animacions, gràfics de funcions, interactivitat...) que malauradament sí que són bastant difícils de programar.
Aleshores com procedirem? Copiant el codi a lo vasto d’altres llocs webs, o generant-lo amb webs externes (per exemple Plotly).
Separació de Idees diverses
Dels exemples mostrats al principi podem dividir-los en dos grans grups: coses que podríem fer nosaltres (css senzill i sense javascript) i coses que no podríem fer nosaltres (la resta).
Coses que podem fer nosaltres
sdf
Coses que només podem copiar
sdf
Generar JS des de Python
sdf
Guia d’ajuda per crear una web estàtica amb GitHub Pages
Guia oficial
Primers passos
Bla bla
Nota sobre web ‘user’ i web ‘project
La guia era per crear una web associada al teu compte de GitHub. Però també es pot fer una web associada a un projecte de GitHub, el qual pot ser públic i col·laboratiu. És a dir que tothom podria posar les pàgines que s’incrustaran a Notion allà i es podria veure el codi d’exemple de les coses que es van veient per aquesta web i es volen copiar o recrear.
