Gå til innhold

Å bygge et nettsted med HTML, CSS og Javascript


Anbefalte innlegg

Zenobia
Katten.2.0 skrev (På 16.6.2022 den 17.35):

Som igjen består av flere deler. Altså, jeg har et oppnåelig mål innen ett prosjekt for én kunde, som er halvveis i en prosjektperiode på halvannet år. Dette prosjektet kan oppsummeres til ett oppnåelig mål, som igjen består av flere hundre delmål.

Ditt mål er å lære deg html, css og javascript, samtidig som du skal lage en nettside - uten tidligere kunnskap. Det er, etter min mening, et mye mindre oppnåelig mål enn prosjektet jeg har ansvar for. Fordi du gaper over for mye. Html, css og javascript er noe som krever tid og kontinuerlig arbeid for å mestre - hver for seg. Og en oppskrift på å miste gløden og gi opp. Så har du webdesign som i seg selv består av masse aspekter man bør beherske.

Mitt mål er å ha en fin nettside til de som vil vite mer rundt fortellingen om 'Den intergalaktiske gravitasjonsalliansen'. Samtidig lærer jeg html css og javascript til det formålet. Nå har jeg tegnet en sitemap, og enkeltoppgavene holder jeg nå på å plotte inn i et regneark. Jeg ser underveis om jeg er detaljert og spesifisert nok. Jeg har erfart at å være litt borte fra materien, ikke er veldig lurt (se uthevet). Litt, hver dag.

 

  • Liker 1
Lenke til innlegg
Del på andre sider

Fortsetter under...

Zenobia
Skrevet (endret)

Ser på blokk-elementer nå. Merker meg

<article/> Kan passe til episodemanusene?

*mer kommer*

Med tips fra en NRKbeta-artikkel kom jeg over Disco diffusion på GitHub.

Likedan repoet Dall-E mini

Søker etter løsning på å få tegnet romskipene.

Hvilken side er symptomet på, og i hvilken fil ordnes det?

 

Endret av Zenobia
Lenke til innlegg
Del på andre sider
Zenobia
Skrevet (endret)

:ninja:

Søketekst Dall-E mini: Ocean, fields and mountain-landscape with cloudy, pale pink sky

dallemini_2022-6-19_1-35-4.thumb.png.a45ba8c071f9d2651987004c255d2d18.png

Det er visst ikke så mange innbyggere på Euforia ennå ...

Søketekst: Ocean, fields and mountains with woman and boat and pale pink sky with sun.
Båten ble grei; det var verre med personen.

Prøver også det samme med sea ...

Ikke lett med mennesker.

Endret av Zenobia
Lenke til innlegg
Del på andre sider
Zenobia

AIs første forsøk på Sagior:

 

dallemini_2022-6-19_1-55-40.png

Lenke til innlegg
Del på andre sider
Rhodiola

Ryddet for forherligelse av og tilretteleggelse for lovbrudd i tillegg til siteringer av slettede innlegg. Vennlig påminnelse om at piratkopiering er et lovbrudd og derfor ikke ønsket her på KG.

Rhodiola, adm.

  • Hjerte 1
Lenke til innlegg
Del på andre sider
Zenobia
Skrevet (endret)

Tanker jeg gjør meg om responsivt design mens jeg leser på w3schools:

Hva er en (et?) mediaquery? Mediasøk.  At siden søker etter  "Hvilken enhet vises jeg på?" En måte for nettsiden å spørre "Hvor er jeg?"

Når siden får svar på hvor den befinner seg, kan den tilpasse seg, hvis den har fått de rette instruksjonene. Tilpasningsinstruksjonene ligger ofte (alltid?) i stilarket, f.eks styles.css.

Hm. Lurer på om jeg mangler et sånt mediasøk i stilarket som er knyttet til prologsidene mine?

Eksempel på formel å lete etter: @media screen and (max-width:800px)

Fant! I styles.css står det: @media(min-width: 560px)

Hva er viewport? Den delen av nettsiden som er synlig på én gang. For å se mer av siden, må man bla nedover (og, hvis designet er dårlig(?), bortover). Så skjermstørrelsen er  én ting. = viewport? Svaret på mediaquery = størrelsen på viewport?

Informasjon om viewport-tilpasning ligger i html-dokumentet, inni <meta>-taggen.

Brukere er vant til å bla nedover, men ikke bortover! Og så kaller man det å scrolle! Tenker på gammeldagse bokruller, der man avgjort "scrollet" bortover :ler:  

