Scribd Logo
Upload

Welcome to Scribd!

  • Prilagodivi Web Dizajn

    Uploaded by

    Jasim Kurtic
    23 views5 pages

    Original Title

    Prilagodivi web dizajn

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    23 views5 pages

    Prilagodivi Web Dizajn

    Uploaded by

    Jasim Kurtic

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    Prilagodivi web dizajn

    Korišćenje mobilnih uređaja u svijetu je sve veće i veće iz godine u godinu ali nažalost
    većina web aplikacija i sajtova nisu optimizovani za ove uređaje. Mobilni uređaji imaju različite
    rezolucije, veličine ekrana kao i gustinu piksela. Danas web koriste tableti, telefoni, fableti,
    konzole pa i sami televizori. Svaki od ovih uređaja je karakterističan za sebe. Pravljenje posebne
    aplikacije za ove urađaje je jako dug proces i često ne isplativ pa je prilagodljiv web dizajn
    postao jako popularno rješenje za ovaj problem.

    Postoje više načina za samu implementaciju prilagodljivog web dizajna. U početku za


    prilagdoljiv web dizajn korišćen je samo JavaScript. JavaScript je korišćen da mijenja CSS
    atribute pri promjeni veličine prozora i pri samom paljenju web aplikacije. Dolaskom CSS-a 3
    pojavilo se media pravilo. U sledećem primjeru boja pozadine ekrana će biti zelena/žuta ukoliko
    je veća od 400/800 piksela a svijetlo plava ukoliko je manja ili jednaka 400 piksela.

    Potpuno je nebitno da li je stil definisan unutar html dokumenta ili u odvojenom css fajlu!

    Razmotrite i pokrenite sledeci kod:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
    background-color: lightblue;
    }
    @media screen and (min-width: 400px) {
    body {
    background-color: green;
    }
    }
    @media screen and (min-width: 800px) {
    body {
    background-color: yellow;
    }
    }
    </style>
    </head>
    <body>
    <p>Smanjujte i povećavajte prozor. Kada širina dokumenta bude veća od 400/800 piksela pozadina će
    biti zelena/zuta dok kada bude 400px i manja biće svetlo plava </p>
    </body>
    </html>

    Pokrenite kod u chrom-u I postepeno smanjujete(ili povecavate) velicinu prozora I pratite kako
    se mijenja boja pozadine.
    Otvorite developer tools od chrome-a (pritisnite F12) zatim pritisnite ikonu mobitela kao na slici

    Odaberite neki model mobitela (npr Galaxy S5) i vidite boju pozadine u portret I landscape
    modu.
    Je li boja ista i zasto?

    Naravno mi pomocu css pravila možemo raditi/mijenjati mnoge druge stvari pri razlicitim
    dimenzijama ekrana.Npr mozemo sakriti neke html elemente ako je ekran manji ili zamijeniti I
    napraviti potpuno novi element za manji/veći ekran.Možemo potpuno promijeniti dizajn
    stranice za različite uredjaje.

    Analizirajte sledeci kod I pokrenite u web pregledniku:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    *{
    box-sizing: border-box;
    }

    .row::after {
    content: "";
    clear: both;
    display: block;
    }

    [class*="col-"] {
    float: left;
    padding: 15px;
    }

    html {
    font-family: "Lucida Sans", sans-serif;
    }

    .header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
    }

    .menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

    .menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;

    .menu li:hover {
    background-color: #0099cc;
    }

    .aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    }

    .footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
    }

    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    @media only screen and (max-width: 768px) {


    /* For mobile phones: */
    [class*="col-"] {
    width: 100%;
    }
    }
    </style>
    </head>
    <body>

    <div class="header">
    <h1>Chania</h1>
    </div>

    <div class="row">
    <div class="col-3 menu">
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Island</li>
    <li>The Food</li>
    </ul>
    </div>

    <div class="col-6">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old
    town and the modern city.</p>
    </div>

    <div class="col-3 right">


    <div class="aside">
    <h2>What?</h2>
    <p>Chania is a city on the island of Crete.</p>
    <h2>Where?</h2>
    <p>Crete is a Greek island in the Mediterranean Sea.</p>
    <h2>How?</h2>
    <p>You can reach Chania airport from all over Europe.</p>
    </div>
    </div>
    </div>

    <div class="footer">
    <p>Resize the browser window to see how the content respond to the resizing.</p>
    </div>

    </body>
    </html>

    Domaća zadaća:

    Napraviti web stranicu koja tabelarno prikazuje osnovne podatke o ucenicima nekog razreda.
    Ako korisnik pokrene stranicu na mobitelu (landscape orjentacija) tabela vise nije toliko
    detaljna (ima manje kolona) a ukoliko korisnik okrene mobitel uspravno (portret orjentacija)
    tada tabela prikazuje minimum podataka o uceniku.

    Zadacu uraditi do 15. novembra (4T2) i 17. Nombra (4T1) !

    You might also like