Dizajn Interaktivnih Medija 1
Total Page:16
File Type:pdf, Size:1020Kb
Dizajn interaktivnih medija 1 1 Poglavlja 4 5 5. poglavlje U petom poglavlju je za body text odarbano pismo Roboto slab koje ima pretežno mehaničku konstrukciju, ali u isto vrijeme nije pretje- rano geometrijski oblikovano što ga čini ugodnim za dugo čitanje. Veličina pisma je 14 px, a prored iznosi 1.6em. Prored je malo veći nego uobičajeno iz razloga što pismo ima viši x-height stoga traži više prostora među redovima. Boja slova nije čista crna nego malo svijetlija, tamno siva (#111111). Boja teksta je odabrana prema poza- dinskoj boji koja također nije nije čisto bijela već ima primjese plave boje (#f6fbff). Sve te boje su uvjetovane pozadinskom slikoma koja je većinom u tamnomodrim i plavim tonovima te kako bi se izbijegli veliki kontrasti između modre, bijele i ponovno crne, boje su lagano prigušene i više harmonične. Što na kraju doprinosi što ugodnojem čitanju ovoga teksta. Kako je peto poglavlje vrlo duga potrebno je unijeti određenu dinamiku u tekst da bi bilo zanimljivije za čitanje. Tako su dva dijela teksta na određen način izadvojena. Prvi izdvojeni dio obuhvača “tekst”, u biti govor iz knjige “The Hitchhiker’s Guide to the Galaxy”. Kako je to električna knjiga s time uvelike drugačija od naše uobi- čajene percepcije knjige, ideja je bila spoj jednog i drugog. Tako je taj dio teksta u pismu Josefin Slab iako je slab pismo jednako kao Roboto slab postoje znatne razlike među njima. Josefin Slab je daleko manje ugodnija za dugo čitanje zbog svog vrlo niskog x-he- ighta i velike razlike između visine verzala i kurenata. Zato što ima mehaničan oblik i vrlo je svijetle boje teksta, koja je dodatno nagla- šena s proredom većim nego što je potrebno, podsijeća na distor- zirani glas tehničke sprave. Veličina pisma je 16 px, a prored je 1.6 morem (vodom), a odabrano pismo je Nunito. Nunito je sans-serifno em. Drugi naglašeni dio je fusnota na dnu poglavlja koja ustvari nije pismo dosta geometrijsko i u rezu semi-bolda da bi se postigao efekt samo fusnota koja se referira na određeni pojam u teksu već je to i snage i prisutnosti glasa u našoj glavi koji ne možemo kontrolirati. završni dio poglavlja. Priča u knjizi kaže da Arthur stavlja ribicu u Naslov i podnaslov poglavlja je u pismu Bowlby One SC u verzalima uho koja mu objašnjava stvari i bića oko njega. Ideja je bila bojom i plave boje. Bowlby One SC je display pismo debelog reza te ima zao- pismom dočarat zvuk glasa ribice u uhu koji je u isto vrijeme pro- bljene rubove što mu daje dozu neozbiljnosti i zbog toga je prikladan doran i ugodan. Za fusnote je odabrana modra boja koja predstavlja ovakvoj vrsti književnosti koja ima elemente humora. Veličina naslova dubinu, ugodnost, znanje te je kao plava boja direktna poveznica s poglavlja je 5 em, a naslova djela 2 em. 6 7 HTML /DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti- onal.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> <title>Ch 5 – tHGttG – DNA</title> <link href=”css/css.css” rel=”stylesheet” type=”text/css” /> <link href=”https://fonts.googleapis.com/css?family=Abel|Bowlby+One+SC|Can- dal|Josefin+Slab|Lekton|Lilita+One|Oswald:300,400,500|Roboto+Slab|Signika+Nega- tive:400,600&display=swap” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Oswald:200,300,400&display=swap” rel=”stylesheet”> <link href=”https://fonts.googleapis.com/css?family=Baloo+Bhai|Mi- tr:200,300,400,500,600,700&display=swap” rel=”stylesheet” <link href=”https://fonts.googleapis.com/css?family=Comfor- taa:300,400,500,600,700|Dosis:200,300,400,500,600,700,800|Fredoka+One|Nuni- to:200,300,400,600,700,800,900|Rubik:300,400,500,700,900|Varela+Round&display=swap” rel=”stylesheet”> </head> <body> <div class=”omot”> <div class=”izbornik”> <ul> <li><a href=”http://www.umas.unist.hr/~dim/DIM1/ poglavlja/”>0</a> <li><a href=”http://www.umas.unist.hr/~lperajic/ DIM1/1.html”>1</a></li> <li><a href=”http://umas.unist.hr/~lpolic/DiM/ ZAD1/poglavlje2/chapter%2002.html”>2</a></li> <li><a href=”http://umas.unist.hr/~lpolic/DiM/ 8 9 ZAD1/poglavlje3/chapter%2003.html”>3</a></li> Vogons cut down and burned the crab meat with; elegant gazelle-like creatures with <li><a href=”http://www.umas.unist.hr/~tostojic/ silken coats and dewy eyes which the Vogons would catch and sit on. They were no use DIM1/Poglavlja/4/4.html”>4</a></li> as transport because their backs would snap instantly, but the Vogons sat on them <li><a href=”http://www.umas.unist.hr/~sbilanov/ anyway.</p> DIM1/5.html”>5</a></li> <p>Thus the planet Vogsphere whiled away the unhappy millennia until the <li><a href=”http://www.umas.unist.hr/~apaskval/ Vogons suddenly discovered the principles of interstellar travel. Within a few short HTML/6.html”>6</a></li> Vog years every last Vogon had migrated to the Megabrantis cluster, the political hub <li><a href=”http://umas.unist.hr/~esodan/ of the Galaxy and now formed the immensely powerful backbone of the Galactic Civil DIM1/7.html”>7</a></li> Service. They have attempted to acquire learning, they have attempted to acquire ... style and social grace, but in most respects the modern Vogon is little different </ul> from his primitive forebears.</p> </div> ... wet slap <div class=”sadrzaj”> about anything else. And they’ll always help hitch hikers aboard, partly because they like the company, but <h1>The Hitchhiker’s Guide to the Galaxy</h1> mostly because it annoys the Vogons. Which is exactly the sort of thing <h2>Chapter 5</h2> <p>Prostetnic Vogon Jeltz was not a pleasant sight, even for other Vogons. His highly domed nose ros high above a small piggy forehead. His dark green rubbery skin was thick enough for him to play the game of Vogon Civil Service politics, and play it well, and waterproof enough for him to survive indefinitely at sea depths of up to a thousand feet with no ill effects.</p> <p>Not that he ever went swimming of course. His busy schedule would not allow it. He was the way he was because billions of years ago when the Vogons had first crawled out of the sluggish primeval seas of Vogsphere, and had lain panting and heaving on the planet’s virgin shores... when the first rays of the bright young Vogsol sun had shone across them that morning, it was as if the forces of evolution ad simply given up on them there and then, had turned aside in disgust and written them off as an ugly and unfortunate mistake. They never evolved again; they should never have survived.</p> <p>The fact that they did is some kind of tribute to the thick-willed slug-brained stubbornness of these creatures. Evolution? they said to themselves, Who needs it?, and what nature refused to do for them they simply did without until such time as they were able to rectify the grosser anatomical inconveniences with surgery.</p> <p>Meanwhile, the natural forces on the planet Vogsphere had been working overtime to make up for their earlier blunder. They brought forth scintillating jewelled scuttling crabs, which the Vogons ate smashing their shells with iron mallets; tall aspiring trees with breathtaking slenderness and colour which the 10 11 float: left; CSS width: 616px; background-color: #f6fbff; } ul{ font-weight: regular; margin: 0em; *{ padding:0em; margin:0; list-style: none; padding:0;} float: center; body{ width: 100%; } background-image: url("../image/uni.jpg"); li{ background-repeat: no-repeat; width:5.26%; float: left; background-size: cover; text-align: center; background-attachment: fixed; margin-right: 0.1em; } text-align: center; .izbornik, .sadrzaj{ color: #111; padding: 0.80em; text-rendering: optimizeLegibility !important; } font-family: 'Roboto Slab', serif; font-size: 14px; a, a:link, a:visited{ line-height: 1.6em; color: #111; border-style: hidden; text-decoration: none; } padding: 10px 10px; .omot{ } text-align: left; a:hover, a:active{ width: 640px; color: #6666aa; margin: 0 auto; text-decoration: none; } } h1{ .sadrzaj{ margin: auto ; float: left; margin-top: 2em; width: 616px; font-family: 'Bowlby One SC', cursive; background-color: #f6fbff; font-size: 2em; } line-height: 1.5em; color: #206677; .izbornik{ text-align: center; 12 13 span.book{ } font-family: 'Josefin Slab', serif; h2{ font-size: 16px; margin: 1.5em; color: armenian; font-family: 'Bowlby One SC', cursive; } font-size: 5em; line-height: 1.5em; div.book { color: #206677; margin-bottom: 3em; text-align: center; margin-left: 2em; float:center; margin-right: 4em; } margin-top: 3em; width: 90%; h2{ box-sizing: border-box; padding: 0.16em; } } div.footnotes { p { margin-bottom: 3em; margin-bottom: 1em; margin-left: 4em; margin-left: 2em; margin-right: 4em; margin-right: 1em; margin-top: 3em; margin-top: 1em; width: 80%; width: 90%; font-family:'Nunito', sans-se- background-color: #f6fbff; rif; font-weight: 600; } font-size: 15px; color: #6666aa; span.ford{ font-family:'Roboto Slab', serif; } font-size: 14px; div.stanka{ } margin-bottom: 1em; margin-left: 0em; span.arthur{ margin-right: 1em; font-family:'Roboto Slab', serif; margin-top: 3em; font-size: 14px; width: 90%; } } span.captain{ @media only screen and (max-width: 663px) { } .omot { 14 15 width:80%; .izbornik{ margin: 0 10%; width:100%; } } .sadrzaj{ width:100%; p { } margin: 1em; width: 90%; .izbornik{ } width: 100%; } ul{ .footnotes{ width: 100%; width: 50%; padding:0.80em; } margin:0em; text-align: center; ul{ } width: 100%; padding: 0.80em; li{width: 10%;} } h2{ li{ width: 100%; width: 5.26%; font-size: 2.5em; } margin:0em; } h2 { margin: 0.3em; .sadržaj { font-size: 3.5em; width: 100%; } } h1{ .book{ margin: auto; width:50%; font-size: 1.3em; margin: 0em; text-align: -webkit-center; } float: center; width: 50%;} .footnotes { } margin-bottom: 3em; @media only screen and (max-width: 380px){ margin-left: 2em; margin-right: 4em; .omot{ margin-top: 3em; width:80%; width: 80%; margin: 0 10%; } } } 16 17 18 19 28.poglavlje Dvadesetosmo poglavlje je drugacije oblikovano od petog poglavlja zbog toga što su u dvadesetosmom i davdesetdevetom poglavlju uglavnom dijalozi.