Kunst, hermeneutik og teknovidenskab
Grafisk
w o rk f l ow
Hjemmesiden 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. Hjemmesiden skal
afspejle disse visioner. Den
er enkel, men samtidig spændende og dynamisk. Jeg bruger rå materialer, et simpelt
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 optimal 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 30-60 år og ligger
økonomisk i middelklassen.
Den sekundære målgruppe ligger i overklassen.
Hjemmesiden er testet og
virker i følgende browsere:
safari
firefox
chrome
Explorer
Hele processen har jeg selv
stået for.
W
H
im
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.
H1 overskrift viser hvor du er på siden.
Brugervenligheden er simpel og kunden kan nemt
navigere rundt og se hvilken side de er landet på via
h1 overskrifterne.
Flydende design og variable bokse der tilpasser sig
skærmstørrelser.
W
H
im
Story board
ind e x o g tømr er /sn e d k e r
2
3
4
6
5
7
2
1
8
9
3
4
5
6
7
1
10
11
8
Navigation/knapper:
1. Logo linker til index.html
2. Linker til index.html
3. Linker til pages/tomrer.html
4. Linker til pages/projekter.html
5. Linker til pages/viden.html
6. Linker til pages/Om_os.html
7. Linker til pages/kontakt.html
Navigation/knapper:
1. Logo linker til index.html
2. Linker til index.html
3. Linker til pages/tomrer.html
4. Linker til pages/projekter.html
5. Linker til pages/viden.html
6. Linker til pages/Om_os.html
7. Linker til pages/kontakt.html
Grafik - img mappe:
1. img/images/LOGO_m.png
8. img/house1.jpg
9. img/saw_icon_viden.jpg
10. img/house3.jpg
Grafik - img mappe:
1. ../img/images/LOGO_m.png
8. ../img/viden_om.jpg
9. ../img/house2_nat.jpg
Faste grafiske elementer:
1. Logo
11. Baggrundsslider
img/concret.jpg
img/wood.jpg
img/wood_2.jpg
img/concret.jpg
img/saw.jpg
Faste grafiske elementer:
1. Logo
11. Baggrundsslider
img/concret.jpg
img/wood.jpg
img/wood_2.jpg
img/concret.jpg
img/saw.jpg
9
11
W
H
im
Story board
p ro j e k ter og v i den
2
3
4
5
6
7
2
1
8
11
5
6
7
8
9
11
Navigation/knapper:
1. Logo linker til index.html
2. Linker til index.html
3. Linker til pages/tomrer.html
4. Linker til pages/projekter.html
5. Linker til pages/viden.html
6. Linker til pages/Om_os.html
7. Linker til pages/kontakt.html
10
12
Grafik - img mappe:
1. ../img/images/LOGO_m.png
8. ../img/house1.jpg
9. ../img/house3.jpg
10. ../img/tegnestuen_lampe.jpg
12. ../img/TulipanVej.jpg
13. ../img/elmegade.jpg
14. ../img/saw_icon_viden.jpg
Faste grafiske elementer:
1. Logo
11. Baggrundsslider er med de samme billeder på hele siden
4
1
9
Navigation/knapper:
1. Logo linker til index.html
2. Linker til index.html
3. Linker til pages/tomrer.html
4. Linker til pages/projekter.html
5. Linker til pages/viden.html
6. Linker til pages/Om_os.html
7. Linker til pages/kontakt.html
3
13
14
Grafik - img mappe:
1. ../img/images/LOGO_m.png
8. ../img/bullseye.jpg
9. ../img/saw_icon_viden.jpg
10. ../img/hammer.jpg
12. ../img/house4.jpg
10
12
Faste grafiske elementer:
1. Logo
11. Baggrundsslider er med de samme billeder på hele siden
W
H
im
Story board
o m o s o g konta kt
2
3
4
5
6
7
2
1
3
4
5
7
1
8
11
8
Navigation/knapper:
1. Logo linker til index.html
2. Linker til index.html
3. Linker til pages/tomrer.html
4. Linker til pages/projekter.html
5. Linker til pages/viden.html
6. Linker til pages/Om_os.html
7. Linker til pages/kontakt.html
Navigation/knapper:
1. Logo linker til index.html
2. Linker til index.html
3. Linker til pages/tomrer.html
4. Linker til pages/projekter.html
5. Linker til pages/viden.html
6. Linker til pages/Om_os.html
7. Linker til pages/kontakt.html
Grafik - img mappe:
1. img/images/LOGO_m.png
8. ../img/berton.jpg
9. ../img/mads.jpg
10. ../img/rosalie.jpg
Grafik - img mappe:
1. img/images/LOGO_m.png
8. ”https://www.google.com/maps/embed?pb=!1m14!1m8!1
m3!1d2261.649426204199!2d8.452612!3d55.468778!3m2!
1i1024!2i768!4f13.1!3m3!1m2!1s0x464b212b062c1a17%3A
0xce2160c268d1b11d!2sTorvegade+38!5e0!3m2!1sda!2sdk!
4v1393244788646” width=”400” height=”300” frameborder=”0”
style=”border:0”
Faste grafiske elementer:
1. Logo
11. Baggrundsslider er med de samme billeder på hele
siden
6
9
10
11
Faste grafiske elementer:
1. Logo
11. Baggrundsslider er med de samme billeder på hele siden
W
H
im
Skelet
Ind e x o g tømr er /sn e d k e r
index.html
Menu blok:100 X 60px
logo:111 X 107px
header:100% x 70px
tomrer.html
Menu blok:100 X 60px
header:100% x 70px
Wrapper:1000 x auto h
Indhold:
29,2% x auto h
margin:1%
padding:1%
Indhold:
29,2% x auto h
margin:1%
padding:1%
Wrapper:1000 x auto h
Indhold:
29,2% x auto h
margin:1%
padding:1%
Indhold:
46% x auto h
margin:1%
padding:1%
Indhold:
46% x auto h
margin:1%
padding:1%
Indhold:
29,2% x auto h
margin:1%
padding:1%
Indhold:
46% x auto h
margin:1%
padding:1%
footer:100% x 70px
logo:111 X 107px
footer:100% x 70px
W
H
im
Skelet
p ro j e k ter og v i den
projekter.html
Menu blok:100 X 60px
logo:111 X 107px
header:100% x 70px
viden.html
Menu blok:100 X 60px
logo:111 X 107px
header:100% x 70px
Wrapper:1000 x auto h
Indhold:
46% x auto h
margin:1%
padding:1%
Wrapper:1000 x auto h
Indhold:
46% x auto h
margin:1%
padding:1%
Indhold:
46% x auto h
margin:1%
padding:1%
Indhold:
29,2% x auto h
margin:1%
padding:1%
Indhold:
29,2% x auto h
margin:1%
padding:1%
Indhold:
46% x auto h
margin:1%
padding:1%
Indhold:
95,6% x auto h
margin:1%
padding:1%
Indhold:
29,2% x auto h
margin:1%
padding:1%
footer:100% x 70px
Indhold:
95,6% x auto h
margin:1%
padding:1%
Indhold:
29,2% x auto h
margin:1%
padding:1%
footer:100% x 70px
W
H
im
Skelet
o m o s o g konta kt
om os.html
Menu blok:100 X 60px
logo:111 X 107px
header:100% x 70px
kontakt.html
Menu blok:100 X 60px
logo:111 X 107px
header:100% x 70px
Wrapper:1000 x auto h
Wrapper:1000 x auto h
Indhold:
46% x auto h
margin:1%
padding:1%
Indhold:
95,6% x auto h
margin:1%
padding:1%
Indhold:
46% x auto h
margin:1%
padding:1%
footer:100% x 70px
Indhold:
60% x 300px
margin:1%
padding:1%
Indhold:
46% x auto h
margin:1%
padding:1%
footer:100% x 70px
W
H
im
Flowchart
s t r u k t ur
index.html
tomrer.html
projekter.html
om_os.html
viden.html
kontakt.html
google kort
formular.html
W
H
im
Udvalgte
ko d e r
r e s p o n s i v w eb
HTML 5
cs s 3
JAVa s crip t
Her ses et udsnit af de koder jeg har kodet om, så
siden tilpasser sig mobilen.
Har så vidt mulig brugt HTML 5 for at minimere
loading tiden.
Har stylet med CSS3 f.eks her i h1 overskrift, hvor
jeg har drop shadow og tilpasset dem til de forskellige browsere
h1 {
font-size:25px;
font-family: ’Chivo’, sans-serif;
margin-top: 105px;
color:#FFF;
text-align:center;
letter-spacing:6px;
text-shadow: 1px 1px 5px #333;
filter: dropshadow(color=#333, offx=2, offy=2);
text-transform:uppercase;
z-index:-1;
<header>
Har 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.
nav li.w320 {
display:table;
}
nav li.show {
display:none;
width:100%;
}
nav ul.collapsed li {
display:none;
}
<nav><!--menu-->
<ul class=”collapsed”>
<li class=”w320 show”><a href=”#”>Se menu</a></li>
<li class=”w320 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”><img src=”img/images/
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 38, 1 SAL TV | 6700 ESBJERG DANMARK |
ARKITEKT | BYGNINGSKONSTRUKTØR | HÅNDVÆRK</p></footer>
h1 {
font-size:30px;
font-family: ’Chivo’, sans-serif;
margin-top: 80px;
color:#FFF;
text-align:center;
letter-spacing:6px;
text-shadow: 1px 1px 10px #333;
filter: dropshadow(color=#333, offx=2, offy=2);
text-transform:uppercase;
}
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=9500;function m(o){l.imagesLoaded(function()
{if(Modernizr.backgroundsize){g.each(function(){var p=$(this);p.
css(”background-image”,”url(”+p.find(”img”).attr(”src”)+”)”)})}
else{l.find(”img”).show()}g.eq(h).css(”opacity”,1);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<n1?++h:0}else{if(q===”prev”){h=h>0?--h:n-1}}var o=g.eq(h);p.
css(”opacity”,0);o.css(”opacity”,1)}function a(){k=true;clearTi
meout(e);e=setTimeout(function(){d(”next”);a()},b)}function i()
{k=false;clearTimeout(e)}return{init:m}})();
menufunktion:
(function($){
//DOC Ready
$(function() {
$(”.show, .hide”).click(function() {
$(this).parent(’ul’).toggleClass(’collapsed’);
});
nav ul.collapsed li.show {
display:block;
.logo{
display:none;
}
#indhold1 {
width:95.6%;
height:auto;
margin:1%;
padding:1%;
background-color:#000;
float:left;
}
})
})(jQuery)
Links der henter javascricpt:
<script src=”js/modernizr.custom.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/
jquery.min.js”></script>
<!-- imagesLoaded jQuery plugin by @desandro
: https://github.com/desandro/imagesloaded -->
<script src=”js/jquery.imagesloaded.min.js”></
script>
<script src=”js/cbpBGSlideshow.min.js”></
script>
<script>
$(function() {
cbpBGSlideshow.init();
});
</script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.3/jquery.min.js”></script>
<script type=”text/javascript” scr=”http://code.jquery.com/jquerylatest.js”></script>
<script type=”text/javascript” src=”js/event-handlers.js”></script>
W
H
im
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.
W
H
im
© Copyright 2024