37 lines
2.7 KiB
HTML
37 lines
2.7 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
body{margin:0;background:#fff;font-family:Segoe UI,Arial,sans-serif;color:#1f2933}
|
|
h1{font-size:20px;margin:14px 20px 0}
|
|
svg{display:block;margin:0 auto}
|
|
text{font-family:Segoe UI,Arial,sans-serif}
|
|
</style>
|
|
<h1>Lecture 1: frontend, backend and the request-response cycle</h1>
|
|
<svg viewBox="0 0 860 380" width="860" height="380" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<marker id="a" markerWidth="10" markerHeight="10" refX="8" refY="5" orient="auto"><path d="M0,0 L10,5 L0,10 z" fill="#1f2933"/></marker>
|
|
</defs>
|
|
<rect x="20" y="40" width="220" height="180" rx="10" fill="#e8f1fb" stroke="#2b6cb0" stroke-width="2"/>
|
|
<text x="130" y="72" text-anchor="middle" font-size="18" font-weight="600">Client (frontend)</text>
|
|
<text x="130" y="100" text-anchor="middle" font-size="14">Browser: HTML, CSS, JS</text>
|
|
<text x="130" y="140" text-anchor="middle" font-size="13" fill="#555">Restaurant: dining area</text>
|
|
<rect x="320" y="40" width="220" height="180" rx="10" fill="#e9f7ee" stroke="#2f855a" stroke-width="2"/>
|
|
<text x="430" y="72" text-anchor="middle" font-size="18" font-weight="600">Server (backend)</text>
|
|
<text x="430" y="100" text-anchor="middle" font-size="14">Python + Flask</text>
|
|
<text x="430" y="140" text-anchor="middle" font-size="13" fill="#555">Restaurant: kitchen</text>
|
|
<rect x="620" y="40" width="220" height="180" rx="10" fill="#fdf3e3" stroke="#b7791f" stroke-width="2"/>
|
|
<text x="730" y="72" text-anchor="middle" font-size="18" font-weight="600">Database</text>
|
|
<text x="730" y="100" text-anchor="middle" font-size="14">Stores the data</text>
|
|
<text x="730" y="140" text-anchor="middle" font-size="13" fill="#555">Restaurant: pantry</text>
|
|
<line x1="240" y1="90" x2="318" y2="90" stroke="#1f2933" stroke-width="2" marker-end="url(#a)"/>
|
|
<text x="280" y="82" text-anchor="middle" font-size="13">1 request</text>
|
|
<line x1="540" y1="90" x2="618" y2="90" stroke="#1f2933" stroke-width="2" marker-end="url(#a)"/>
|
|
<text x="580" y="82" text-anchor="middle" font-size="13">2 query</text>
|
|
<line x1="618" y1="170" x2="542" y2="170" stroke="#1f2933" stroke-width="2" marker-end="url(#a)"/>
|
|
<text x="580" y="190" text-anchor="middle" font-size="13">3 data</text>
|
|
<line x1="318" y1="170" x2="242" y2="170" stroke="#1f2933" stroke-width="2" marker-end="url(#a)"/>
|
|
<text x="280" y="190" text-anchor="middle" font-size="13">4 response</text>
|
|
<text x="430" y="280" text-anchor="middle" font-size="16">Request-response cycle: the client asks, the server prepares, the database supplies.</text>
|
|
<text x="430" y="312" text-anchor="middle" font-size="14" fill="#555">Flask is the framework that decides how the server part is structured.</text>
|
|
</svg>
|