Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling.

Transkript

1 Grafisk w o rk f l ow jemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. Deres vision er at skabe enkle og inspirerende linjer i deres produkter. jemmesiden skal afspejle disse visioner. Den er enkel, men samtidig spændende og dynamisk. Jeg bruger rå materialer, et spelt gridsystem og bokse der flyder rundt på siden, for at bryde de rene linjer. Deres kundekreds er personer som vigtiggør og erkender ansvaret for optal udnyttelse af vedvarende energikilder, levevilkår og økonomisk rentabilitet, hvilket er med til at sikre et sundt og eksisterende miljø nu og i fremtiden. De ligger i alderen 0-0 år og ligger økonomisk i middelklassen. Den sekundære målgruppe ligger i overklassen. jemmesiden er testet og virker i følgende browsere: safari firefox chrome Explorer ele processen har jeg selv stået for.

2 Layout o g d e s i gn Jeg har søgt inspiration på nettet og fundet baggrundsbilleder via google. Jeg har licens til alle billeder. Disse billeder er med til at give kunden en oplevelse, så de øjeblikkeligt kan afkode virksomhedens materialebrug og kombinationen af tegnestue, tømrer og beton arbejde. overskrift viser hvor du er på siden. Brugervenligheden er spel og kunden kan nemt navigere rundt og se hvilken side de er landet på via h overskrifterne. Flydende design og variable bokse der tilpasser sig skærmstørrelser.

3 Story board ind e x o g tømr er /sn e d k e r 9 0. Linker til pages/tomrer.html. Linker til pages/projekter.html. Linker til pages/viden.html. Linker til pages/om_os.html. Linker til pages/kontakt.html. Linker til pages/tomrer.html. Linker til pages/projekter.html. Linker til pages/viden.html. Linker til pages/om_os.html. Linker til pages/kontakt.html Grafik - g mappe:. g/ages/logo_m.png. g/house.jpg 9. g/saw_icon_viden.jpg 0. g/house.jpg Grafik - g mappe:.../g/ages/logo_m.png.../g/viden_om.jpg 9.../g/house_nat.jpg. Logo. Baggrundsslider g/concret.jpg g/wood.jpg g/wood_.jpg g/concret.jpg g/saw.jpg. Logo. Baggrundsslider g/concret.jpg g/wood.jpg g/wood_.jpg g/concret.jpg g/saw.jpg 9

4 Story board p ro j e k ter og v i den 9. Linker til pages/tomrer.html. Linker til pages/projekter.html. Linker til pages/viden.html. Linker til pages/om_os.html. Linker til pages/kontakt.html 0 Grafik - g mappe:.../g/ages/logo_m.png.../g/house.jpg 9.../g/house.jpg 0.../g/tegnestuen_lampe.jpg.../g/TulipanVej.jpg.../g/elmegade.jpg.../g/saw_icon_viden.jpg. Logo. Baggrundsslider er med de samme billeder på hele siden 9. Linker til pages/tomrer.html. Linker til pages/projekter.html. Linker til pages/viden.html. Linker til pages/om_os.html. Linker til pages/kontakt.html Grafik - g mappe:.../g/ages/logo_m.png.../g/bullseye.jpg 9.../g/saw_icon_viden.jpg 0.../g/hammer.jpg.../g/house.jpg 0. Logo. Baggrundsslider er med de samme billeder på hele siden

5 Story board o m o s o g konta kt. Linker til pages/tomrer.html. Linker til pages/projekter.html. Linker til pages/viden.html. Linker til pages/om_os.html. Linker til pages/kontakt.html. Linker til pages/tomrer.html. Linker til pages/projekter.html. Linker til pages/viden.html. Linker til pages/om_os.html. Linker til pages/kontakt.html Grafik - g mappe:. g/ages/logo_m.png.../g/berton.jpg 9.../g/mads.jpg 0.../g/rosalie.jpg Grafik - g mappe:. g/ages/logo_m.png. m!d.9099!d.!d.!m! i0!i!f.!m!m!s0xbb0ca%a 0xce0cdbd!sTorvegade+!e0!m!sda!sdk! v9 width= 00 height= 00 frameborder= 0 style= border:0. Logo. Baggrundsslider er med de samme billeder på hele siden 9 0. Logo. Baggrundsslider er med de samme billeder på hele siden

6 Skelet Index og tømrer/snedker index.html Menu blok:00 X 0px logo: X 0px tomrer.html Menu blok:00 X 0px logo: X 0px header:00% x 0px header:00% x 0px rapper:000 x auto h rapper:000 x auto h footer:00% x 0px footer:00% x 0px

7 Skelet projekter og viden projekter.html Menu blok:00 X 0px logo: X 0px viden.html Menu blok:00 X 0px logo: X 0px header:00% x 0px header:00% x 0px rapper:000 x auto h rapper:000 x auto h 9,% x auto h 9,% x auto h footer:00% x 0px footer:00% x 0px

8 Skelet om os og kontakt om os.html Menu blok:00 X 0px logo: X 0px kontakt.html Menu blok:00 X 0px logo: X 0px header:00% x 0px header:00% x 0px rapper:000 x auto h rapper:000 x auto h 9,% x auto h 0% x 00px footer:00% x 0px footer:00% x 0px

