Forskelle

Dette viser forskellene mellem den valgte og den nuværende udgave af dokumentet. Gul er linjer der findes i den gamle udgave, og grøn er linjer der findes i den nuværende.

Link til denne sammenlinings vising

--- da:how_to:hjemmeside [2020-03-16 16:25] – ↷ Page moved from how_to:hjemmeside to da:how_to:hjemmeside bjarke
+++ da:how_to:hjemmeside [2022-08-01 14:48] (nuværende) – slettet jonas22
@@ Linje 1: / Linje 1: @@
-//***Denne side er stadig under udarbejdelse og kan derfor virke meget mangelfuld på nuværende tidspunkt.***//
-====== How to Hjemmeside ======
-På denne side vil du finde information om hvordan du hurtigt og nemt kan lave en hjemmeside til din rustur, helt gratis!
-Der vil blive givet templates og information om hvordan i kan udskifte hoved elementer på siden, men hvis man er mere eventyrlysten, er der selfølgelig også mulighed for at customise den som man vil.
-Selve template er en modificeret udgave af et bootstrap template, gjort ekstra studiestarts festlig med animationer og sjove features.
-==== Den færdige side ====
-Den hjemmeside som i vil kunne lave med denne guide kommer til at være i stil med hjemmesiden som blev lavet til [[http://bisserup15.github.io | Bisserup Rusturen 2015]]. Den tager sig bedst ud i Google Chrome da features som de flyvende pandaer ikke er understøttet i Safari. Når i er nået bunden af hjemmesiden så gør jer selv tjenesten af at tage elevatoren til toppen!
-Der vil være mulighed for selv at vælge coverbillede, billeder af jer vektorer, lyde til jeres billeder, animationer til tekst og billeder, samt gennemgående farver på sitet.
-Animationerne er lavet med [[http://mynameismatthieu.com/WOW/|WOW.js]] og [[http://daneden.github.io/animate.css/|Animate.css]]. Alle animationer som i ser på [[http://daneden.github.io/animate.css/|Animate.css]] vil kunne bruges på jeres hjemmeside, så kun fantasien sætter grænser!
-**OBS. Der var i en tidligere version problemer med at der ikke kunne være 4 vektorer ved siden af hinanden, det er fixet i den nyeste version, men hvis i har en ældre version skal i blot lave følgende ændringer: [[https://github.com/bisserup15/bisserup15.github.io/commit/14f70c1539d47dd9a74c6fb2f050cfba72924261 | Se Ændringer Her]] **.
-----
-===== 1. Setup =====
-Step 1. Først og fremmest skal i lave en bruger på [[https://github.com/|Github]] hvor det **brugernavn** i vælger, vil blive prefixet på jeres webaddresse. Hvis brugernavnet fx. er "bisserup15" så vil webaddressen blive bisserup15.github.io
-Step 2. Næste step er at installere [[https://git-scm.com/book/en/v2/Getting-Started-Installing-Git|Git]] som vil blive brugt til at opdatere jeres website. Følg guiden i det givne link og så skulle alt være i vinkel.
-Step 3. I skal nu gå tilbage til [[https://github.com/|Github]] og lave et nyt **Repository**.
-Navnet på jeres repository **SKAL** være navngivet som følger:
-__//brugernavn//.github.io__ hvor brugernavnet naturligvis skal skiftes ud med jeres unikke brugernavn.
-Step 4. Åben nu terminalen/cmd og skriv
-  git --version
-Hvis den den ikke kommer op med en version men skriver en warning om at git ikke er en commando, så skal i gå tilbage til Step 2. og prøve at installere igen.
-Hvis den ikke kommer med en error så skriv da nedenstående kommandoer **EN LINJE AF GANGEN** og **HUSK** at ændre USERNAME til jeres eget brugernavn.
-<code>
-git clone -o temp https://github.com/bisserup15/bisserup15.github.io.git ruswebsite
-cd ruswebsite
-git remote add origin https://github.com/USERNAME/USERNAME.github.io.git
-git push -u origin master
-</code>
-Step 5. Vent nu 1 - 5 min og åben jeres browser og skriv //BRUGERNAVN//.github.io i adressenbaren og i skulle gerne få vist en hjemmeside som stemmer overens med [[http://bisserup15.github.io]].
-I har nu en hjemmeside og det er tid til at redigere den så det bliver jeres egen!
-===== 2. Overview =====
-Nu hvor i har fået alle source filerne ned på jeres computer vil i kunne redigere og tilføje som det passer jer. I dette afsnit vil jeg give jer et overblik over hvad de forskellige filer gør og hvor i skal redigere for at ændre specifikke ting.
-Mappe-strukturen er som følger:
-  *audio
-  *css
-  *font-awesome
-  *fonts
-  *img
-    *portrait
-  *js
-  *less
-og der ligger desuden en fil som hedder //index.html// i ydermappen
-**audio** \\
-Her placeres lydfilerne til hver enkelt vektor samt lyden til elevatoren. Det er ikke nødvendigt at have disse, men det er en sjov feature.
-**css** \\
-Her ligger filerne hvor stylingen til jeres hjemmeside befinder sig. Det er i disse filer at i kan ændre ting som farver og coverbillede.
-**img** \\
-Her ligger alle billederne som bliver brugt på jeres hjemmeside. Det er vigtigt at i prøver at holde filstørrelserne nede på jeres billeder da det ellers kan resultere i lang loading tid på jeres hjemmeside.
-**js** \\
-Her styres blandt andet elevatoren og lydfilerne, så de bliver integreret på jeres hjemmeside.
-**index.html** \\
-Det er i denne fil i kommer til at ændre mest. Her styrer i hvad der skal stå på jeres hjemmeside, hvor mange afsnit i vil have, hvilke billeder der skal være, hvor mange vektorer der skal vises, samt titel og icon til jeres hjemmeside.
-===== 3. Customising =====
-Start med at åbne filen //index.html// i browseren, evt. ved at klikke på den i mappen. Når i gemmer ændringer i filerne vil i kunne se dem direkte i browseren med denne fil åben. Lad os starte med at ændre titlen som bliver vist på den tab som filen er åben i. \\
-Pt. står der "Bisserup 2015 Rustur", men nu ændrer vi det til navnet på jeres rustur.
-Åben //index.html// i et tekstredigeringsprogram som notepad / [[http://www.sublimetext.com/|Sublime]] eller [[https://atom.io//|Atom]]. \\
-På linje 14 vil i kunne se følgende
-<code html><title>Bisserup 2015 Rustur</title></code>
-Ændrer i teksten mellem de to <title> tags, gemmer filen og opdaterer siden i jeres browser vil i kunne se at titlen nu har ændret sig på jeres tab.
-==== Cover Header ====
-Hvis i ønsker at ændre teksten på coveret så kan det gøres ved at ændre teksten imellem <h1> tags på linje 124 i index.html
-<code html><h1 class="wow fadeInUp">SKER DER, ER I KLAR ELLER HVAD!?</h1></code>
-==== Flyvende Panda ====
-I har nok bemærket at der rundt om på siden er pandaer der flyver frem og tilbage. I kan enten fjerne dem helt eller skifte billedet ud hvis i ønsker. Det kræver blot at i ændrer stien // ./img/panda-right.png // og // .img/panda-left.png // samtlige steder hvor det optræder i index.html. Hvis i fx. har lagt et billede ind i img mappen som hedder fisk.png så skal den nye sti hedde //./img/fisk.png//. Det er en fordel at finde et billede med transparent baggrund. Ønsker i at fjerne de flyvende billeder helt skal i blot slette alle "marquee" elementerne i index.html, følgende stykke kode er et eksempel på hvad der skal slettes for at slippe af med de flyvende pandaer:
-<code html>
-<marquee behavior="scroll" direction="right" scrollamount="15" style="position:absolute; margin-top:-60px; z-index:100000;"><img src="./img/panda-right.png"></marquee>
-</code>
-I kan desuden også ændre hastighed og retning ved at ændre på direction og scrollamount
-==== Tekst ====
-Der skal selfølgelig en masse brødtekst til for at give information til de kære russere. Brødtekst kan konstrueres i mange forskellige former, men den mest generelle er ved at skrive tekst imellem <p></p> tags. Følgende er et eksempel på noget tekst fra hjemmsiden
-<code html>
-<p class="text-faded wow fadeInUp" data-wow-delay="400ms">Godt spørgsmål søde rus! Vi mødes naturligvis i grønnegården som er i centrum af bygning 101 lige der hvor stjernen er placeret på kortet nedenfor &#8681;</p>
-</code>
-Det kan ses at jeg har givet teksten klassen //text-faded//. Dette medvirker at brødteksten får en farve som er deklareret i //css/creative.css//. Desuden er der også givet klassen //wow// og //fadeInUp//, samt et //data-wow-delay//. Disse giver teksten en animation men mere om det senere. Det vigtige er at i forstår at tekst der står mellem et start <p> og slut </p> tag vil blive vist på siden der hvor <p> tagget er placeret i forhold til de andre elementer.
-I kan også lave links midt inde brødteksten ligesom vi har gjort med vores link til google maps:
-<code html>
-<a href="https://www.google.dk/maps/dir//55.1986843,11.5161096/@55.1990168,11.5132263,1300m/data=!3m1!1e3" target="_blank">Gammel Strandvej 135, 4243 Rude</a>
-</code>
-Ved //href// skal i skrive linket til den webaddresse i vil vise hen til, og efter > men før </a> kan i skrive en placeholder tekst til jeres link.
-==== Farver ====
-Al tekst, links, baggrunde og knapper er tildelt farver, og disse farver kan naturligvis ændres!
-Hvis vi kigger på koden til den første knap på linje 146 i index.html vil man finde følgende:
-<code html><a href="#vektor" class="btn btn-primary btn-xl page-scroll wow tada">Citat Ulla: Århhh vi skal have flere knapper</a></code>
-Knappen er blevet tildelt forskellige classes, og disse classes bliver brugt til at ændre farven på knappen. Først ses det at den er givet classen **btn** og **btn-primary**.
-Hopper vi ind i css/creative.css filen vil man på linje 403 og nedefter se en masse kode som omhandler **btn-primary** og specielle cases for denne, som når man holder musen over den (:hover) mm. Det ønskede kunne fx. være at ændre farven på knapperne til blå, i hvilket tilfælde ting som border-color, background-color osv. ændres til #0000FF som er hash koden for blå.
-På samme måde kan farven på teksten på knappen, og i det hele taget al tekst på siden, også ændres. Det handler her om at ændre værdien på //color// som specificere farven på tekst med en given class.
-Ønsker jeg fx. at ændre farven på teksten på knappen, da ændrer jeg linje 419. Ønkser jeg at ændre farven på brødtekst med classen **text-faded** da ændrer jeg værdien for //color// på linje 79.
-I har sikkert lagt mærke til at nogle baggrunde er mørke og andre hvide.
-Disse er specificeret alt efter om en section er givet classen **bg-dark** eller ej, og baggrundsfarven på de sectioner som er tildelt **bg-dark** kan ændres på linje 75 i css/creative.css
-==== Navigations Bar ====
-I har nok allerede lagt mærke til at man kan bruge navigationsbaren i toppen til at navigere rundt på siden.
-Måden den fungerer på at at hver section er givet et **id**.
-Første section er kaldet "rusturen" hvilket kan ses på linje 132 i index.html.
-<code html><section class="bg-dark" id="rusturen"></code>
-For at der i navigationsbaren kommer en knap til denne section skal man tilføje et liste element til denne section. Vi har allerede sat knapperne op så de virker til de sektioner vi brugte men hvis i ønsker at kalde dem noget andet eller tilføje flere, så kan navigationsbaren opdateres fra linje 101 og 10 linjer ned. Hvis i vil benytte de sektioner der allerede findes, men vil ændre navnet på en section, så ændrer i bare brødteksten mellem de to <a> </a> tags.\\
-Hvis i har tilføjet flere sektioner skal i huske at tilføje et helt liste element med det korresponderende id:
-<code html>
-<li>
-  <a class="page-scroll" href="#hytten">Hytten</a>
-</li></code>
-Ovenstående er et eksempel på et navigations link til en "hytte" section.
-==== Vektor Billeder ====
-For hver vektor skal der fra linje 159 i index html og ned laves et element der ser ud som følger:
-<code html>
-<div class="col-lg-3 col-sm-6 wow fadeIn">
-  <a target="_blank" onclick="karloff.playclip()" onmouseout="karloff.pauseclip()" class="portfolio-box">
-    <img src="img/portrait/Karloff.jpg" class="img-responsive" alt="">
-    <div class="portfolio-box-caption">
-      <div class="portfolio-box-caption-content">
-        <div class="project-category">Kaptajn Karloff &#9875;</div>
-        <p class="text-faded">Jeg er i virkeligheden en rigtig kaptajn men droppede livet på havet for at opfinde et stykke IT til at redde verden! Desuden er han mega smækker lækker smuk og er Ulla's loverboy &hearts;</p>
-        <img src="img/play.png" class="play-button">
-      </div>
-    </div>
-  </a>
-</div>
-</code>
-Der er nogle ting der kan udlades hvis i ikke ønsker musik tilknyttet hver vektor.
-    onclick="karloff.playclip()" onmouseout="karloff.pauseclip()"
-kan slettes og det samme gælder
-    <img src="img/play.png" class="play-button">
-Men resten er vigtigt, og hvor i ændrer den tilknyttede tekst skulle være givet ud fra koden.\\
-Mere vigtigt er hvordan i ændrer billedet. Dette sker ved
-    <img src="img/portrait/Karloff.jpg" class="img-responsive" alt="">
-Her refererer jeg fx. til Karloff.jpg som er et billede der ligger i img/portrait mappen. Det er vigtigt at disse billeder ikke fylder for meget da dette kan resultere i at det tager meget lang tid at loade hjemmesiden.\\
-Desuden så har vi for nemhedens skyld brugt samme dimmensioner på ALLE billederne. Jeg vil anbefale at i gør det samme da denne section ellers kan komme til at se underlig ud.\\
-Vores billeder har opløsningen **610x960**, enhver opløsning i samme dimension skulle virke.
-==== Lyde ====
-Som i sikkert allerede har bemærket er der en den lyde på hjemmesiden. Der er den lyd der bliver afspillet når i åbner siden, der er vektorernes individuelle lyde, og så er der elevatoren.
-Jeg vil i dette afsnit vise jer hvordan i kan ændre/fjerne førstenævnte samt vektorernes.
-=== Intro lyd ===
-For at ændre/fjerne "Det skulle blive den bedste sommer i deres liv" lyden, skal i åbne // index.html // og gå helt til bunden. Her vil i finde følgende kode:
-<code>
-<audio autoplay>
-  <source src="audio/bs.mp3" type="audio/mpeg">
-</audio>
-</code>
-Hvis i ønsker lyden fjernet så slette i bare dette kode, men hvis i ønsker at bruge en anden lyd så skal i ligge en anden lyd ind i // audio // mappen istedet for den nuværende bs.mp3
-Hvis i også kalder den nye fil for bs.mp3, så behøver i ikke ændre noget kode, men hvis i har givet den et andet navn skal // src="audio/bs.mp3 // ændres.
-=== Vektor lyde ===
-Først og fremmest skal i have lavet nogle mp3 filer med de lyde som i ønsker hver enkelt vektor skal have. Det er vigtigt at størelsen på lydfilerne ikke er for stor da dette kan medføre lang loading tid på jeres hjemmeside. Jeg vil ikke gennemgå hvordan i laver disse lydfiler, men hvis i har problemer så er jeg sikker på at nogle af jeres medvektorer kan hjælpe jer.
-Hvis i allerede har lydfiler klar så er det ellers bare igang:
-Step 1. Først ligger i jeres lydfiler ind i mappen // audio. // Husk at give jeres filer genkendelige navne som jeg har gjort.
-Step 2. Åben nu filen // mouseoveraudio.js // som ligger i //js // mappen. I bunden af denne fil vil i finde noget kode á la
-<code>
-var ulla=createsoundbite("audio/Ulla.mp3");
-var wanta=createsoundbite("audio/Want_A_Woman.mp3");
-var phree=createsoundbite("audio/Phree.mp3");
-</code>
-Hver vektor skal have sin egen linje kode og det er vigtigt at i ikke bruger bogstaver som øæå.
-Hvis vi kigger på mig selv "Ulla", så kan i se at jeg laver en variabel "ulla" og tilknytter min lydfil "Ulla.mp3" til denne variabel. Sådan skal i gøre med alle jeres vektorer, så alle har en variabel med deres lydfil tilknyttet.
-Step 3. Åben nu // index.html //
-Hvis i underede jer over hvad det der "onclick="ulla.playclip()" onmouseout="ulla.pauseclip()"" betød så har i her svaret. Det er nemlig her at vi afspiller lydklippet.
-For hver vektor skal i i jeres <a> tag have inkluderet dette men selfølgelig med hver enkelt vektors variabel navn. Mit <a> tag bliver således
-    <a target="_blank" onclick="ulla.playclip()" onmouseout="ulla.pauseclip()" class="portfolio-box">
-og fra sidste sektion husker i at karloff's var
-    <a target="_blank" onclick="karloff.playclip()" onmouseout="karloff.pauseclip()" class="portfolio-box">
-==== Animationer ====
-Som i sikkert allerede nu har lagt mærke til, er der rundt omkring på siden, en masse forskellige og sjove animationer. Disse animationer er blevet lavet med [[http://mynameismatthieu.com/WOW/|WOW.js]] og [[http://daneden.github.io/animate.css/|Animate.css]], som der også er blevet nævnt lidt om tidligere men lad os nu kigge lidt mere i dybden på disse, og hvordan man bruger dem.
-Prøv f.eks. at kigge på denne lille code snippet
-<code html><h2 class="section-heading wow fadeInUp" data-wow-delay="300ms">Men lækre vektor hvor mødes vi mandag?</h2></code>
-==== Tab Icon ====
-Lige som jeg startede med at vise jer hvordan i ændre titlen på jeres tab, så kan i selfølgelig også ændre billedet. Dette gøres i // index.html // på linje 11
-    <link rel="shortcut icon"href="img/panda4.png">
-Alt i skal gøre er at ligge jeres eget ikon ind i // img // mappen og så referere til dette istedet for "panda4.png"
-===== 4. Upload Changes =====
-Nu hvor i har ændret jeres hjemmeside lokalt på jeres pc er det tid til at få jeres ændringer op på jeres website så alle kan se jeres lækre unikke hjemmeside!
-Til det skal vi igen have fat i terminalen/cmd og bruge git til at at få jeres ændringer "skubbet" op på jeres website.
-Åben først terminalen/cmd
-Naviger nu ind i den mappe i lavede i ** Setup Step 4. ** som gerne skulle hedde "Ruswebsite"
-Dette kan gøres med
-    cd ruswebsite
-hvis i fulgte anvisningerne fra ** Setup Step 4. **
-Skriv nu
-    git status
-I vil nu se noget der minder om dette
-{{ :how_to:screen_shot_2015-12-29_at_15.18.04.png?500 |}}
-De første filer som står med rød skrift er dem i har lavet ændringer i. I kan godkende at ændringer i en fil skal være med i "skubbet" til jeres hjemmeside ved at skrive // git add FILEPATH //. Hvis jeg fx. vil godkende at bootstrap.min.css skal slettes kan jeg skrive
-    git add css/bootstrap.min.css
-På samme måde skal nye filer som er tilføjet i mapperne, fx. et billede, også tilføjes til "skubbet".
-Dette gøres på samme måde, fx.
-    git add img/portrait/Testbillede.png
-Hvis i har mange filer som er ændret kan i med fordel bruge kommandoen
-    git add -A
-Dette vil tage alle jeres ændrede filer på en gang.
-Når i har godkendt alle de filer der skal skubbes op på jeres hjemmeside skal vi nu skrive en kort tekst om det "bidrag" eng. "commit" som i er ved at give til jeres hjemmeside. \\
-Dette gøres med
-    git commit -m "SOME MEANINGFULL TEKST"
-Hvor **SOME MEANINGFULL TEKST** selfølgelig skal erstattes med en beskrivelse af de ændringer som i har lavet til hjemmesiden, fx. "Nyt Cover" eller "Ændret Pakkeliste" \\
-Når I har lavet et "bidrag" vil alle jeres godkendte filer ligge pakket ind i dette bidrag. Nu skal i skubbe jeres bidrag ved at skrive
-    git push
-Vent nu et par minutter og alle jeres ændringer vil kunne ses online på jeres hjemmeside