Å bygge et nettsted med HTML, CSS og Javascript

[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.

 

[Zenobia]

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 18. juni 2022 av Zenobia

[Zenobia]

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

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 18. juni 2022 av Zenobia

[Zenobia]

AIs første forsøk på Sagior:

 

[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.

[Zenobia]

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   

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??!   Jeg venter spent på fortsettelsen.

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

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 ( <-- 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 21. juni 2022 av Zenobia

[Zenobia]

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 22. juni 2022 av Zenobia

[Zenobia]

Mere aktuelt:

 

[Zenobia]

Stoppet på 9.15

+ video i innlegg #285

Endret 21. juni 2022 av Zenobia

[proghodet]

Nå swinger det her, @Zenobia! 😁

[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

[Zenobia]

proghodet skrev (På 22.6.2022 den 21.40):

Nå swinger det her, @Zenobia! 😁

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 så alt blir bare smalt.

 

 

 

[Zenobia]

Den kjekke tegnomaten har flyttet til craiyon.com

Ett av resultatene fra synteseformelen "military defence organisation in the colors cognac, wine-red and crème"

Bruker det som midlertidig bilde.

Venter på tilgang til DALL-E

Endret 26. juli 2022 av Zenobia
Beklager feil nettadresse. Rettet nå

[Zenobia]

Har lyst på egen 404-side.

 

'Lost in space'

[Zenobia]

Zenobia skrev (På 1.6.2022 den 16.31):

Jeg kommer med tid og stunder til å slette meg fra Infinityfree og W3spaces.

Fikk en epost forleden med beskjed om at de kom til å slette meg   De har nok merket null aktivitet. Lettvint for meg, og greit for dem. Tar en ny gjennomgang av tråden nå, og noterer meg lure ting som var for meget for meg dengang da. Står på side 9 når jeg skriver denne kommentaren.

Jeg skulle egentlig begynne med 'Kosmografi'-delen, men det var før jeg husket at jeg skulle jo se den crash-videoen om flex (lenke kommer) og bryne meg på kommunik-fila. Den har innhold, men ikke stil. Eller plassering.

Så fant jeg ut at indexeng funker på nett, men ikke lokalt (pga noe /../..-greier), så når jeg kommer til side 18, skal jeg se hva syntaksen var. Måtte bare kommentere Infinityfree underveis.

W3spaces skal jeg slette en dag jeg husker det.

Når jeg poster dette innlegget, kommer jeg til side 18, og da kan jeg vel like godt redigere den indexeng-fila med det samme ...

Kodedag -> kaos inntar hodet. Jeg skal lære meg å være systematisk snart!

Sr

Endret 27. juli 2022 av Zenobia
Feil, annen tråd. Fortsetter fra s9

[Zenobia]

Zenobia skrev (På 4.6.2022 den 19.03):

Jeg liker science fiction, særlig den med romskip, og har laget min egen versjon. Hvis du heller vil lese, har jeg lagt ut manus til tre episoder her: Den første nettsiden  Prologen er flyttet (midlertidig); den er lenket til WP-forsøket jeg nå har forlatt.

Siterer fra mitt eget svar til Optimo s13:

Den første nettsiden manus 1, 2 og 3 ligger på, miniblogg.no/integra LEGGES NED 1. september

Sannelig min hatt var det bra at jeg begynte å søke rundt etter andre løsninger.

Vel, da bryr jeg meg ikke om å slette meg der heller; det går vel automatisk? Skal huske å undersøke hva som vil skje med innhold som allerede ligger ute.

Måtte bare kommentere dette. Tilbake til s 13

[Zenobia]

Zenobia skrev (På 8.6.2022 den 19.11):

Mulig jeg har registrert meg flere steder Wix? Noe med logo-mekking Velo?

Jepp, Wix maser stadig om noe 50% etellerannet, eller var det bekreft epost? JA, jeg skal vel slette til slutt.

Og Velo Logo designs finnes på dribble.com. Jeg er IKKE registrert på velo. Er jeg registrert på dribble? Det skal jeg finne ut en annen dag.

- - -

En oversikt over hvilke undersider jeg skal ha, vil være en fordel.

Jeg har laget et nettstedskart (sitemap). Undersider og hvilke lenker hvor ... Jeg lager uferdige undersider med forståelige navn. Fyller i innhold etter hvert. Mye <!-- Kommentarer -->

Å bestemme seg for hvordan de skal se ut, blir en prosess.

Tegner for hånd. Hytter neven og ytrer ukvemsord mot Paint, lukker og lager i frustrasjon skisser i et regneark!

 

Folk er glad i bilder.

• Jeg har INGEN tegninger av mine fiktive romskip, men jeg har absolutt en formening om hvordan de skal se ut.
  • Tegneprogrammer som kan konstruere basert på inndata ... Finnes sånt?
    • Jeg har lastet ned Dynamo, men må fjerne blokkering på mange programtilleggsfiler før det vil la seg installere.
• Personell: Jeg har absolutt en formening om utseendet til enkelte av karakterene, men ikke alle. Basert på skuespillere. Ønsker ikke noe opphavsrett-trøbbel. Hvis ikke hele presentasjons-siden skal bli en vegg av tekst, må jeg finne på noe lurt. Jeg har sjekket ut AI-ansikter. Mnjaæææi, ikke ... hm ...
  • Venter på DALL-E-tilgang

 

Kommentarer inni.

Er det noen som leser tråden som har vært borti Dynamo sandbox? Kanskje arkitekter?

*tilbake til s16*

 

[Zenobia]

DA! ( Til @proghodet )

1. Legg til justify-items: center i .buttons
2. Legg til width: min-content på .buttons a (linje 72 ish)

(Sakset fra pm)

Endringer i tronora.github.io/index synket med github. Mulig jeg gjorde noe annet også.

Når jeg har trålet gjennom noen sider i fløyelsmyk-tråden for å notere lure ting, er det PAUSE!

Senere i aften skal jeg se, ja hva var det igjen ... crash course i flex. Har kommet til at kommunik-fila blir i flex. Og så må jeg HUSKE Å TENKE MOBIL-design FØRST

 

Til moderskipet, med modifikasjon:

{
  border: 2px solid red; eh, annen farve
  border-radius: 12px;  Denne Mnja, vi får se
  padding: 5px;
}

Gir en avrundet kantlinje rundt hele avsnittet/elementet. Evt. h1. Vi får se. Og kanskje ingen kantlinje nederst.

 

 

Endret 27. juli 2022 av Zenobia

[Zenobia]

Fra Fløyel:

Hadde nesten glemt Mozilla sine sider! Hva sier de om flexbox og responsivt design?

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Stikkord: responsive typography, basert på mediaquery. css betyr noe sånt:

html { font-size: 1em; }
h1 { font-size: 2rem; }
@media (min-width: 1200px)
{ h1 { font-size: 4rem; } }

For da får man bare KJEMPESTOR overskrift når skjermen er min 1200px, og ikke på mobil. HUSK.

- - -

Multi-flex-noe ... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox#multi-line_flex_containers_with_flex-wrap

- - -

favicon skal jeg også huske. Til det lille bildet til venstre oppi fanen. JADA, jeg skal bekrefte epost!

- - -

Hva skjer om jeg setter <pre>Masse tekst      osv.      her</pre> i en flex-container?   Må prøves!

<del/> = LYKKE! Gjennomstreking. HUSK!!!!!

 

 

 

[proghodet]

6 hours ago, Zenobia said:

Tegneprogrammer som kan konstruere basert på inndata

Hva slags inndata?