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 OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY

GRAFISK WORKFLOW OPGAVEBESKRIVELSE KVALITETSVURDERING HJÆLPEMIDLER BROWSER BRUGERVENLIGHED/USABILLITY GRAFISK WORKFLOW OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden ikke havde noget ønske om selv

Læs mere

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. GRAFISK WORKFLOW Grafisk workflow Beskrivelse Opgaven Design af website til Tipsbladet Fokus, som er noget, jeg selv har fundet på. Det er tænkt som et alternativ til Tipsbladet.dk, hvor der på Tipsbladet

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

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS

Nolde Museet. I gang med Dreamweaver. Opgave. Opgavebeskrivelse. Layout. Mål og CSS Opgavebeskrivelse Lav en webside om i Sønderjylland. Opgaven fører dig igennem de basale ting, hvad angår opbygningen af en side med CSS. Der er ikke tale om et komplet site, men du kan bruge opgaven som

Læs mere

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM

GRAFISK WORKFLOW GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM GRAFISK WORKFLOW DIGITAL KOMMUNIKATION OLEMOGELBY.COM OPGAVEN Redesign af Ole Møgelbys hjemmeside, der efter stor succes med sine værker, gerne vil have frisket udtrykket lidt op. Billedsiderne skal udvides

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

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

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

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

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

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow

Grafisk workflow. Maria Clausen Svendeportfolio Grafisk workflow Grafisk workflow Maria Clausen Svendeportfolio Grafisk workflow OPGAVEN Kunden har stiftet et nyt firma som hedder Wood id, som sælger lamper, møbler og tilbehør lavet i kvalitets træ. Kunden ville gerne

Læs mere

CSS introduktion: Tekstformatering med CSS

CSS introduktion: Tekstformatering med CSS Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 3, individuel øvelse CSS introduktion: Tekstformatering med CSS 1. Lidt om hvad du har lært Du har i øvelse

Læs mere

5 ARBEJDE MED EDITOREN

5 ARBEJDE MED EDITOREN 5 ARBEJDE MED EDITOREN Editor (eller Rich Tekst Editor) er et indbygget indholdsredigerings værktøj, hvor man uden nogen kendskab til HTML kodning kan skrive tekst, indsætte billeder, videoer og links.

Læs mere

GRAFISK DESIGN. Min personlige e-portfolio

GRAFISK DESIGN. Min personlige e-portfolio GRAFISK DESIGN Min personlige e-portfolio 2 OPGAVEBESKRIVELSE Produkt: E-portfolio Farve: RGB Programmer: Brackets, Photoshop og Illustrator Min personlige e-portfolio er udarbejdet som et led i min uddannelse

Læs mere

Grafisk workflow. Se siden her: www.cormas.dk

Grafisk workflow. Se siden her: www.cormas.dk Grafisk workflow Se siden her: www.cormas.dk Dokumentation 4 Procesbeskrivelse 5 Inspirationssøgning 6 Skitser 8 Layout i Photoshop 9 Farver 10 Font 11 Flowchart 12 Wireframe 13 Storyboard 14 kontakt.html

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

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed

Grafisk Redegørelse Opgaven Programvalg Kvalitetsvurdering Målgruppe Arbejdsproces Kvalitet Komposition og layout Brugervenlighed Redegørelse Grafisk Opgaven At redesigne en hjemmeside for AGF fanclub, som har et mere moderne look og et nyhedsarkiv som er let oversskueligt. Hjemmesiden er en opgave jeg selv har stillet mig og kunne

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

Se hjemmesiden på:

Se hjemmesiden på: Se hjemmesiden på: www.share-connect.dk Dokumentation Opgavebeskrivelse Det lokale erhvervsnetværk, Share & Connect skulle have designet og programmeret sin nye hjemmeside, hvor de ville kunne have mulighed

Læs mere

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup

Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Niels Sundstrup Webteknologi evalueringsopgave Vinter 2011-2012 - Niels Sundstrup Webteknologi - Carl- Henrik Nielsen - Syddansk Universitet, Kolding - Udlevering: 12. januar 2012 Aflevering: 19. januar

Læs mere

Oversigt HTML5 nye tags til sideopbygning