Da burde vi mennesker være vant til det? Er bortover-blaing for dårlig utformet, og er det en missed opportunity? Eller skal vi la bokrullens død være et eksempel på at det i utgagnspunktet ikke var en helt genial løsning? Hvorfor valgte man i tidligere tider å scrolle bortover og ikke nedover? 

Fordi man skrev i lengderetningen, men nedover i spalter. Da kunne man "bla" flere tekstspalter bortover med få omdreininger. Så kom kodeksen, og så boka. Mer og mer et kort format bortover.

Jeg, med mine hav av tabulære data 😬

Kort og greit: Sørg for at designet ser bra ut innenfor alle enhetenes skjermvidder.

Hvordan??! :bond:  Jeg venter spent på fortsettelsen.

Tror det har noe med flex-containere å gjøre, men jeg har hørt rykter om grid også :ninja:

Bruk CSS til å tilpasse innholdet utifra svaret på "Hvor er jeg?". 0K.

Mange nettsider er utformet med utgangspunkt i kolonner (=grid-view) Grid betyr nett, nett på norsk er jo linjer både på kryss og tvers, så ... Jeg skal tenke kolonner når jeg leser på engelsk om grid-view.  Ofte er det snakk om 12 kolonner.

Minnes enellerannen video her i tråden om grid(?) *sjekker* 

Jupp, øverst på s41, innlegg #261.

Har sett et kvarter nå, og tatt notater underveis. Kjenner igjen at jeg har forsøkt å forstå denne før, men det var for tidlig. Nå virker det mye mer overkommelig :yvonne: ( <-- dagens nett-trim)

display: grid;
gap: 1.5 rem

Kevin Powell anbefaler å bare bruke gap i grid

Først: lag innhold i en container? Ser han bruker <article/>

Tegn rundt. Han har laget ferdig designet separat?

Hvor mange kolonner trenger jeg til dette utseendet?

grid-template-columns: 1fr  ( kort for fraksjon av skjermvidde)

F. eks repeat (4, 1fr) gir fire like brede kolonner

Dette er 'explicit columns' = man har eksplisitt erklært hvor mange kolonner man vil ha. Det som følger, er 'implicit rows' = radene kommer automatisk. Man kan definere begge.

Det samme gjelder omvendt, om man erklærer #rader; kolonner kommer automatisk.

Innhold som går over flere kolonner: Kan lage klasser: f. eks

.grid-col-span-2{        (Mr. Powell liker lange klassenavn)

grid-column: span 2;     klassen brukes inni element-taggen, f.eks <article class="grid-col-span-2">

}

- - -

Mere kommer ...

Endret av Zenobia
  • Hjerte 1
Lenke til innlegg
Del på andre sider

Annonse

Zenobia
Skrevet (endret)

Til senere:

Fant ham på GitHub. Følger.

Er på 13.16 i videoen.

Leter etter hvordan: bilde som fungerer som bakgrunn, responsivt, med tekst som løper over i eventuelt smalere del av skjermen (mobil:tekst over hele skjermen, over bildet. Nettbrett, usikker. Bredere tekst enn 40%?)

Glemte å bruke <article/>; skal se mer på det.

Nettbrettvisningen, f.eks for ipad-air i Firefox, stemmer ikke med sånn som det er på mitt faktiske nettbrett.

Endret av Zenobia
  • Liker 1
Lenke til innlegg
Del på andre sider
Zenobia
Skrevet (endret)

Stoppet på 9.15

+ video i innlegg #285

Endret av Zenobia
  • Liker 1
Lenke til innlegg
Del på andre sider
proghodet
On 6/21/2022 at 5:23 PM, Zenobia said:

Nettbrettvisningen, f.eks for ipad-air i Firefox, stemmer ikke med sånn som det er på mitt faktiske nettbrett.

iPad Air har vel kommet i 4 generasjoner nå, og hver med forskjellige oppløsninger. Den som ligger i Firefox er sikkert den første (og sikkert minste?). Du kan definere egne oppløsniger i firefox hvis du vil konkret se dine egne enheter :)

  • Liker 1
Lenke til innlegg
Del på andre sider
Zenobia
proghodet skrev (På 22.6.2022 den 21.40):

Nå swinger det her, @Zenobia! 😁

:laugh: Joda, hadde en raptus. 

Jeg vet ikke hvilken ipad air jeg har; kanskje en av de første. Skal se om jeg finner oppløsningen. Visningen jeg får, holder bildet inni tekst-stripa :klo: så alt blir bare smalt.

 

 

 

Lenke til innlegg
Del på andre sider

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...