Vježba 24: Responzivni web dizajn – okviri

PRIPREMA ZA VJEŽBU

1. Istražite što znači pojam programski okvir (software framework). Koje su ključne razlike između okvira i biblioteka (library)?

Programski okvir ili software framework je temelj za razvoj aplikacija.
Okvir (framework) pruža cjelovitu arhitekturu i organizaciju za razvoj aplikacija dok je biblioteka (library) skup funkcija, klasa i metoda koje se mogu koristiti u aplikaciji.

2. Što predstavlja okvir za RWD?

Okvir za responzivni web dizajn (RWD) omogućuje izradu web stranica koje se prilagođavaju različitim uređajima i veličinama zaslona. Primjer takvog okvira je W3.CSS, koji je jednostavan za korištenje i podržava responzivnost.

3. Koja su dvije osnovne vrste RWD okvira?

Tailwind CSS: Nudi prilagodljive komponente i fleksibilnost u stiliziranju. Nema unaprijed definirane teme.

Bootstrap: Ima predefinirane postavke izgleda i komponente, što ga čini brzim za razvoj.

5. Koje su dobre strane korištenja takvih okvira?

Dobre strane korištenja takvih okvira je jednostavnost i brzina izrade i održavanja web stranice te to da ne moramo voditi računa o rasponzivnosti web stranice jer okvir radi to za nas.

PRAKTIČNE VJEŽBE:

Proučite osnovno o W3.CSS-u, te prema odabranom predlošku sa stranice, napravite
jednu mrežnu stranicu po izboru (svaki učenik radi svoj rad). Prema potrebi koristite i
W3.CSS tutorial.

caffe.html

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS Template</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Inconsolata”>
<style>
body, html {
height: 100%;
font-family: “Inconsolata”, sans-serif;
}

.bgimg {
background-position: center;
background-size: cover;
background-image: url(“https://di-a.de/wp-content/uploads/2016/11/primo-espresso_01b.jpg”);
min-height: 75%;
}

.menu {
display: none;
}
</style>
</head>
<body>

<!– Links (sit on top) –>
<div class=”w3-top”>
<div class=”w3-row w3-padding w3-black”>
<div class=”w3-col s3″>
<a href=”#” class=”w3-button w3-block w3-black”>HOME</a>
</div>
<div class=”w3-col s3″>
<a href=”#about” class=”w3-button w3-block w3-black”>O NAMA</a>
</div>
<div class=”w3-col s3″>
<a href=”#menu” class=”w3-button w3-block w3-black”>MENI</a>
</div>
<div class=”w3-col s3″>
<a href=”#where” class=”w3-button w3-block w3-black”>LOKACIJA</a>
</div>
</div>
</div>

<!– Header with image –>
<header class=”bgimg w3-display-container w3-grayscale-min” id=”home”>
<div class=”w3-display-bottomleft w3-center w3-padding-large w3-hide-small”>
<span class=”w3-tag”>Otvoreni: 6:00 – 20:00 </span>
</div>
<div class=”w3-display-middle w3-center”>
<span class=”w3-tag” style=”font-size:90px” >The Breg</span>

</div>
<div class=”w3-display-bottomright w3-center w3-padding-large”>
<span class=”w3-tag”>Banfi 10</span>
</div>
</header>

<!– Add a background color and large text to the whole page –>
<div class=”w3-sand w3-grayscale w3-large”>

<!– About Container –>
<div class=”w3-container” id=”about”>
<div class=”w3-content” style=”max-width:700px”>
<h5 class=”w3-center w3-padding-64″><span class=”w3-tag w3-wide”>O NAMA</span></h5>
<p>Caffe bar The Breg osnovao je Mata Kovačević iz Banfija davne 1985. godine kad je shvatio lejpotu Banfija te ju žalio da više ljudi dođe u Banfi i vidi te prirodne ljepote. On se zaljupio u okus i arome kave tijekom svojeg putovanja diljem svieta. Danas The Breg svoju kavu dobiva direktno iz Brazila.</p>

<img src=”https://www.autogrill.it/wp-content/uploads/2021/03/Storie_di_caffe%CC%80_Desktop_pagina_dettaglio.jpg” style=”width:100%;max-width:1000px” class=”w3-margin-top”>
<p><strong>Otvoreni smo:</strong> svaki dan od 6 do 20 sati</p>
<p><strong>Adresa:</strong> Banfi 10</p>
</div>
</div>

<!– Menu Container –>
<div class=”w3-container” id=”menu”>
<div class=”w3-content” style=”max-width:700px”>

<div class=”w3-row w3-center “>
<a href=”javascript:void(0)” onclick=”openMenu(event, ‘Eat’);” id=”myLink”>
<div class=”w3-col s6 tablink”>Hrana</div>
</a>
</div>

<div id=”Eat” class=”w3-container menu w3-padding-48 w3-card”>
<h5>Palačinke</h5>
<p class=”w3-text-grey”>3€ </p><br>

<h5>Mafin</h5>
<p class=”w3-text-grey”>0.80€ </p><br>

<h5>Omlet</h5>
<p class=”w3-text-grey”>4.50€</p><br>

<h5>Klipići</h5>
<p class=”w3-text-grey”>3.50€</p><br>

<h5>Kava s mlijekom</h5>
<p class=”w3-text-grey”>1.50€</p><br>

</div>

<!– Contact/Area Container –>
<div class=”w3-container” id=”where” style=”padding-bottom:32px;”>
<div class=”w3-content” style=”max-width:700px”>
<h5 class=”w3-center w3-padding-48″><span class=”w3-tag w3-wide”>Lokacija</span></h5>
<p>Pronađite nas usred predivnog pejzaža Banfija</p>
<img src=”https://media.cntraveler.com/photos/53daec756dec627b14a0be40/master/pass/castello-banfi-ii-borgo-tuscany-italy-106483-1.jpg” class=”w3-image” style=”width:100%”>
<p><span class=”w3-tag”>OBAVJEST</span> The Breg obilježava dana Međimurske županije s 10% popusta ako naručite hranu uz svoje piće</p>
<p><strong>Rezerviraj</strong> stol za posebnu priliku</p>
<form action=”/action_page.php” target=”_blank”>
<p><input class=”w3-input w3-padding-16 w3-border” type=”text” placeholder=”Ime i prezime” required name=”Name”></p>
<p><input class=”w3-input w3-padding-16 w3-border” type=”number” placeholder=”Broj ljudi” required name=”People”></p>
<p><input class=”w3-input w3-padding-16 w3-border” type=”datetime-local” placeholder=”Date and time” required name=”date” value=”2020-11-16T20:00″></p>
<p><input class=”w3-input w3-padding-16 w3-border” type=”text” placeholder=”Dodatne informacije” required name=”Message”></p>
<p><button class=”w3-button w3-black” type=”submit”>POŠALJI</button></p>
</form>
</div>
</div>

<!– End page content –>
</div>

<!– Footer –>
<footer class=”w3-center w3-light-grey w3-padding-48 w3-large”>
<p>Powered by <a href=”https://www.w3schools.com/w3css/default.asp” title=”W3.CSS” target=”_blank” class=”w3-hover-text-green”>w3.css</a></p>
</footer>

</body>
</html>