Oversigt HTML5 nye tags til sideopbygning HTML5 er udviklet af WHATWG Oversigt HTML5 nye tags til sideopbygning (Web Hypertext Application Technology Working Group) En

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

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

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

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se. Solsystemet lavet af Jesper Kjær Webintegrator i Kastrup Tekniske Skole Grundforløbsprøve 2014 Opgave: Vores solsystem Onsdag 23 april til onsdag 7 maj Her ses et screenshot af websitet solsystemet i menuen

Læs mere

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL

GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL GRAFISK WORKFLOW HJEMMESIDE EL FIRMA ANDERSEN EL OPGAVEBESKRIVELSE Min kunde er en ung mand som ønskede at få lavet en hjemmeside til hans fremtidig firma, den skulle være responsiv og simpel. Da kunden

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

CSS fortsat: Boksmodel, floating & positionering

CSS fortsat: Boksmodel, floating & positionering Webdesign og webkommunikation, formiddagshold (hold 1), IT Universitetet, forår 2012. Øvelse 4, individuel øvelse CSS fortsat: Boksmodel, floating & positionering 1. Lidt om hvad du har lært Du har i øvelse

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

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

Om styles / typografier / typografiark / stylesheets

Om styles / typografier / typografiark / stylesheets Om styles / typografier / typografiark / stylesheets (dvs. Cascading StyleSheet ~ CSS) CSS er et sprog til at definere layout på HTML-dokumenter. CSS indeholder flere muligheder for layout end HTML og

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

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

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

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

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

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

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger

GRAFISK PRODUKTION OG WORKFLOW. Hjemmeside til Team Brügger GRAFISK PRODUKTION OG WORKFLOW Hjemmeside til Team Brügger DITTE MADSEN - SVENDEPRØVE - 2015 KUNDEPROFIL Team Brügger er en frisørsalon i Aars. Indehaveren Gitte Brügger startede salonen op sammen med

Læs mere

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE

Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Birgitte Bremholm Persson MG21 svendeprøve 2015 MEDIEGRAFIKERSVENDEPRØVE Grafisk produktion og workflow Grafisk produktion og workflow l 12 Pedersholmparken 6 DK 3600 Frederikssund Tlf.: +45 27 57 7164

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

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site.

Fase Forklaring Navigation. Mappen skal indeholde alle elementer til dit site. 1 Opstart af et site Opret hovedmappen Opret grafikmappen Opret dit site Mappen skal indeholde alle elementer til dit site. Opret en mappe indeni den første og kald den grafik. Heri lægges alle dine grafikfiler.

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

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

StarWars-videointro. Start din video på den nørdede måde! Version: August 2012

StarWars-videointro. Start din video på den nørdede måde! Version: August 2012 StarWars-videointro Start din video på den nørdede måde! Version: August 2012 Indholdsfortegnelse StarWars-effekt til videointro!...4 Hent programmet...4 Indtast din tekst...5 Export til film...6 Avanceret

Læs mere

KT OR LOW PRODUKTION // WORKFLOW

KT OR LOW PRODUKTION // WORKFLOW PR D O U ION KT // W KFKF OR LOW PRODUKTION // WORKFLOW // WORKFLOW HJEMMESIDE / REDEGØRELSE / IDÉ, FARVE, FONT OG GRAFIK / SKITSER OG FLOWCHART / SKELET / STORYBOARD / CSS HVAD? Opgaven er en fiktiv hjemmeside

Læs mere

Active Builder - Brugermanual

Active Builder - Brugermanual Active Builder - Brugermanual Version: Release 2.0 Sprog: Dansk Copyright 2014 - Talk Active ApS INDHOLDSFORTEGNELSE INDHOLDSFORTEGNELSE... 2 1. HURTIGT OVERBLIK... 4 1.1 Vælg URL:... 4 1.2 Vælg en skabelon:...

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

VDI Manual v. 5 Indhold

VDI Manual v. 5 Indhold VDI Manual v. 5 Indhold VDI Manual v. 5... 1 VDI Windows 7 Manual... 2 VDI Windows xp Manual... 3 Andre Browsere Manual... 4 VDI Andoid Manuel opsætning af Citrix Reciever... 6 Automatisk opsætning af

Læs mere

VPN VEJLEDNING TIL MAC

VPN VEJLEDNING TIL MAC VPN VEJLEDNING TIL MAC MAC OS X 1 VPN VEJLEDNING TIL MAC Formålet med en VPN forbindelse er, at du kan tilgå nogle af Aarhus Universitets services hjemmefra, som ellers kun er tilgængelige, når du er på

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

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

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

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

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

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

