Thursday, January 9th

Class hours: 10:05 – 2:45
Mr. Bohmann | wbohmann@ewsd.org

10:05 Today’s Notes & Attendance

Happy Thursday

Not much in the way of announcements, Except Run Hide Fight and Penny Wars ends on Friday

10:10 Portfolio – JS Image Slider

One of the more challenging areas of your portfolio is determining how you want to display your best works. We did several image galleries in class including yesterday (see code from yesterday). You also can look at w3Schools as there are many lightbox options and sliders that take advantage of some JS in their How To Section.

I built a few galleries last night – as I was thinking about it when I drove home after school yesterday

This one has a hover and grayscale effect Have a look.
This one is a classic click on and click off light box that can be scaled Have a Look
This one is a proof of concept – create a grid with a hover effect to open a larger version of the image Have a Look
Here’s a half overlay – that might be nice too Have a Look

Here are some other items we built:

Gallery with Flexbox
Image Hover with Overlay
Pure CSS Lightbox – see yesterday’s code – it is also in the form of a codepen above

and if you want more options – here is a nice resource: 85 CSS Galleries

This morning – let’s do another one. This one is a full page gallery (or can be a full page) and the background image will change when we click on the thumbnail or if we mouseover. We’ll do this on is VS Code.

Create a Folder on your Desktop – JS_Image_Slider
Create a JS folder, CSS Folder, Images Folder
Create a style.css, create a script.js and an index.html file and place in the right locations
Link up your stylesheet / add the JS to the bottom or head tag of your document

Here is our code for the HTML is case you need it

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Slider</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <header>
        <h1>CSS Image Slider</h1>
    </header>

    <section>
        <img src="images/bokeh.jpg" alt="" id="slider">

        <div class="thumbnail-gallery">
            <img onmouseover="imgSlider('images/bokeh.jpg')"  src="images/bokeh.jpg" alt="flower" class="thumbsize">
            <img onmouseover="imgSlider('images/campstove.jpg')"  src="images/campstove.jpg" alt="Stove" class="thumbsize">
            <img onmouseover="imgSlider('images/carMeet06.jpg')" src="images/carMeet06.jpg" alt="car" class="thumbsize">
            <img onmouseover="imgSlider('images/Flower05.jpg')" src="images/Flower05.jpg" alt="purle flower" class="thumbsize">
        </div>
        
    </section>

<!-- adding my js before the closing body tag - or you can add to the head tag -->
    <script src="js/script.js"></script>

</body>

</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

body{
    background-color: black;
    color:white;
}

header{
    text-align: center;
    margin-bottom:1em;
}

section {
    position: relative;
    width: 80%;
    height: 90vh;
    display: flex;
    justify-self: center;
    align-items: center;
    margin: auto;
}

.thumbsize {
    max-width: 20%;
    height: auto;
    margin: 10px;
    border: 1px solid white;
    cursor: pointer;
    border-radius: 10px;
}
.thumbsize:hover{
    box-shadow: 2px 2px black;
    transform: scale(1.05);
}

section #slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-gallery {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    justify-content: center;
    flex-direction: row;
   
}


function imgSlider(bigimage){
    document.getElementById("slider").src = bigimage;
   console.log("my image changed to " + bigimage);
 

}

// What this script says is pass along inside the parameter the new image when clicked or moused over

10:50 Break

11:00 Making Website Accessible – Wave Tool

WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.

Can you think of some disabilities someone might have when accessing the web?

ScreenReader Demo

WCAG publishes and regularly updates a set of guidelines. Link to guidelines.

WAVE (web accessibility evaluation tool) provides a nice browser extension to evaluate web accessibility issues directly in your browser. Go ahead and install.

ARIA – What the heck is it?

“ARIA” stands for “Accessible Rich Internet Applications” and is a set of attributes added to HTML code to make web content more accessible to users with disabilities, particularly those using assistive technologies like screen readers, by providing additional information about the purpose and state of interactive elements on a web page.

Important principle:

Always prioritize using semantic HTML elements (like <button>, <nav>) over relying heavily on ARIA, as it is considered best practice to use native accessibility features whenever possible.

Activity: Evaluate Local Sites:

Questions to consider:

What types of errors are you observing most often?

How can these errors be fixed?

Run the site through website.grader and get a big picture view

11:50 – 12:25 – Portfolio Worksession

Use this window to keep working on your portfolio.

At the very least – get each of your pages made and your folders set up. Pages should link together through navigation. We’ll look at some navigation menu coding on Friday.