En webdoc, er en digital form for dokumentar, der bruger internettets interaktive muligheder til at fortælle en historie. Den kombinerer tekst, video, lyd, billeder og interaktive elementer, hvilket giver brugeren en engagerende oplevelse, hvor de kan udforske indholdet i deres eget tempo.
Formålet med en webdoc er at tilbyde en dybere og mere interaktiv oplevelse end traditionelle dokumentarer. Ved at udnytte forskellige medier og interaktive elementer.
Hvad har jeg lavet webdocen om?
jeg har valgt at lave webdoc om 2022 åres spil Elden Ring og der jeg spiller meget spillet selv har jeg ikke brugt nogen artikler som fx Wikipedia til at skriv info om dem.
Min webdoc zip - https://drive.google.com/drive/folders/1SOS6sgNuP0zV665Jm2UAJG2FuoK6k2zO?usp=sharing
Reflektion
jeg synes at opgaven var meget sjovt og spænde der jeg lært at bruge de forskellegie elementer mere og jeg synes at koden til slideshown var spænde at lave med en ven.
Html code ----
<div id="box3">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin: 0}
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: goldenrod;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.numbertext {
color: goldenrod;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: goldenrod;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@media only screen and (max-width: 300px) {
.prev, .next, .text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 4</div>
<img src="elden-ring-launch-trailer-thumbnail.jpg" style="width:100%">
<div class="text"><p>Billede af Elden ring trailer thumbnail taget fra Youtube.com</p></div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 4</div>
<img src="349fa9e0-09f1-4cf0-9800-05a39e0f0a31.jpg" style="width:100%">
<div class="text"><p>Billede af Elden ring trailer Melina taget fra Youtube.com</p></div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 4</div>
<img src="445ff218-9d9b-4df9-bf1d-a873c27254ed.jpg" style="width:100%">
<div class="text"><p>Billede af Elden ring trailer scene taget fra Youtube.com</p></div>
</div>
<div class="mySlides fade">
<div class="numbertext">4 / 4</div>
<img src="elden-ring-radagon-of-the-golden-order-elden.jpg" style="width:100%">
<div class="text"><p>Billede af Elden ring Radagon taget fra GoodFon.com</p></div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<script>
let slideIndex = 0;
let slideInterval;
function showSlides(n) {
clearTimeout(slideInterval);
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
slideInterval = setTimeout(autoShowSlides, 5000);
}
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function autoShowSlides() {
slideIndex++;
if (slideIndex > document.getElementsByClassName("mySlides").length) {
slideIndex = 1;
}
showSlides(slideIndex);
}
slideIndex = 1;
showSlides(slideIndex);
slideInterval = setTimeout(autoShowSlides, 5000);
</script>
</div>
</div>
---------------
Css code --------------
#box3 {
width: 100%;
height: 650px;
z-index: 999;
justify-content: center;
align-items: center;
margin-top:100px ;
padding-top:70px;
scale: 100%;
background-color: black;
margin-top: auto;
}
.text {scale: 90%;}
----------------
man jeg havet svært ved at lave audio i webdocen og fik den ikke til at virke
Kilder -
https://www.goodfon.com/games/wallpaper-elden-ring-radagon-of-the-golden-order-elden.html
https://youtu.be/K_03kFqWfqs?si=W2YTaFtQO9RSsWir
https://youtu.be/E3Huy2cdih0?si=hgA9DwlMWDkf1MlL
https://youtu.be/qqiC88f9ogU?si=xB5U3h3ycVXqw6Wm
https://www.trustedreviews.com/reviews/elden-ring