grafisk workflow Madmagasinet

grafisk workflow Madmagasinet grafisk workflow Madmagasinet Dokumentation Opgaven Madmagasinet skal have et website som er responsive, således deres brugere har en side som er optimeret til de forskellige platformer, hvorpå deres site

Læs mere

GRAFISK PRODUKTIONSFORSTÅELSE

GRAFISK PRODUKTIONSFORSTÅELSE GRAFISK PRODUKTIONSFORSTÅELSE BRILLIANT BIKINIES WEBSITE MARÍ DYRMOSE OPGAVEN OPGAVEBESKRIVELSE Brilliant Bikini kompagniet skulle have designet og programmeret en website, hvor de kunne præsentere deres

Læs mere

Sabine Puk Sørensen Svendeprøve portfolio

Sabine Puk Sørensen Svendeprøve portfolio Sabine Puk Sørensen Svendeprøve portfolio 2016 Grafisk workflow Svendeprøve Kvalitetsvurdering Hjemmesiden fungere som den skal, og kunden er meget glad for resultatet. Siden er simpel, men giver den ønskede

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

PRODUKTION & WORKFLOW ASSISTENT PRØVE CARLO ANTONIO RATTÀ /// BUON APPETITO MAGASIN

PRODUKTION & WORKFLOW ASSISTENT PRØVE CARLO ANTONIO RATTÀ /// BUON APPETITO MAGASIN ASSISTENT PRØVE CARLO ANTONIO RATTÀ /// BUON APPETITO MAGASIN BUON APPETITO MAGASIN BUON APPETITO MAGASIN TIL IPAD LAV EN PIZZA the italian way INSALATA TRICOLORE 5 RED BULL COCKTAILS Hurtig og lækker

Læs mere

Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat

Projekt-studieweb. Om kommunikationsteorierne. Morten, Jacob, Kristian og Cihat Projekt-studieweb Om kommunikationsteorierne Morten, Jacob, Kristian og Cihat Gestaltlovene Loven om nærhed Loven om lukkethed Loven om lighed Loven om forbundethed Loven om fortsættelse Loven om figur

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

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

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

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

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

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

Grundformen for et website: aside, tabeller, formularer og tekstformatering

Grundformen for et website: aside, tabeller, formularer og tekstformatering Design til digitale kommunikationsplatforme Formiddag (Hold 1), IT Universitetet, Efterår 2013 Øvelse 2, individuel øvelse Grundformen for et website: aside, tabeller, formularer og tekstformatering 1.

Læs mere

Formålet med denne Pixibog er at gøre admin-delen på Kertemindesejlerne.dk

Formålet med denne Pixibog er at gøre admin-delen på Kertemindesejlerne.dk Pixibog Formålet med denne Pixibog er at gøre admindelen på Kertemindesejlerne.dk forståelig let at bruge let læselige let tilgængelige overskuelig for almindelige mennesker, samt at angive en standard

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

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

Tillykke Med Fødselsdagen

Tillykke Med Fødselsdagen HTML & CSS 1 Tillykke Med Fødselsdagen All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register

Læs mere

GRAFISK PRODUKTION & WORKFLOW

GRAFISK PRODUKTION & WORKFLOW GRAFISK PRODUKTION & WORKFLOW CASPER GEIPEL JENSEN INDHOLDSFORTEGNELSE OPGAVEBESKRIVELSE...3 MÅLGRUPPE...3 KUNDEKRAV...3 SPECIFIKATIONER...3 BRUGTE TEKNIKKER...3 PROCESSEN...4 INSPIRATION...4 STYLETILE:

Læs mere

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN

Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN 2015 Bootstrap Tutorial LAV EN SIMPEL RESPONSIVE SIDE MED BOOTSTRAP MATHIAS HERSKIND GROTRIAN I denne tutorial kommer du til at I denne tutorial vil du lære hvad Bootstrap er, hvordan det fungerer og hvordan

Læs mere

ØVELSE 11: TABLES & FORMS (Individuel)

ØVELSE 11: TABLES & FORMS (Individuel) ØVELSE 11: TABLES & FORMS (Individuel) 1. Målsætning I denne øvelse kommer du til at arbejde med to forskellige områder: Forms (formularer) og tables (tabeller) (kapitel 8+9 i LWD.) Du kommer blandt andet

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

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

