Tekst og layout, af både dette materiale og det tilhørende digitale opgavemateriale: Hasse Sørensen/Nordisk Grafik for MicroWorld A/S

Størrelse: px
Starte visningen fra side:

Download "Tekst og layout, af både dette materiale og det tilhørende digitale opgavemateriale: Hasse Sørensen/Nordisk Grafik for MicroWorld A/S"

Transkript

1 MicroWorld 1 A/S

2 HTML5 Tekst og layout, af både dette materiale og det tilhørende digitale opgavemateriale: Hasse Sørensen/Nordisk Grafik for MicroWorld A/S Alle rettigheder tilhører MicroWorld A/S Kopiering og distribution kun tilladt efter forudgående aftale med MicroWorld A/S. HTML5 koden og CSS3 udarbejdes og vedtages af W3C, The Internet Consortium. Læs mere på w3.org. HTML, CSS, FTP og HTTP og dermed internettet er oprindeligt udviklet af Tim Berners-Lee i marts

3 Indhold Forord!... 4 Fremtidens kode!... 5 Før vi går i gang...!... 6 De nye strukturkoder!... 7 Indsatte medier!... 9 WebFonts! Rotation første forsøg...! Kompatibilitet med gamle browsere! Chrome Frame! Afrundede hjørner! Background property! RGB-farver og gennemsigtighed! HSL-farver og gennemsigtighed! Farveforløb! Skygger! Tekst i spalter! Animation! Keyframe animation! D transformation! Canvas! SVG! Formularer! GeoLocation! AppCache! Appʼs! Links om HTML5, CSS3 og jquery! Kodeoversigt (engelsk)!

4 Forord Da begreberne nutid og fremtid bruges flittigt i dette materiale er det vigtigt at gøre opmærksom på at det er forfattet i perioden februar-marts I en ikke-så-fjern-fremtid vil det opfattes som latterligt længe siden. Materialet kan bruges sammen med dine egne websites i en simpel teksteditor eller et avanceret CMS, men for at få det fulde udbytte af materialet bør det bruges sammen med den tilhørende opgavemappe på computeren. Desuden bør du benytte Adobe Dreamweaver CS 5.5 eller nyere, gerne med både iphone og Android mobile application installeret (Site > Mobile Application > Configure Application Framework...) En Webkit browser, fx Google Chrome, eller helt optimalt Apple Safari Adobe Device Central til mobiltest 4

5 Fremtidens kode HTML5 er et working draft, altså stadig blot et udkast. Meningen med HTML5 er en langt bedre strukturering af koden, og en imødekommenhed overfor hvordan HTML benyttes i virkeligheden. De fleste websider har en top og en bund med et tydeligt differencieret design, med det resultat at webdesignere har navngivet divʼer med top, bund, bottom, footer etc. De har nu fået entydige koder: <header> og <footer>. Samtidig er det en imødekommenhed overfor brugen af eksterne mediefiler, som i stedet for at ʻkaldeʼ eksterne afspillere skal kunne afspilles af browseren selv, med en enkelt kode: <video> eller <audio>. og så fremdeles... Udkastet til HTML5 standarden fylder pt. 900 sider, og det er hensigten at alle browsere skal kunne afvikle alle websites helt ensartet, og samtidig være bagud-kompatible. Det er altså et klart brud med de principper der ligger bag udviklingen af XHTML, som kunne betragtes som en hård disciplinering af kodeudviklingen. Derfor begynder dokumentet ikke længere med <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd"> men helt enkelt med <!DOCTYPE html>. Men hvis HTML5 endnu ikke er færdigudviklet, og browserne endnu ikke understøtter HTML5, hvorfor skal vi så overhovedet beskæftige os med HTML5? fordi de andre børn heller ikke kunne vente med at pakke gaver ud! De dele af HTML5 der ér vedtaget understøttes i en lang række browsere, og selv Adobe Dreamweaver understøtter en lang række HTML5 koder. Google har i vidtstrakt grad implementeret HTML5 og CSS3 i både deres browser (Google Chrome) og i deres webmail (gmail). Derfor! 5

6 Før vi går i gang... Opgaverne i dette materiale kan løses med en teksteditor, fx Notepad, men det optimale vil være at bruge Dreamweaver 5.5 eller senere. 1. Hent opgavemappen fra adx.dk/html5/opgavemappe.zip 2. Udpak zip-filen til en mappe på skrivebordet 3. Opret et Site i Dreamweaver 4. Knyt sitet til opgavemappen (Local Site Folder i Site Setup) 5. Hent Apples browser Safari fra apple.com/safari og vælg at den skal være standardbrowser 6. Åben index.html i Dreamweaver 6

