From 87cbc6e017f38a5b0f53dcfca1ace3b93eadd5bb Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 3 Jun 2026 20:10:00 +0000 Subject: [PATCH 1/3] Rebuild Images & Layers slide as animated SVG with Reveal.js fragments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replaces the static code-block + PNG image layout with a fully HTML/SVG slide that shows the layer/Dockerfile relationship step by step. Each click reveals one arrow connecting a Dockerfile instruction to the image layer it creates (FROM→base, COPY, RUN, CMD). The arrows cross in the middle because the layer stack is ordered bottom-to-top while the Dockerfile reads top-to-bottom, matching the original PowerPoint animation. https://claude.ai/code/session_01HutTxch2wwX8cSZB6kd6bT --- docker-training/sections/docker-images.html | 170 ++++++++++++++++++-- 1 file changed, 153 insertions(+), 17 deletions(-) diff --git a/docker-training/sections/docker-images.html b/docker-training/sections/docker-images.html index 075c9d1..58b7baa 100644 --- a/docker-training/sections/docker-images.html +++ b/docker-training/sections/docker-images.html @@ -1,23 +1,159 @@

Docker Images

Images & Layers

-
-
- 

-FROM ubuntu:24.04
-COPY . /app
-RUN make /app
-CMD python /app/app.py
-
-
-
- Docker Images and Layers -
-
+ + + + + + + + + + + + + + + + + + Thin R/W layer + + + + Container layer + + + + + + + + + + + + + + + + + + + 91e54dfb1179 + 0 B + + + + d74508fb6632 + 1.895 KB + + + + c22013c84729 + 194.5 KB + + + + d3a1f33e8a5a + 188.1 MB + + + ubuntu:15.04 + + + + + + + + + + + Image layers (R/O) + + + Container + (based on ubuntu:15.04 image) + + + + + Dockerfile: + + + + + + FROM ubuntu:15.04 + + + COPY . /app + + + RUN make /app + + + CMD python /app/app.py + + + + + + + + + + +

Container Layer

From 230f55e31fc8f7b2de25f66841101a5ac1d437ed Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 3 Jun 2026 20:21:23 +0000 Subject: [PATCH 2/3] Compact Dockerfile lines and reshape box as document icon Reduces line spacing from ~58 px to 40 px so the four instructions sit closer together. Replaces the multi-wave bottom with a single gentle arc (page-curl silhouette) and adds a dog-ear fold at the top-right corner, giving the box the recognisable shape of a file/document. Arrow y-coords updated to match the new line centers. https://claude.ai/code/session_01HutTxch2wwX8cSZB6kd6bT --- docker-training/sections/docker-images.html | 50 +++++++++++---------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/docker-training/sections/docker-images.html b/docker-training/sections/docker-images.html index 58b7baa..f9a6cc2 100644 --- a/docker-training/sections/docker-images.html +++ b/docker-training/sections/docker-images.html @@ -106,52 +106,56 @@

Images & Layers

font-family="Source Sans Pro,Helvetica,sans-serif" font-size="17" font-weight="700" fill="#1a202c">Dockerfile: - - + + + + + - - + FROM ubuntu:15.04 - - + COPY . /app - - + RUN make /app - - + CMD python /app/app.py
From 4cc7ddc88ce48c03aeeb97df2dd06badd24b5b23 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 3 Jun 2026 20:22:42 +0000 Subject: [PATCH 3/3] Add role=img and title/desc for accessible SVG Copilot review: aria-label alone is inconsistently announced by screen readers on SVGs. role="img" + /<desc> with aria-labelledby is the robust pattern and prevents assistive tech from reading every internal <text> node as separate content. https://claude.ai/code/session_01HutTxch2wwX8cSZB6kd6bT --- docker-training/sections/docker-images.html | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/docker-training/sections/docker-images.html b/docker-training/sections/docker-images.html index f9a6cc2..d3a8aba 100644 --- a/docker-training/sections/docker-images.html +++ b/docker-training/sections/docker-images.html @@ -3,7 +3,10 @@ <h2>Images & Layers</h2> <svg viewBox="0 0 900 420" style="width:100%;height:auto;display:block;" xmlns="http://www.w3.org/2000/svg" - aria-label="Docker image layers diagram with Dockerfile"> + role="img" + aria-labelledby="svg-layers-title svg-layers-desc"> + <title id="svg-layers-title">Docker image layers diagram + A Dockerfile with four instructions (FROM, COPY, RUN, CMD) on the right, each connected by an arrow to the read-only image layer it creates on the left.