9 Flowchart struktur index.html tomrer.html projekter.html om_os.html viden.html kontakt.html google kort formular.html

10 Udvalgte koder responsiv web TML css JAVascript er ses et udsnit af de koder jeg har kodet om, så siden tilpasser sig mobilen. h { font-size:px; font-family: Chivo, sans-serif; margin-top: 0px; color:#fff; text-align:center; letter-spacing:px; text-shadow: px px px #; filter: dropshadow(color=#, offx=, offy=); text-transform:uppercase; z-index:-; nav li.w0 { display:table; nav li.show { display:none; width:00%; nav ul.collapsed li { display:none; ar så vidt mulig brugt TML for at minere loading tiden. <header> <nav><!--menu--> <ul class= collapsed > <li class= w0 show ><a href= # >Se menu</a></li> <li class= w0 hide ><a href= # >Luk menu</a></li> <li><a href= index.html >tegnestuen</a></li> <li><a href= pages/tomrer.html >tømrer/snedker</a></li> <li><a href= pages/projekter.html >projekter</a></li> <li class= logo ><a href= index.html ><g src= g/ages/ LOGO_m.png ></a></li> <li><a href= pages/viden.html >viden</a></li> <li><a href= pages/om_os.html >om os</a></li> <li><a href= pages/kontakt.html >kontakt</a></li> </ul> </nav><!--end menu--> </header> <footer><p>torvegade, SAL TV 00 ESBJERG DANMARK ARKITEKT BYGNINGSKONSTRUKTØR ÅNDVÆRK</p></footer> ar stylet med CSS f.eks her i h overskrift, hvor jeg har drop shadow og tilpasset dem til de forskellige browsere h { font-size:0px; font-family: Chivo, sans-serif; margin-top: 0px; color:#fff; text-align:center; letter-spacing:px; text-shadow: px px 0px #; filter: dropshadow(color=#, offx=, offy=); text-transform:uppercase; ar brugt javascript til den ene menu og til min baggrundsslider. Disse er hentet fra nettet. Jeg har foretaget en ændring i slideren, fjernet play og stop knap og øget slider tiden. Punktet er markeret med rødt. var cbpbgslideshow=(function(){var l=$( #cbp-bislideshow ),g=l. children( li ),n=g.length,f=$( #cbp-bicontrols ),c={$navprev:f. find( span.cbp-biprev ),$navnext:f.find( span.cbpbinext ),$navplaypause:f.find( span.cbp-bipause ),h=0,e, k=true,b=900;function m(o){l.agesloaded(function() {if(modernizr.backgroundsize){g.each(function(){var p=$(this);p. css( background-age, url( +p.find( g ).attr( src )+ ) )) else{l.find( g ).show()g.eq(h).css( opacity,);j();a())function j(){c.$navplaypause.on( click,function(){var o=$(this);if(o. hasclass( cbp-biplay )){o.removeclass( cbp-biplay ). addclass( cbp-bipause );a()else{o.removeclass( cbp-bipause ). addclass( cbp-biplay );i());c.$navprev.on( click,function() {d( prev );if(k){a());c.$navnext.on( click,function(){d( next );if(k) {a())function d(q){var p=g.eq(h);if(q=== next ){h=h<n-?++h:0else{if(q=== prev ){h=h>0?--h:n-var o=g.eq(h);p. css( opacity,0);o.css( opacity,)function a(){k=true;clearti meout(e);e=setteout(function(){d( next );a(),b)function i() {k=false;clearteout(e)return{init:m)(); menufunktion: (function($){ //DOC Ready $(function() { nav ul.collapsed li.show { display:block; $(.show,.hide ).click(function() { $(this).parent( ul ).toggleclass( collapsed ); );.logo{ display:none; #indhold { width:9.%; height:auto; ; ; background-color:#000; float:left; ) )(jquery) Links der henter javascricpt: <script src= js/modernizr.custom.js ></script> <script src= jquery.min.js ></script> <!-- agesloaded jquery plugin : --> <script src= js/jquery.agesloaded.min.js ></ script> <script src= js/cbpbgslideshow.min.js ></ script> <script> $(function() { cbpbgslideshow.init(); ); </script> <script type= text/javascript src= ajax/libs/jquery/./jquery.min.js ></script> <script type= text/javascript scr= ></script> <script type= text/javascript src= js/event-handlers.js ></script>

11 Kvalitets v u rd e r i ng Jeg er blevet ganske godt tilfreds med sitet. Den er brugervenlig og spændende at udforske i forhold til variable bokse, som man løbende vil kunne omskrukture. Dog mangler kontakt formularen at sende dig til en takkeside når man sender en forespørgsel. Dette skyldes at siden stadig er i en betaversion og først skal lancereres, når webhotellet er valgt. I fremtiden skal der også tilkobles et cms-system via php i wordpress. Dette er dog en længere proces og jeg mangler stadig lidt materiale fra kunden før den endegyldigt kan blive færdig.