7 De nye strukturkoder Helt grundlæggende er sidens struktur ganske som den plejer, men der er både nye koder og gamle koder, der er blevet forenklet, bla. for at afhjælpe inkonsekvent brug af DIV-tags, og for at teksten på et website bedre kan udveksles med andre medier. <!DOCTYPE HTML> Forenklet <html> <head> <meta charset="utf-8"> Forenklet <title>html5</title> </head> <body> <header> Ny <h1>html5</h1> </header> <nav>menu</nav> Ny <section> Ny <article> Ny Brødtekst </article> </section> <aside> Ny Sidetekst </aside> <footer> Ny <h6>footer tekst</h6> </footer> </body> </html> De enkelte Section, Article og Aside tags kan henvise til CSS definitioner, og ved brug af flere kan de udvides med fx id=aside1. Det er naturligvis også muligt at oprette CSS definitioner til Header, Nav og Footer. footer { $ position: fixed; $ bottom: 0px; $ left: 0px; $ width: 100%; $ background-color: #000; $ color: #FFF; $ z-index: 5; } Vi skal senere i dette kursus kigge på en lang række interessante nyheder i CSS3. Først skal vi bruge de nye og forenklede koder til at rydde op i index.html i opgavemappen. Kig efter bemærkningerne i koden <!-- HTML bemærkning --> /* CSS bemærkning */ // JavaScript bemærkning 7

8 Følgende HTML kode <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/ html4/strict.dtd"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <div id="header">... </div> <div id="navigation">... </div> <div id="sektion">... </div> <div id="art1">... </div> <div id="art2">... </div> <div id="art3">... </div> <div id="dims1" class="dims">... </div> <div id="dims2" class="dims">... </div> <div id="sidefod">... </div> Erstattes med <!DOCTYPE HTML> <meta charset= UTF8 > <header>... </header> <nav>... </nav> <section>... </section> <article id="art1">... </article> <article id="art2">... </article> <article id="art3">... </article> <aside id="aside1">... </aside> <aside id="aside2">... </aside> <footer>... </footer> Følgende CSS kode #header #sektion #navigation #header, #navigation, #sektion.dims #dims1 #dims2 #sidefod Erstattes med header section nav section, nav, header aside #aside1 #aside2 footer 8

9 Indsatte medier Vi skal indsætte en lydfil og en lille film i dokumentet. HTML5 kompatible browsere kan afspille disse filer uden plug-inʼs, så vi skal bruge enkle koder til at indsætte dem: <audio> og <video>. Audio koden ser sådan ud, i den mest enkle form: <audio> <source src="media/cph.mp3" type="audio/mpeg" /> </audio> Der er dog et par ekstra koder der med fordel kan indsættes, sådan at browseren viser kontrolknapper til afspilningen, så browseren kan vælge imellem flere formater af lydfilen, og så der fremkommer en tekst til dem der ikke kan høre og se afspilleren: <audio controls="controls"> <source src="media/cph.ogg" type="audio/ogg" /> <source src="media/cph.mp3" type="audio/mpeg" /> Din browser understøtter ikke audio-elementet </audio> Sæt lyden ind under den sidste artikkel. Derefter indsætter vi en lille video: <video width="640" height="360" controls="controls" poster="images/poster.jpg"> <source src="media/road.ogg" type="video/ogg" /> <source src="media/road.mp4" type="video/mp4" /> <source src="media/road.flv" type="video/flv" /> Din browser understøtter ikke video-elementet. </video> poster betyder et billede der bliver vist indtil filmen startes. Både video og audio koden kan udvides med følgende funktioner: <video autoplay="autoplay"> $ Afspil når siden er hentet. <video muted="muted">$ $ Filmen er lydløs. <video preload="auto">$ $ Filmen loades automatisk, klar til afspilning. Læs mere på w3schools.com/html5/tag_video.asp 9

10 WebFonts Hidtil har vi været voldsomt begrænset i forhold til brugen af typografi på websites: Times New Roman, Arial og Verdana... Årsagen er jo at skrifttypen skal være installeret på den besøgendes computer for at virke. Derfor har vi enten brugt billeder eller Flash, når vi ville bruge en alternativ skrifttype. I HTML5/CSS3 er det muligt at benytte skrifter der ligger på en webserver beregnet til formålet. Der findes en række betalingsservices, bla. webfonts.fonts.com, der hoster over fonte, men i dette tilfælde vil vi benytte en gratis: der hoster et lidt mere begrænset men voksende antal fonte. Dér kan du finde og afprøve fonte, og finde koderne til at benytte fontene på dit website. Lige under <style type="text/css"> skriver url(http://fonts.googleapis.com/css?family=lobster); hvorved skrifttypen Lobster bliver hentet sammen med siden. I sidens interne stylesheet retter vi font-informationen i h1 og h2: font-family: ʼLobsterʼ, arial, sans-serif; På er det muligt at hente skrifttyperne som opentype til computeren, så du kan se dem imens du arbejder med udviklingen af siden på din computer. Du kan naturligvis vælge også at bruge dem i tryksager, så du sikrer ensartetheden. L!"#$r Josefine Sans Over the rainbow 10

11 Rotation første forsøg... En funtion der i HTML4/XHTML krævede billeder eller Flash. I #aside2 i sidens interne stylesheet indsættes følgende kode: transform:rotate(-5deg); Dette burde rotere vores aside2 5 grader mod uret, men det virker ikke... fortsæt derfor til Kompatibilitet med gamle browsere. 11

12 Kompatibilitet med gamle browsere Relativt nye browsere er bygget til at kunne forstå og eksekvere HTML5 og CSS3 i en vis udstrækning. Men da mange af de sidste opdateringer er lavet imens mange nye koder var ʻeksperimentelleʼ skal vi gøre browseren opmærksom på at det er en ny ʻeksperimentelʼ kode tiltænkt dén. Der findes fire forskellige typer browsere: Moz$ $ Mozilla Firefox O $ $ Opera MS$ $ Microsoft Internet Explorer Webkit$$ Alle browsere der følger W3Cʼs anbefalinger slavisk, $ $ fx Google Chrome, og Safari Vi indsætter derfor en undtagelseskode: -webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -o-transform:rotate(-5deg); -ms-transform:rotate(-5deg); transform:rotate(-5deg); Grunden til at vi indsætter den originale kode til sidst er at CSS læses som et skænderi; det sidste udsagn browseren forstår bliver eksekveret. Hvis jeg fx skriver color:#fff; color:#000; bliver farven #000 (sort), da dét er det sidste udsagn. på den måde kan vi indsætte undtagelseskoder på websites, imens vi venter på at browserne forstår de originale koder, uden at behøve huske på at fjerne undtagelseskoder på et større antal websites i fremtiden. Ældre versioner af Internet Explorer kan forstå flere CSS3 koder hvis vi indsætter en funktion der kan hentes fra css3pie.com. Dette er allerede gjort, og de hentede filer ligger i mappen pie. Derfor indsætter vi følgende kode i slutningen af hver CSS definition der bruger nye funktioner (rgba farver, runde hjørner, skygger, rotation m.v.) behavior: url(pie/pie.htc); Fx: #apdiv1 { $ position: absolute; $ top: 100px; $ left: 100px; $ width: 300px; $ height: 650px; $ -webkit-transform:rotate(-5deg); $ -moz-transform:rotate(-5deg); $ -o-transform:rotate(-5deg); $ -ms-transform:rotate(-5deg); $ transform:rotate(-5deg); $ behavior: url(pie/pie.htc); } 12

13 Chrome Frame En stor del af de brugere, der ikke jævnligt opdtarerer deres browser, benytter en ældre version af Internet Explorer. det var den der fulgte med computeren, så det må vel være fint! Det er nu muligt at få selv ældre versioner af Internet Explorer til at vise HTML5 og CSS3 med alle de funktioner der understøttes af Google Chrome, takket være et plugin ved navn Google Chrome Frame. Hvis du indsætter følgende kode på din side vil der ske små mirakler. I HEAD: <meta http-equiv="x-ua-compatible" content="chrome=1"> I BODY: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/cfinstall.min.js"></script> <style> /* CSS rules to use for styling the overlay:.chromeframeoverlaycontent.chromeframeoverlaycontent iframe.chromeframeoverlayclosebar.chromeframeoverlayunderlay */ </style> <script> // You may want to place these lines inside an onload handler CFInstall.check({ mode: "overlay", destination: "http://www.waikiki.com" }); </script> Helt enkelt vil Internet Explorer loade Google Chrome Frame i Internet Explorer, hvis den er installeret, og hvis den ikke er, vil besøgende blive sendt til en side hvor de kan installere den (google.com/chromeframe). Et sådant plugin kræver ikke administratorrettigheder på computeren for at kunne installeres. Læs mere på code.google.com/intl/da/chrome/chromeframe og html5rocks.com/en/tutorials/ google-chrome-frame 13

14 Afrundede hjørner Endnu en ting der kræver billeder i ʼskiverʼ... indtil CSS3! Opret en ny CSS definition med følgende kode: section, aside, nav { -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; border-radius:10px; } Hjørnerne kan naturligvis afrundes mere eller mindre ved at justere 10px til fx 5px eller 15px... Det er også muligt at tilpasse hjørnerne individuelt, fx: border-top-right-radius:10px; border-bottom-left-radius:10px; Skal afrundede hjørner bruges på flere forskellige divʼer m.v. kan du alternativt bruge en class: #roundcorners { -webkit-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -ms-border-radius:10px; border-radius:10px; } og påtvinge denne class i HTML-koden: <div id= apdiv1 class= roundcorners >Bla bla bla</div> 14

15 Background property Med CSS3 er det nu muligt at styre baggrunde, samt indsætte flere baggrunde i samme område/ side/div. baggrunde kan placeres overlappende, skalleres og med en defineret afstand og gentagelse. Et eksempel: apdiv1 { background:url(smiley.gif) top left no-repeat, url(sqorange.gif) bottom left no-repeat, url(sqgreen.gif) bottom right no-repeat; } background-color background-position background-size background-repeat background-origin background-clip backgroundattachment background-image Baggrundsfarve: #fff... Baggrundsbilledets position: bottom, left, center... Baggrundsbilledets størrelse: auto, contain, cover, 60% osv... NY Bestemmer om baggrundsbilledet skal gentages: repeat, repeat-y, repeat-x, norepeat Baggrundsbilldets afgrænsning: border-box, content-box, paddingbox NY Baggrundsfarvens afgrænsning: border-box, padding-box NY Bestemmer om baggrundsbilledet skal scrolle eller fryses fast når siden scroller: fixed, local, scroll Specificerer ét eller flere baggrundsbilleder: url(images/back.jpg) Vi skal nu tilpasse baggrunden, så den fylder vinduet ud, og lægger fast når vi scroller: body { $ background-color: #FFF; $ background:url(images/orange.jpg); $ background-size: cover; $ background-position: top left; $ background-attachment:fixed; } 15

16 RGB-farver og gennemsigtighed Lad mig se en gange; RGB-farven 25,88,133 på en webside hedder #195885, og det giver mening fordi... Aaaaargh!!! I CSS3 hedder RGB-farven 25,88,133: color: rgb(25,88,133) og det bliver bedre endnu, for vi kan tilføje alpha (opasitet): background-color: rgba(25,88,133,0.5) Nu er den farvelagte dims (div, tabel, tekst...) 50% gennemsigtig! Opret en ny css definition: section, nav, header { $ background-color:#069; $ background-color:rgba(0,102,153,0.7); } Nu står farven to gange; først den ʻgamleʼ definition, og derefter den nye. Dette skyldes igen at det sidste forståede udsagn eksekveres. På denne måde har browsere, der ikke kan eksekvere rgbakoden, en ʻfall-backʼ kode. Find også #aside1 { og tilføj den nye farve under background-color:#c8c8c8;: background-color:rgba(200,200,200,0.8); Husk at dette gør baggrunden halvgennemsitig. Hvis det hele incl. teksten skal gøres gennemsigtigt skal du bruge en anden kode, fx: opacity:0.8; /* moz, o, webkit */ filter:alpha(opacity=80); /* ms */ Forestil dig fx en div der skal være 50% opasitet indtil musen holdes over, hvor den skifter til 90% opasitet: #apdiv1 { opacity:0.5; filter:alpha(opacity=50); } #apdiv1:hover { opacity:0.9; filter:alpha(opacity=90); } Det samme kan du nøjes med at gøre på baggrunden: #apdiv1 { background-color:#c8c8c8;: background-color:rgba(200,200,200,0.5); } #apdiv1:hover { background-color:#c8c8c8;: background-color:rgba(200,200,200,0.9); } 16

17 HSL-farver og gennemsigtighed Som alternativ til RGB kan du også bruge HSL og HSLA (Hue/Saturation/Luminance/Alpha), fx: background-color: hsla(200,100%,60%,0.7); Bemærk: HSL er det samme som Photoshop kalder HSB (Hue/Saturation/Brightnes). 17

18 Farveforløb Find #aside2 { og tilføj et farveforløb: background: -webkit-gradient(linear, left top, right bottom, from(#006699), to(#c8c8c8)); background: -moz-gradient(linear, left top, right bottom, from(#006699), to(#c8c8c8)); background: -o-gradient(linear, left top, right bottom, from(#006699), to(#c8c8c8)); background: -ms-gradient(linear, left top, right bottom, from(#006699), to(#c8c8c8)); background: gradient(linear, left top, right bottom, from(#006699), to(#c8c8c8)); Du kan naturligvis også bruge rgba- eller hsla-farver: background: gradient(linear, left top, right bottom, from(rgba(0,102,153,0.8)), to(rgba(255,255,255,0.6))); prøv at rette koden til ovenstående, så du kan se hvordan det ser ud. I resten af materialet nøjes vi med -webkit, og beder dig huske på at der skal suppleres med -moz, -o, -ms og den originale kode 18

19 Skygger Skriv en ny CSS definition: header, nav, section, aside, footer { -webkit-box-shadow: 0px 0px 10px #333; -moz-box-shadow: 0px 0px 10px #333; -o-box-shadow: 0px 0px 10px #333; -ms-box-shadow: 0px 0px 10px #333; box-shadow: 0px 0px 10px #333; } Første 0px er forskydning vandret (mod højre). Anden 0px er forskydning lodret (nedad). 10px er skyggens udtonede størrelse. #333 er en mørk grå. du kan natulrigvis også bruge en rgba-farve: box-shaddow: 0px 0px 10px rgba(51,51,51,0.8); På tekst bruges en anden fremgangsmåde: Vælg h1 { og tilføj følgende kode: text-shadow: 3px 3px 6px #000; (text-shaddow er ikke ny, og kræver derfor ikke -webkit- m.fl.) 19

20 Tekst i spalter Tekst i spalter har ikke rigtigt været en mulighed i HTML4/XHTML, medmindre vi fordelte teksten i tabeller eller div manuelt, hvilket var et helvede når teksten senere blev redigeret. Med koden column-count:2; kan vi fordele teksten i den første artikel i to spalter, og med koden column-gap:10px; kan vi give spalterne en afstand på 10 pixels. I HTML koden har vi givet første <article> kode tilføjelsen id= art1 : <article id= art1 > Derfor kan vi oprette en ny CSS definition: #art1 { -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:10px; -moz-column-gap:10px; column-gap:10px; } Det er også muligt at tilføje en lodret skillestreg imellem spalterne. Her et eksempel på en grim én: -webkit-column-rule: #0F0 dashed 3px; 20

21 Animation Flash er blevet et problembarn, når Apple på deres ʻiGadgetsʼ ikke vil tillade flash-afspillere... Men hvorfor også bruge flash når browseren fint selv kan eksekvere animationer skrevet i CSS? Først skal vi kigge på en kode der fortæller en enkelt historie: #apdiv1 {background-color: #fff;} #apdiv1:hover {background-color:#000;} En Div med id= apdiv1 har hvid baggrundsfarve, men får sort baggrundsfarve når musen holdes over. Enkelt. To nye koder Transition og Transform gør det muligt at ændre placering, vinkel og størrelse. Nu får vi mere komplekse muligheder. Find definitionen nav { og tilføj følgende kode i bunden: -webkit-transition: all 1s ease-in-out; all = Alle dimensioner. Alternativt: width, height, none 1s = 1 sekundt ease-in-out = acceleration og deceleration. Alternativt: linear, ease, ease-in, ease-out Nu skal vi beskrive hvilken position, størrelse m.v. denne transition skal føre til. Opret derfor en ny definition ved navn nav:hover: nav:hover { $ left:70px; $ background-color: #f30; $ -webkit-transform: rotate(360deg) scale(2); } prøv det. Det er sjov og ballade, og værd at huske på et godt dansk designprincip: Jo flere effekter, jo grimmere er det! Nu skal vi prøve en lidt mere kompleks animation. En Div inde i en anden Div, hvor den ʻindreʼ Div bevæger sig når musen holdes over den ʻydreʼ Div. Den ʻydreʼ og aktiverende Div er rummet, og den indre, og aktiverede, Div er rumskibet. Find koden div.rocket { og skriv følgende kode under: -webkit-transition: all 5s ease-in; (Alle dimensioner, 3 sekunder, accelerer) Find koden div.rocket img { og skriv følgende kode under: -webkit-transition: all 2s ease-in-out; (Alle dimensioner, 2 sekunder, decelerer) Find koden #outerspace:hover div.rocket { og skriv følgende kode: -webkit-transform: translate(1500px,-550px); (Flyt elementet 1500 pixels og -550 pixels) Og find koden #outerspace:hover div.rocket img { og skriv følgende kode: -webkit-transform: rotate(70deg); (Roter objektet 70 grader) 21

22 Keyframe animation Find definitionen #logo { og skriv følgende kode under: -webkit-border-radius:50px; (skaber runde hjørner på 1/4 af divʼens størrelse; altså en cirkel) -webkit-animation-name:logoanimation; (Et navn vi selv finder på, men som skal refereres) -webkit-animation-delay:3s; (Forsinkelse før animationen starter) -webkit-animation-duration:6s; (Animationens varighed) -webkit-animation-iteration-count:2; (Dét antal gange animationen skal køre. infinite får den til at loope uden ende) -webkit-animation-timing-function:ease-in-out; (Accelerer og decelerer) Herefter skrives en ny funtion ind i logoanimation { 0% {background:rgba(0,0,0,0.0); right:50px; top:15px; -webkit-transform:rotate(0deg);} 25% {background:rgba(0,102,153,0.7); right:50px; top:400px; -webkit-transform:rotate(0deg);} 50% {background:rgba(255,51,0,0.7); right:400px; top:400px; -webkit-transform:rotate(180deg);} 75% {background:rgba(255,255,255,0.7); right:400px; top:15px; -webkit-transform:rotate(0deg);} 100% {background:rgba(0,0,0,0.0); right:50px; top:15px; -webkit-transform:rotate(0deg);} Procenterne henviser til varigheden, som i dette tilfælde jo er 6 sekunder. Dermed er 50% altså efter 3 sekunder, hvor baggrundsfarven er 0,0,255 (blå) og 0.7 alpha (70% opasitet), Divʼen befinder sig 400 pixels fra højre og 400 pixels fra toppen, og rotationen er 180 grader (den vender på hovedet). I stedet for 0, 25, 50, 75 og 100 procent kan vi sagtens nøjes med 0, 50 og 100, eller udvide med 0, 5, 10, 15, 20,

23 3D transformation I CSS3 kan vi benytte rotation og vridning ( skew ) på X, Y og Z-aksen i forbindelse med transform. Prøv at finde #aside1 { definitionen og skriv følgende kode: -webkit-transform:rotatex(35deg) rotatey(10deg) skew(20deg,0deg); En anden tilgang er rotate3d, som giver mulighed for at tilpasse x, y, z og vinkel. Erstat ovenstående kode med denne: -webkit-transform:rotate3d(1, 1, 0, 55deg); Prøv evt. at sætte koderne på én ad gangen, og se resultatet i browseren. Kode transform transform-origin transform-style perspective perspective-origin backface-visibility matrix3d (n,n,n,n,n,n,n,n,n,n,n, n,n,n,n,n) translate3d(x,y,z) translatex(x) translatey(y) translatez(z) scale3d(x,y,z) scalex(x) scaley(y) scalez(z) rotate3d(x,y,z,angle) Forklaring Lægger en 3D transformation på et element Ændrer positionen af et transformeret element Specificerer hvordan et indbygget element er renderet i 3D Specificerer 3D elementers perspektiv Specificerer hvordan bunden af et 3D element fremtræder Definerer hvorvidt et element skal være synligt når det ikke vender mod skærmen Definerer en 3D transformation, ved at benytte en 4x4 matrix på 16 værdier Flytter hhv. x, y og z Flytter x Flytter y Flytter z Skalerer x, y og z i 3D Skalerer x Skalerer y Skalerer y 3D ved at tilpasse x, y, z og vinkel 23

24 rotatex(angle) rotatey(angle) rotatez(angle) perspective(n) Roterer x Roterer y Roterer z Perspektiv Læs evt. mere på cubiq.org/building-a-pure-css-3d-city og w3schools.com/css3/ css3_3dtransforms.asp 24

25 Canvas Canvas er opfundet for at skabe rum til alle de funktioner der ikke understøttes naturligt i HTML, navnligt JavaScripts. Canvas bruges til fx: Diagrammer Animationer Grafer Tegneapplikationer At omgå begrænsninger i CSS Canvas er et lærred der giver mulighed for at placere tegninger på pixel-niveau, og beziér-kurver (vektorgrafik). men brugt på den rigtige måde kan det bruges til nogle ret imponerende ting. I HTML koden indsættes helt enkelt koden <canvas></canvas>, evt: <canvas id=... Derefter indsættes en kode der henter et JavaScript med de ønskede funktioner, fx: <script src="drawingtools.js"></script> Vi skal her blot se på tre forskellige måder canvas kan udnyttes til tegneapplicationer. Kig under overskriften Canvas, og prøv de forskellige tegneapplikationer: Skitse, Farvelæg og Helt tegneprogram Hvis du er interesseret i at dykke ned i JavaScriptet kan du se de vedhæftede.js filer i opgavemappen. Læs mere om Canvas HTML og CSS: w3schools.com/html5/tag_canvas.asp Læs mere om udviklingen af en tegneapplikation: williammalone.com/articles/create-html5-canvasjavascript-drawing-app 25

26 SVG SVG står for Scalable Vector Graphics. SVG definerer grafik i XML format. SVG kan bruges til at indsætte en vektortegning i ren kode. I modsætning til Canvas kan SVG ikke bruges til bruger-interaktion. Det er muligt at lave en tegning i Adobe Illustrator og vælge Gem Som > SVG > Show SVG Code En SVG kode kan se sådan ud: <svg> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> Men vi skal prøve med en langt mere kompleks kode. 1. Åben dokumentet html5badge_svg.txt i Dreamweaver eller Notepad <svg viewbox=" "> <path fill="#e34f26" d="m71,460 L30,0 481,0 440, ,512"/> <path fill="#ef652a" d="m256,472 L405, ,37 256,37"/> <path fill="#ebebeb" d="m256,208 L181, , , ,94 255,94 114,94 115, , ,265zM256,355 L255, , , , , , , ,414z"/> <path fill="#fff" d="m255,208 L255, , , , , , , , , ,208zM255,94 L255, , , , , , , , ,94z"/> </svg> 2. Kopier hele teksten 3. Find koden <img src="images/html5_badge.png"> i index.html og erstat den med den kopierede kode Læs mere om SVG på tutorialspoint.com/html5/html5_svg.htm 26

27 Formularer HTML5 indeholder adskillige nye faciliteter i formularer. Lad os lige prøve et par af dem. Der findes en enkelt formular i bunden af siden. Ret koden med de viste koder (i forskellige farver): <form action="xxx.asp" autocomplete="on"> Fornavn:<input type="text" name="fnavn" autofocus="autofocus" placeholder="fornavn"> Efternavn:<input type="text" name="enavn" placeholder="efternavn"><br> <input type=" " name=" " autocomplete="off" Antal kager<input type="number" name="kager" step="3"><br> <input type="submit" /> </form> Nye koder til <form>-koden: autocomplete <form autocomplete="on"> Formularen tillader at browseren bruger gemte data, hvis off tillades det ikke. novalidate <form formnovalidate= "formnovalidate"> Formularen sendes uden at data valideres før afsendelse. Nye koder til <input>-felter: autocomplete <input autocomplete="on"> Feltet tillader at browseren bruger gemte data, hvis off tillades det ikke. autofocus <input autofocus="autofocus" Cursoren står i dette felt når siden loades form <input form="form1"> Når flere formularer bruges på samme side kan felter ʻtaggesʼ til en specifik form formaction formenctype formmethod formnovalidate <input type="submit" formaction="xxx.asp"> <input type="submit" formenctype="multipart/ form-data"> <input type="submit" formmethod="post"> <input formnovalidate= "formnovalidate"> Vælger hvilken URL formularen skal sendes til. Kan benyttes ved flere forsendelsesmuligheder: Send som... Bestemmer hvilken encoding der skal benyttes ved forsendelse (kun ved post ) Bestemmer hvilken forsendelsesform der skal bruges på en altenativ send-knap Formularen sendes uden at data i dette felt valideres før afsendelse. 27

28 formtarget height and width multiple placeholder <input type="submit" formtarget="_blank"> <input type="image" src="img_submit.gif" alt="submit" width="48" height="48"> <input type="file" name="img" multiple="multiple"> <input placeholder= "Efternavn"> Bestemmer hvor formularen skal sende brugeren hen: _blank, _self, _parent, _top, framenavn Højde og bredde når billede anvendes som knap Tillader brugeren at indsætte flere værdier i ét felt, fx vedhæftninger Sætter en standardtekst ind i et tekstfelt i svag grå, så brugeren kan se hvad der forventes. required <input required="required"> Når et felt SKAL udfyldes step <input type="number" name="points" step="3"> Sætter intervaller på type= number funktionen 28

29 GeoLocation Geolocation (automatisk placering på et kort) giver ikke rasende meget mening på den stationære computer jeg sidder foran dag efter dag. Men på en ipad eller smartphone, når jeg står et sted i Rom, kan det være en praktisk del af en mobil webside eller HTML5 Appʼ. Derfor er GeoLocation et glimrende eksempel på en jquery der gør HTML5 spændende på bærbare enheder. Først skal vi knytte jquery til siden. Derfor indsætter vi følgende kode i HEAD: <script src="js/jquery min.js"></script> Bemærk at vi i HTML5 ikke længere skal beskrive arten af script! Det er på dette kursus ikke meningen at vi skal sidde og skrive lange koder, så derfor åbner vi filen geolocation.txt i opgavemappen og copy-paster teksten ind i HEAD, under den forgående kode. Det kan dog betale sig at nærlæse kommentarerne i koden, som forklarer hvilke dele af koden der ʻvækkerʼ hvilken funktion. Kommentarer i scripts begynder med // Til sidst skal vi indsætte selve funktionen på siden: Skriv følgende kode lige over </section>: <div> <button id="btninit" >Find mig!</button> <button id="btnstop" >Stop positionering</button> </div> Husk på at stationære computere på et kabelnetværk vil vise nærmeste forbindelse til internettet som location. potentielt flere kilometer væk fra hvor du sidder... Positionering kan naturligvis ikke kun bruges sammen med kort, men også i forbindelse med søgning på trafik-, hotel- og personsøgninger. Denne funktion fungerer ikke ved lokal test på computeren, men den samme kode kan ses i funktion på adx.dk/html5/geolocation.html 29

30 AppCache Tidligere var websites beregnet til at blive hentet fra internettet hver gang vi skulle se dem, med mulighed for at gemme særlige preferencer i små cookies. Cache var en forældet idé, fra dengang internettet var dyrt tilgængeligt. Men på ipads og smartphones er cache kommet i fokus igen, og W3C har udvilket en kodefunktion til at beslutte hvad der skal gemmes i cache og hvad der skal hentes hver gang. Vi skal udvide vores <html> tag så det indeholder en reference til en AppCache fil. <html manifest="offline.appcache"> Herefter skal vi oprette en ny tekstfil i Dreamweaver (File > New > Other > Text) eller Notesblok. I filen skriver vi (udelad bemærkninger i parantes): CACHE MANIFEST # v1.0.0 (Dato og version) images/logo.jpg images/bg.jpg js/jquery min.js * (Filer der skal lagres i cache. * betyder og alle andre ) NETWORK: index.html (Filer der skal hentes fra nettet hver gang) FALLBACK: offline.html (Erstatter filer der skal hentes fra nettet, hvis forbindelsen er afbrudt. Fx en ʻskrabetʼ kopi af index.html) Det kan umidelbart ikke ses at et website indeholder en appcache funktion, men hentes det i Firefox vil browseren spørge om tilladelse til at gemme data på computeren. 30

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16

Indhold. Grafisk workflow 3 Procesbeskrivelse 4 Inspiration 5 Skitser 6 Flowchart 7 Typografi og farver 8 Skelet 9 Storyboard 12 Html, css og seo 16 GRAFISK WORKFLOW Indhold Grafisk workflow Procesbeskrivelse Inspiration 5 Skitser 6 Flowchart Typografi og farver 8 Skelet 9 Storyboard 2 Html, css og seo 6 Grafisk workflow Opgaven At skabe et nyt og

Læs mere

GRAFISK WORKFLOW H1 MARIA SCHELDE

GRAFISK WORKFLOW H1 MARIA SCHELDE GRAFISK WORKFLOW H1 MARIA SCHELDE DOKUMENTATION Opgaven Arkitekt Mette Schelde skulle have designet og programmeret et website, hvorpå hun kunne præsentere hendes produkter. Designkrav Sitet skal være

Læs mere

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio

Grafisk Workflow. Endeligt layout. Om mig. Forside. Portfolio Endeligt layout Forside Om mig Portfolio 1 Hjemmeside Opgaven I dette design projekt skulle jeg gennemføre en designproces, hvor jeg enten skulle redesigne eller designe et produkt. Jeg valgte at designe

Læs mere

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på

ELEMENTER Jeg vælger fonten Raleway, som er en af Googles mange gratis webfonte. Det er en grotesk skrift, som især bruges til websites, da de på Grafisk design Design af hjemmeside til indretningsarkitekt med firma navn enrico indret, som jeg tidligere har designet logo for. Firmaet laver udelukkende erhvervsindretning og målgruppen for sitet er

Læs mere

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik.

GRAFISK WORKFLOW. Layout Layout af hjemmesiden laves i Photoshop og siderne inddeles i mapper for bedre overblik. GRAFISK WORKFLOW Opgaven Design og skabelse af website til maler og skrotkunstner Ole Møgelby. Websitet skal virke som en oversigt af Oles værker og som en informationsside. Programvalg Af programmer har

Læs mere

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2.

GRAFISK PRODUKTION WORK- FLOW DREAMWEAVER CS5 DESIGN & KODNING AF LANDING PAGE. a.link, a.hover, a.visited. Wrapper. paragraph CSS. h1 h2. GRAFISK PRODUKTION OG WORK- FLOW CSS Wrapper paragraph h1 h2 DREAMWEAVER CS5 Class Tags Kodning Design a.link, a.hover, a.visited HTML Kundekontakt Komposition og modulopbygning Skelet Pixels Layout Usabillity

Læs mere

Grafisk workflow. Hjemmeside til Bærkompagniet

Grafisk workflow. Hjemmeside til Bærkompagniet Grafisk workflow Hjemmeside til Bærkompagniet Dokumentation Opgaven Bærkompagniet skulle have designet og programmeret et website, hvor de kunne præsentere deres produkter samt mulige forhandlere kunne

Læs mere

Byg et website med Dreamweaver

Byg et website med Dreamweaver Byg et website med Dreamweaver I denne øvelse skal vi opbygge et website for Hotel Holiday i Dreamweaver. Det færdige site kan ses her: http://www.itu.dk/people/khhp/hotel_holidays/velkommen.html Øvelsen

Læs mere

Get Skeleton. Boilerplate for Responsive, Mobile-Friendly Development

Get Skeleton. Boilerplate for Responsive, Mobile-Friendly Development Get Skeleton Boilerplate for Responsive, Mobile-Friendly Development Hvad er Get Skeleton?!? Get Skeleton er en lille samling af små CSS og JS filer, som giver dig adgang til ultra hurtig udvikling af

Læs mere

Brugervejledning til Design Manager Version 1.02

Brugervejledning til Design Manager Version 1.02 Brugervejledning til Design Manager Version 1.02 Indholdsfortegnelse 1. Introduktion... 3 1.1 Det kan du med HostedShop Design Manager... 3 1.2 Feature list... 3 2. Design... 4 3. Filer og CSS... 4 3.1

Læs mere

Dagens program. Domæner. change log- screen shots hver gang I har arbejdet med themet. Arkitekturen bag en wp blog. Hvad er widgets.

Dagens program. Domæner. change log- screen shots hver gang I har arbejdet med themet. Arkitekturen bag en wp blog. Hvad er widgets. Dagens program Har alle fået? Har nogen betalt for meget? Hav jeres koder klar Domæner change log- screen shots hver gang I har arbejdet med themet. Arkitekturen bag en wp blog Hvad er widgets Hvad er

Læs mere

Ordbøgerne.dk. Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06.

Ordbøgerne.dk. Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06. Ordbøgerne.dk Navne: Andreas Foldager og Rasmus Bjerring Pedersen Fag: IT B Lærer: Karl Bjarnason Afleveringsdato: 17-11-06 Side 1 af 35 Indholdsfortegnelse Indledning:...3 Design...4 Visuelt design:...4

Læs mere

GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE

GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE GRAFISK PRODUKTION & WORKFLOW RESPONSIV HJEMMESIDE Opgavebeskrivelse Jeg har valgt at gennemgå min egen responsive hjemmeside, hvor jeg vil fokusere på responsivt design. Layout Min hjemmeside har jeg

Læs mere

Dokumentation. Karen-Louise Fejerskov

Dokumentation. Karen-Louise Fejerskov Dokumentation Grafisk Workflow Et af produkterne, jeg skulle lave, var et redesign af FreQuence s info hjemmeside. A B Punkt 1 Ansvar: Jeg har selv stået for opsætningen af hjemmeside og selv bestemt,

Læs mere

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information

Internet vs WWW. Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information web som medie Internet vs WWW Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information Internet protokoller (forskellige måder at udveksle information

Læs mere

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Redesign af website for bilforhandleren PerB. Opgave har jeg stillet mig selv med det formål at lave en simpel men indbydende udgave af PerB s website.

Læs mere

Mit grafiske workflow inkluderer:

Mit grafiske workflow inkluderer: GRAFISK WORKFLOW Opgave: Opgaven var at producere en bog og et website med temaet stilhistorie. Jeg har valgt at beskrive mit grafiske workflow i produktionen af websitet. Kravene var, at der skulle være

Læs mere

Opret en formular i Dreamweaver

Opret en formular i Dreamweaver Opret en formular i Dreamweaver. Åben det html-dokument hvor du vil have din formular skal være på. 2. Klik i det felt (DIV eller tabel) hvor du vil have din formular skal være. Du kan se du er i feltet

Læs mere

OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre.

OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. WORKFLOW OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. Det er en fiktiv opgave. MIT BIDRAG Jeg stod for al design og

Læs mere

WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling. www.mads-pj.dk/clothesly

WORKFLOW. RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling. www.mads-pj.dk/clothesly WORKFLOW RESPONSIV HJEMMESIDE MED ET FARVETWIST Hjemmesidedesign og udvikling www.mads-pj.dk/clothesly DOKUMENTATION OPGAVE Opgaven jeg stillede mig selv, var at designe og kode et koncept til en webshop

Læs mere

how to save excel as pdf

how to save excel as pdf 1 how to save excel as pdf This guide will show you how to save your Excel workbook as PDF files. Before you do so, you may want to copy several sheets from several documents into one document. To do so,

Læs mere

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW

FORSTÅELSE FOR GRAFISK PRODUKTION OG WORKFLOW Opgaven I AArhus er en fiktiv hjemmeside. Formålet med hjemmesiden, er at Folk som befinder sig i Aarhus kan henvende sig til I AArhus og berette deres synspunkt på Aarhus. Siden henvender sig til unge,

Læs mere

Grafisk workflow. website til duckhead music

Grafisk workflow. website til duckhead music Grafisk workflow website til duckhead music Portfolio h1 Side 18 website til duckhead music Selvom jeg er hos et webbureau, så sidder jeg udelukkende med design, og er derfor ikke kommet til at kode endnu.

Læs mere

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg

Læs mere

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger. Hvilken skærmopløsning? OBS Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS4, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse 1 lært at lave en HTML5-side med afsnit,

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves hjemmeside til et lille privat bageri. Kunden ønsker et overskueligt site. Hjemmesiden skal kort og godt fortælle om Skejby Centrets Bageri og deres produkter og

Læs mere

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE

GRAFISK PRODUKTION PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE GRAFISK PRODUKTION OG WORKFLOW PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE PORTFOLIO DAN KLESSEN BOOSTING BUSINESS MEDIEGRAFIKER SVENDEPRØVE 04 INDHOLDSFORTEGNELSE Dokumentation 05

Læs mere

Opstart. I gang med Dreamweaver. Læs mere om...

Opstart. I gang med Dreamweaver. Læs mere om... Generelle bemærkninger Programmet Dreamweaver har været på markedet i nogle år efterhånden. Den seneste version hedder Dreamweaver CS5, og programmet er på engelsk. Dreamweaver er en såkaldt grafisk editor,

Læs mere

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det?

Web sider. Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? Introduktion: Har du nogensinde spekuleret over, hvordan det verdesomspændende internet virker og hvordan man snakker med det? I dag skal du lære at lave hjemmesider, så du også kan bidrage til at opbygge

Læs mere

Grafisk design OPGAVEBESKRIVELSE

Grafisk design OPGAVEBESKRIVELSE OPGAVEBESKRIVELSE Min opgave var at lave og designe en pakke til s marketing og kommunikationsafdeling MarKom. Pakken består af: et hoved element portfolio hjemmeside communication.madebydelta.com to supplerende

Læs mere

Projekt i Programmering C Menu til hjemmeside.

Projekt i Programmering C Menu til hjemmeside. Projekt i Programmering C Menu til hjemmeside. 10-12-2004 Holstebro HTX Bent Arnoldsen Synopsis. Projektet her er en menu til hjemmesider, som er lavet så den er let at tilrette, når man tilføjer eller

Læs mere

Arbejdsproces. Kvalitetsvurdering

Arbejdsproces. Kvalitetsvurdering REDEGØRELSE Om opgaven FIKTIV OPGAVE: Til denne opgave skal der laves et design til en hjemmeside (one-page) samt designes grafik og knapper. Designet opsættes som HTML / CSS og valideres. Programvalg

Læs mere

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING

GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING GUIDE TIL OPRETTELSE AF SIDER OG INDHOLD I UMBRACO ONLINE BETJENING DANSKE BEDEMÆND august 2014 v1.4 1 P a g e INDHOLDSFORTEGNELSE Adgang... 3 Overordnet om Umbraco... 4 Højreklik muligheder i oversigten...

Læs mere

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette.

Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Lad os lave en hjemmeside. Kikker du på http://www.olehasselbalch.dk, vil du højst sandsynligt se dette. Spørgsmålet er nu, hvordan laver man sådan en side? Du skal have et såkaldt webhotel, hvilket jeg

Læs mere

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen

GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen GRAFISK DESIGN SVENDEPRØVE Dorte Damsgaard Larsen OPGAVE Designforslag til hjemmeside til motorcykelklubben Mc Chaufførerne GRAFISK DESIGN / Dorte Damsgaard Larsen 1/15 DESIGNPROCES Indledende møde med

Læs mere

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside

HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 2, individuel øvelse HTML5 fortsat: Underside, links og tekstelementer på din hjemmeside 1. Lidt om hvad du

Læs mere

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb

Dokumentation. Workflow. Grafisk produktion. Trine Alexandersen 1. hovedforløb Dokumentation Workflow Grafisk produktion Trine Alexandersen 1. hovedforløb Jeg har valgt at vise min egen hjemmeside som workflow. Siden er min e-portfolio som skal vise hvad jeg lærer under min uddannelse

Læs mere

Lyngby Svømmeklub Hjemmeside Guide. Indholdsfortegnelse

Lyngby Svømmeklub Hjemmeside Guide. Indholdsfortegnelse Indholdsfortegnelse Indledning... 2 Hjemmeside struktur... 3 Rettigheder... 4 Opret Nyhed... 6 Opret Kalender Event... 7 Opret Arrangement... 9 Fast side... 10 Forside... 11 Tekst... 11 Billeder... 11

Læs mere

Hvor er mine runde hjørner?

Hvor er mine runde hjørner? Hvor er mine runde hjørner? Ofte møder vi fortvivlelse blandt kunder, når de ser deres nye flotte site i deres browser og indser, at det ser anderledes ud, i forhold til det design, de godkendte i starten

Læs mere

MANUAL - Joomla! Version 1

MANUAL - Joomla! Version 1 MANUAL - Joomla! Version 1 Indhold Retningslinjer for hjemmesiden... 3 Log ind... 3 Ret i en artikel, der allerede er oprettet... 4 Opret ny artikel... 8 a) Skriv direkte i tekstfelt... 9 b) Indsæt tekst

Læs mere

GRAFISK PRODUKTION & WORKFLOW. Endotest website

GRAFISK PRODUKTION & WORKFLOW. Endotest website GRAFISK PRODUKTION & WORKFLOW Endotest website DOKUMENTATION OPGAVEN: Endotest ApS ønskede at redesigne deres hjemmeside, så den fremstår mere professionel og enkel. Derudover skal det nye site præsentere

Læs mere

Flash Logic Free CMS. Manual og brugervejledning

Flash Logic Free CMS. Manual og brugervejledning Flash Logic Free CMS Manual og brugervejledning Indhold: 1. Funktionalitet 2. Fil-oversigt 3. Baggrundsbillede 4. Banner-billede 5. Redigering af tekst 6. Brug af html-tags 7. Web site navn 8. Upload til

Læs mere

Byg web sider. Introduktion:

Byg web sider. Introduktion: Introduktion: Du kender nu nogle enkle HTML tags, så nu er det på tide, at du kommer i gang med at lave din første side! Når du har nogle HTML-sider klar skal du have dem lagt op, så dine venner kan se

Læs mere

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE

GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE GRAFISK WORKFLOW REDESIGN AF HJEMMESIDE 2 REDESIGN AF FUTURECOM BUSINESS SOLUTIONS HJEMMESIDE OPGAVEN Den gamle hjemmeside skulles redesignes da den daværende hjemmeside var forældet (indhold og udseende)

Læs mere

Stilen skulle gerne være feminin og primærfarven rosa.

Stilen skulle gerne være feminin og primærfarven rosa. Grafisk design // Grafisk Design Hjemmesideløsning for syerske Sorami er et enmands-firma med mere end 25 års erfaring, som tilbyder omforandring af tøj og tøj syet efter eget design, samt håndlavede smykker.

Læs mere

PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia

PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia GRAFISKDESIGN PR Offset Dennis Iversen Mediegrafiker Nordre Ringvej 3 7000 Fredericia Trykket hos: PR Offset Papir: 170g multiart silk, omslag 130g multiart silk, indhold Grafisk design Dansk Kedel Kemi,

Læs mere

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

Grafisk. Hjemmesiden er designet til en nyopstartet virksomhed kaldet Tegnestuen M. De har både en arkitektafdeling og en tømrer-/ snedkerafdeling. 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

Læs mere

RIGSPOLITIET. Vejledning i konvertering. fra. Word -dokument. til. PDF-fil. på politi.dk. Rigspolitiets websektion

RIGSPOLITIET. Vejledning i konvertering. fra. Word -dokument. til. PDF-fil. på politi.dk. Rigspolitiets websektion RIGSPOLITIET Vejledning i konvertering fra Word -dokument til PDF-fil på politi.dk Rigspolitiets websektion Indledning Da vi skal leve op til kravene om tilgængelighed på Internettet, skal alle tekster

Læs mere

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4

Indhold. 1 Indledning... 3. 1.1 Kompatible browsere... 3. 2 Log ind i Umbraco... 3. 3 Content-delen... 4. 3.1 Indholdstræet... 4 Indhold 1 Indledning... 3 1.1 Kompatible browsere... 3 2 Log ind i Umbraco... 3 3 Content-delen... 4 3.1 Indholdstræet... 4 3.2 Ændring af indhold... 5 3.3 Tilføjelse af en side/sektion... 6 3.4. At arbejde

Læs mere

det færdige resultat

det færdige resultat grafisk design Under dette fagområde har jeg valgt at præsentere jer for en opgave, jeg har udarbejdet for virksomheden Breinholt. Breinholt er en nyopstartet virksomhed i Odense, der tilbyder spirituel

Læs mere

Amara. Lav selv flash-film til SkoleIntra. Version: August 2012

Amara. Lav selv flash-film til SkoleIntra. Version: August 2012 Amara Lav selv flash-film til SkoleIntra Version: August 2012 Indholdsfortegnelse Hvem er Amara?...4 Hvor får jeg programmet fra?...4 Installer programmet...5 Første skridt...8 Layout...9 Type...11 Texts...12

Læs mere

Grafisk Workflow Personligt website

Grafisk Workflow Personligt website Grafisk Workflow Personligt website Andreas Ernst Tørnqvist Grafisk Workflow Redegørelse Opgaven Opgaven er en personlig hjemmeside lavet i min fritid. Siden skal bruges som en reklamesøjle for potientelle

Læs mere

PHP Quick Teknisk Ordbog

PHP Quick Teknisk Ordbog PHP Quick Teknisk Ordbog Af Daniel Pedersen PHP Quick Teknisk Ordbog 1 Indhold De mest brugte tekniske udtryk benyttet inden for web udvikling. Du vil kunne slå de enkelte ord op og læse om hvad de betyder,

Læs mere

Video obligatorisk øvelse

Video obligatorisk øvelse Video obligatorisk øvelse Denne obligatoriske øvelse går ud på at bearbejde en video og lægge den ud på jeres hjemmeside. Arbejdet med videoen laves i Windows Movie Maker, der findes i start-menuen under

Læs mere

PRODUKTION OG WORKFLOW

PRODUKTION OG WORKFLOW PRODUKTION OG WORKFLOW INTERN PROJEKTSTYRING PRODUKTION OG WORKFLOW Majken Cramer, Hovedforløb 2 Aarhus Tech, september 2012 HVAD GÅR OPGAVEN UD PÅ JULI 2012. Jeg har stået for projektstyringen på intranettet

Læs mere

Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst

Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst Konstruktion af websites - 1. kursusgang Øvelse 1 opsætning af tekst Lav ved hjælp af teksteditor og browser en webside, der indeholder elementer som den herunder - tilføj desuden din udgave af hjemmeside

Læs mere

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow

REDESIGN AF GRAFISK FORUMS HJEMMESIDE. Grafisk Workflow Grafisk Workflow REDESIGN AF GRAFISK FORUMS HJEMMESIDE Før Efter REDEGØRELSE OPGAVEN Da jeg ikke har noget med web at gøre på min elevplads, opfandt jeg en fiktiv opgave - nemlig at redesigne Grafisk Forums

Læs mere

Datalogi HTML Aarhus Katedralskole

Datalogi HTML Aarhus Katedralskole HTML HTML er en forkortelse for HyperText Markup Language og er således et markeringssprog og ikke et programmeringssprog! HTML bruges til at opmærke indholdet på en hjemmeside, og skal ses som en måde

Læs mere

Extension udvikling i Mozilla Firefox. Henrik Gemal

Extension udvikling i Mozilla Firefox. Henrik Gemal Extension udvikling i Mozilla Firefox Henrik Gemal Side 1 Hvem er jeg? Web udvikler hos TDC Laver TDC.dk og TDCOnline.dk Laver HTML, CSS, PHP Med i Mozilla projektet i mange år Udviklet et par extensions

Læs mere

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2

GRAFISK WORKFLOW. Kasper Staal - Portfolio - H2 GRAFISK WORKFLOW Kasper Staal - Portfolio - H2 Opgaven Denne opgave bestod i at design et website til min egen virksomed 3DService.dk. Websitet skulle være responsivt, og indeholde de mest gængse informationer

Læs mere

Vejledning til at tjekke om du har sat manuel IP på din computer.

Vejledning til at tjekke om du har sat manuel IP på din computer. Indhold Vejledning til at, komme på nettet. (DANSK)... 2 Gælder alle systemer.... 2 Vejledning til at tjekke om du har sat manuel IP på din computer.... 2 Windows 7... 2 Windows Vista... 2 Windows XP...

Læs mere

Designmanual for websider

Designmanual for websider Designmanual for websider 31. marts 2009 Version 1.1. Denne manual beskriver de gældende retningslinjer for Aalborg Universitets websider. Det vil sige websider der benytter aau.dk i domænenavnet er omfattet

Læs mere

portfolio GRAFISK WORKFLOW

portfolio GRAFISK WORKFLOW Grafisk Workflow Opgaven Der skal laves nyt hjemmesidedesign til Inhouse Graphic skolepraktik på Aarhus Tech. Hjemmesiden skal kort og godt fortælle om de elever, der arbejder i skolepraktikken og om deres

Læs mere

KODNING AF RESPONSIV DESIGN

KODNING AF RESPONSIV DESIGN Grafisk Workflow REDEGØRELSE GRAFISK WORKFLOW 39 OPGAVEN Frk. Nielsens rengøringsfirma kom til os for at få lavet ny hjemmeside. Hun var træt af den gamle, da hun ikke kunne rette i indholdet, og valgte

Læs mere

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E.

Portfolie Redesign. www.gaardbodesign.dk. Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013. Jens Jákup E. Portfolie Redesign www.gaardbodesign.dk Multimediedesigner CPH Business 1. sem. eksamensprojekt - Clmul-b12e Januar 2013 Jens Jákup E. Gaardbo indholdsfortegnelse design... gestaltlove... opbygning...

Læs mere

Martin Møller Web1b Tirsdag den 19 juni 2012

Martin Møller Web1b Tirsdag den 19 juni 2012 Martin Møller Web1b Tirsdag den 19 juni 2012 Projektbeskrivelse 3 Tema valg 3 Budskab 3 Afsender 4 Målgruppe 4 Kommunikations mål 4 Skitser 6 Layout index 7 Layout Kulturliv 8 Layout Gratis glæder 9 Layout

Læs mere

Oversigt over formateringsmærker i Microsoft Word

Oversigt over formateringsmærker i Microsoft Word Oversigten på de følgende sider viser størstedelen af de forskellige formateringsmærker, der kan optræde i et Microsoft Word-dokument. Formateringsmærker vises kun på skærmen de kommer ikke med i udskrift.

Læs mere

Mindmapping med FreeMind. En Introduktion til programmet FreeMind

Mindmapping med FreeMind. En Introduktion til programmet FreeMind En Introduktion til programmet FreeMind Jan Leffers 2006 Indholdsfortegnelse Indledning...2 Hvad er et mindmap...2 Mindmap guidelines...3 Download og installation...3 Kom hurtigt i gang...4 Det første

Læs mere

Drejebog til tractorpulling.dk

Drejebog til tractorpulling.dk Drejebog til tractorpulling.dk Generelt På hjemmesiden benyttes følgende som standard: - Skrifttype: Verdana - Skriftstørrelse: 12px / 9pt. 4. oktober 2011 Moskjær Marketing Falkevej 4 DK-6920 Videbæk

Læs mere

Grafisk design. Ide. Designprocess. Målgruppe

Grafisk design. Ide. Designprocess. Målgruppe Ide Designprocess I denne opgave har jeg udviklet et website for et feriehus. Kunden ønsker et site, som både fungere privat, men også som offentlig hjemmeside. Hele site skal være på dansk, tysk og engelsk.

Læs mere

Manual for Synkron hjemmesider

Manual for Synkron hjemmesider Manual for Synkron hjemmesider Denne manual tilhører: Brugernavn: (username) Adgangskode: (password) 1 Start med sitetræet: Sitetræet er centralt. Det er her, dit website er. Det er her, du bygger dine

Læs mere

Nyhedsbrev april: spørgeskemaundersøgelse

Nyhedsbrev april: spørgeskemaundersøgelse #ChronoContact_Survey { margin-bottom: 10px; margin-left: 0px;.form_element { float: left; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin-bottom: 8px; margin-left: 0; margin-top: 8px;

Læs mere

Fremstilling af en hjemmeside

Fremstilling af en hjemmeside Fremstilling af en hjemmeside Du kan vise en hjemmeside på to måder. Enten ved at lade din computer virke som en server, eller ved at købe dig et såkaldt webhotel. Dette er en nem måde, og det er ikke

Læs mere

Terese B. Thomsen 1.semester Formidling, projektarbejde og webdesign ITU DMD d. 02/11-2012

Terese B. Thomsen 1.semester Formidling, projektarbejde og webdesign ITU DMD d. 02/11-2012 Server side Programming Wedesign Forelæsning #8 Recap PHP 1. Development Concept Design Coding Testing 2. Social Media Sharing, Images, Videos, Location etc Integrates with your websites 3. Widgets extend

Læs mere

Grafik og billede. I dette fiktive projekt, har jeg valgt at lave et kreativt billede, som gerne skulle vise mine færdigheder i photoshop.

Grafik og billede. I dette fiktive projekt, har jeg valgt at lave et kreativt billede, som gerne skulle vise mine færdigheder i photoshop. GRAFIK & BILLEDE GRAFIK & BILLEDE Grafik og billede } I dette fiktive projekt, har jeg valgt at lave et kreativt billede, som gerne skulle vise mine færdigheder i photoshop. Opgaven Programvalg Photoshop

Læs mere

Indholdsfortegnelse. Forord

Indholdsfortegnelse. Forord Indholdsfortegnelse Forord i Indholdsfortegnelse iii Indledning ix 1. Introduktion til HTML 1 Websider laves med HTML 2 Websider læses med en browser 2 Browserspecifikke markører 3 HTML-dokumentet 4 Hvad

Læs mere

BANNERSPECIFIKATIONER - MOBIL FOR BERLINGSKE MEDIA 2015

BANNERSPECIFIKATIONER - MOBIL FOR BERLINGSKE MEDIA 2015 FOR BERLINGSKE MEDIA 2015 FOR BERLINGSKE MEDIA 2015 Indholdsfortegnelse: Side 3: Retningslinjer for kreativer til mobil Side 4: Tabel over formater Side 5: Cube 2 FOR BERLINGSKE MEDIA 2015 Kilde: Danske

Læs mere

Annemette Søgaard Hansen/www.dinwebvejleder.dk

Annemette Søgaard Hansen/www.dinwebvejleder.dk Google Docs Dokumenter Indholdsfortegnelse Værktøjer... Side 3 Menuer... Side 5 Opgave... Side 8 Få adgang til filerne fra din computer... Side 16 Vejledende løsning... Side 17 GoogleDocs Dokumenter 2

Læs mere

CMS - BRUGERMANUAL CMS

CMS - BRUGERMANUAL CMS CMS - BRUGERMANUAL LOG PÅ ADMINISTRATION Sådan kommer du i gang! For at logge ind i dit nye CMS-administrationsmodul skal du efter dit domæne skrive: admin. Eks.: www.dit_domæne.dk/admin Første gang du

Læs mere

Guide til Umbraco CMS

Guide til Umbraco CMS web Guide til Umbraco CMS Indhold Indledning 3 Kompatible browsere 3 Log ind i Umbraco 4 Content-delen 5 Indholdstræet 5 Tilføjelse af en side/sektion 7 Sortering af indhold 12 Galleri 14 Mediebibliotek

Læs mere

WORKFLOW & GRAFISK PRODUKTION

WORKFLOW & GRAFISK PRODUKTION Opgavebeskrivelse Kunde: Gorm Larsen & Zornig (GLZ) Websitet Social media cheat sheet er en oversigt over forskellige sociale mediers opsætning. Formålet er altså at gøre det nemt at finde de mål, der

Læs mere

Nvu hjemmesider hurtigt og let

Nvu hjemmesider hurtigt og let Nvu hjemmesider hurtigt og let Brugervenlig og grafisk præsentation af textdokumenter var en af de store udfordringer indenfor softwareudvikling i slutningen af 1980erne. Tim Berners-Lee fra CERN udvikler

Læs mere

Manual CoffeeCup Visitkort konsulenter

Manual CoffeeCup Visitkort konsulenter Manual CoffeeCup Visitkort konsulenter Indhold 2 Start Lidt om sidens layout 3 Åbn den downloadede fil i CoffeeCup og gem den som dit eget projekt 3 Knapperne Ring og Mail Indsæt nyt link på Ring og mail

Læs mere

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg

HHBR. Design. Kvalitets vurdering. Opgaven. Målgruppe og Budskab. De Grafiske valg Opgaven Der skal designes en hjemmeside til en pensioneret revisor, som ønsker at starte en fritids beskæftigelse op, som privat revisor. Han Ønsker en hjemmeside der skal kort fortælle om hans forretning.

Læs mere

GRAFISK WORKFLOW Hjemmesidedesign

GRAFISK WORKFLOW Hjemmesidedesign GRAFISK WORKFLOW www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline Færdige produkt www.mediegrafiker-ats.dk/12gf32med8b/stil/caroline

Læs mere

Qbrick s krav til video filtyper

Qbrick s krav til video filtyper Indhold Qbrick s krav til video filtyper... 1 Krav til ordningen/området... 1 Qbrick s krav til video leverandør... 1 Video og billede størrelser i WCM:... 1 Upload en video... 2 Trin 1: Mediefiler...

Læs mere

Onsdags-workshops foråret 2014

Onsdags-workshops foråret 2014 Onsdags-workshops foråret 2014 Hver onsdag kl.15-17 Alle workshops er gratis 15. Januar: Google konto til meget mere end g-mail 22. januar: Google Chrome browseren fra Google 29. januar: NemID, borger.dk

Læs mere

GRAFISK WORKFLOW. 1 Grafisk workflow

GRAFISK WORKFLOW. 1 Grafisk workflow GRAFISK WORKFLOW 1 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet

Læs mere

Siteloom manual for Comwells webredaktører

Siteloom manual for Comwells webredaktører Siteloom manual for Comwells webredaktører Generelt Hvad er SL: SiteLoom er redigeringsprogrammet bag comwell.com websitet, som gør det muligt for folk uden programmeringskundskaber, at redigere og tilføje

Læs mere

RefWorks en vejledning fra UCL Biblioteket. Indholdsfortegnelse

RefWorks en vejledning fra UCL Biblioteket. Indholdsfortegnelse Indholdsfortegnelse Hvad er RefWorks?... 2 Opret dig som bruger... 2 Inden du går i gang... 3 Klargøring af computer til download af Write-N-Cite v. 4.2... 3 Installation af Write-N-Cite... 4 Installation

Læs mere

Procesbeskrivelse - Webprogrammering

Procesbeskrivelse - Webprogrammering Procesbeskrivelse - Webprogrammering Indholdsfortegnelse Forudsætninger... 1 Konceptet... 2 Hjemmesiden... 2 Server-side... 3 Filstrukturen... 3 Databasehåndtering og serverforbindelse... 4 Client-side...

Læs mere

WINDCHILL THE NEXT STEPS

WINDCHILL THE NEXT STEPS WINDCHILL THE NEXT STEPS PTC/user, 4. marts 2015 Jens Christian Jensen, Econocap Agenda Windchill the next steps Bliv opdateret og inspireret til at se hvor Windchill kan hjælpe dig med andet end blot

Læs mere

GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE

GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE GRAFISK DESIGN DET DIGITALE PRODUKT - DESIGN AF MIN PRIVATE HJEMMESIDE Det var på tide med en ny hjemmeside til privat brug. Jeg valgte at starte helt fra bunden i stedet for at ændre på noget eksisterende.

Læs mere