Vejledning til Blackboards portfolio værktøj

Vejledning til Blackboards portfolio værktøj Vejledning til Blackboards portfolio værktøj Brug denne vejledning, når du skal udarbejde din undervisningsportfolio i Blackboards portfolio værktøj. Ved at følge alle trinene nedenfor får du udarbejdet

Læs mere

GRAFISK WORKFLOW GRAFISK WORKFLOW

GRAFISK WORKFLOW GRAFISK WORKFLOW Opgaven At lave en ny hjemmeside til tekniske skolers sportslege. Den gamle var rodet og uoveskuelig. Det vigtigste var at rydde op, samt holde en rød tråd til logo og indbydelsen. Afsender Lærerne på

Læs mere

Vejledning. Indhold. Side 1

Vejledning. Indhold. Side 1 Indhold HTML-faneblade... 2 Sådan tilføjer du et HTML-faneblad til din Facebook side.... 3 Sådan redigerer du et HTML-faneblad på din Facebook side.... 5 Sådan deler du fanebladet... 10 Side 1 HTML-faneblade

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

Dannelse af PDF dokumenter

Dannelse af PDF dokumenter Dannelse af PDF dokumenter Indhold Dannelse af PDF-dokumenter i Phd Planner... 2 Valg af vedhæftninger i PDF dokumentet... 2 Valg af skabelon for PDF dokumentet... 3 Når PDF filen er dannet... 5 Gem PDF

Læs mere

AFTER EFFECTS DET GRUNDLÆGGENDE INTERFACE

AFTER EFFECTS DET GRUNDLÆGGENDE INTERFACE AFTER EFFECTS DET GRUNDLÆGGENDE INTERFACE PROJEKT VINDUE KOMPOSITIONS OMRÅDE TIDS KONTROL EFFEKTER LAGSTRUKTUR TIDSLINJE AFTER EFFECTS PROJEKT VINDUET Når filerne er importeret, kan de frit omdøbes og

Læs mere

Lav din egen forside i webtrees

Lav din egen forside i webtrees Lav din egen forside i webtrees Du behøver ikke at kunne kode eller gøre noget advanceret for at designe din helt egen forside i webtrees. Alt du skal gøre er bare at gøre brug af den indbygget editor.

Læs mere

3. PROJEKT, 2 SEMESTER

3. PROJEKT, 2 SEMESTER 3. PROJEKT, 2 SEMESTER Bruger undersøgelse, af sociale medie. KENDSKAB TIL OG BRUG AF ONLINE SOCIALE MEDIER FORENINGEN AF DANSKE INTERAKTIVE MEDIER, FÅET TIL OPGAVE AT AFDÆKKE DANSKERNES BRUG AF SOCIALE

Læs mere

Aptana editor til MAC og Windows

Aptana editor til MAC og Windows 1 Aptana editor til MAC og Windows http://aptana.com/products/studio3/download For at downloade Mac versionen skal du klikke på : Customize Your Download og der efter klikke på MAC OS X. Indtast navn og

Læs mere

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1

GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW PORTFOLIO NIKLAS POULSEN H1 GRAFISK WORKFLOW DOKUMENTATION OPGAVEN Denne opgave er lavet som en fiktiv opgave. Opgaven er lavet for et fiktivt firma, som tilbyder personlig fitness træning.

Læs mere

Brugermanual 3D Webcam

Brugermanual 3D Webcam Brugermanual 3D Webcam 2 Indholdsfortegnelse Kort introduktion... 4 Installation... 4 Hardware Installation... 4 Software Installation... 5 Forklaring til knapper... 6 Linse Focus... 6 3D Justering...

Læs mere

WORKFLOW & PRODUKTION

WORKFLOW & PRODUKTION OPGAVE Jeg har lavet et fiktiv website for en hundekennel. Det er mit bud på hvordan sådan en eventuelt kan se ud. PROGRAMMER Photoshop Dreamweaver Illustrator WORKFLOW & PRODUKTION KENNEL BISCO Dokumentation

Læs mere

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt.

Efterlyst! Introduktion HTML & CSS. I dette projekt skal du lære, hvordan du laver din egen plakat. Arbejdsliste. Test dit Projekt. HTML & CSS 1 Efterlyst! All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Introduktion

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