De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 11: SVG.

Verwante presentaties


Presentatie over: "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 11: SVG."— Transcript van de presentatie:

1 Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 11: SVG

2 Webtechnologie Labo 1 2 Inhoud Algemeen SVG vormen Filters Gradients

3 Webtechnologie Labo 1 3 Algemeen: wat Scalable Vector Graphics nieuw grafisch bestandsformaat voor 2D graphics + webtaal gebaseerd op XML staat toe om vanuit real-time gegevens dynamisch hoge-kwaliteitsbeelden (vectorieel) te genereren gegevensgestuurd interactief gepersonaliseerd

4 Webtechnologie Labo 1 4 Algemeen: structuur Als een standalone document: Maak een nieuw bestand aan in notepad Sla het bestand op als een SVG – bestand Het SVG – bestand kan geopend worden in een browser Er moet een viewer geïnstalleerd zijn Standalone SVG – bestanden worden meestal niet herkend door zoekmachines

5 Webtechnologie Labo 1 5 Algemeen: structuur Ingevoegd in een xHTML document Er moet ook een viewer geïnstalleerd worden main.html main.html De xHMTL pagina wordt wel herkend door zoekmachines Er kunnen ook andere objecten zoals muziek, flash,… ingevoegd worden

6 Webtechnologie Labo 1 6 Opmerking Firefox Om svg bestanden uit te voeren in firefox: Kopieer NPSVG6.dll en NPSVG6.zip uit de map C:\Program Files\Common Files\Adobe\SVG Viewer 6.0\Plugins Plak ze in de map plugins van firefox

7 Webtechnologie Labo 1 7 Algemeen: voorbeeld

8 Webtechnologie Labo 1 8 Algemeen: voorbeeld 1) Bevat de processing instructie 2) Verwijst naar een externe DTD ( wat is toegelaten en wat niet) 3) Het document begint met de tag. Deze tag heeft verschillende attributen 4) Het element geeft aan dat er een cirkel moet getekend worden. De attributen bepalen hoe die cirkel er uit moet zien 5) Het document wordt afgesloten met de tag

9 Webtechnologie Labo 1 9 Verschillende vormen: overzicht Door het gebruik van tags kunnen verschillende vormen getekend worden: Rechthoek Cirkel Ellips Lijn ( Polygon ) ( Polyline ) ( Path )

10 Webtechnologie Labo 1 10 Verschillende vormen: rechthoek

11 Webtechnologie Labo 1 11 Verschillende vormen: rechthoek Uitleg code er moet een rechthoek getekend worden width="300px” height="100px" bepalen de afmetingen van de rechthoek style=“ “ vanaf hier worden de opmaak properties meegegeven fill:rgb(0,0,255) bepaalt de kleur van de rechthoek

12 Webtechnologie Labo 1 12 Verschillende vormen: rechthoek Kleuren kunnen op 3 manieren worden weergegeven: Rgb(255,0,0) #FF0000 Red Stroke-width: bepaalt de dikte van de rand Stroke: bepaalt de kleur van de rand

13 Webtechnologie Labo 1 13 Verschillende vormen: rechthoek Andere attributen X en Y: bepalen de positie van de rechthoek op het scherm Fill-opacity: bepaalt de opacity voor de rechthoek zelf Stroke-opacity: bepaalt de opacity voor de rand Opacity: bepaalt de transparantie voor het volledige object. Bevat altijd een waarde tussen 0 en 1

14 Webtechnologie Labo 1 14 A-Oefening 1

15 Webtechnologie Labo 1 15 A-Oefening 1 Maak een rechthoek van 300px op 200px De positie is 200px van de top en 200px van de linkermarge De rechthoek heeft een rode kleur en een zwarte rand van 2px De opacity bedraagt 0,7

16 Webtechnologie Labo 1 16 A-Oefening 1

17 Webtechnologie Labo 1 17 A-Oefening 1 Maak een tweede rechthoek van 50px op 70px Plaats deze in de rode rechthoek Geef hem een gele kleur en een dikke zwarte rand

18 Webtechnologie Labo 1 18 Verschillende vormen: cirkel

19 Webtechnologie Labo 1 19 Verschillende vormen: cirkel Uitleg code Er moet een cirkel getekend worden cx="100px" cy="50px“ Bepalen de positie van het middelpunt van de cirkel op het scherm r=“40px” Bepaalt de radius van de cirkel Stroke, stroke-width en fill Bepalen de opmaak van de cirkel. Ze kunnen op verschillende manieren worden ingegeven. Vergelijk met de opmaak van de rechthoek

20 Webtechnologie Labo 1 20 Verschillende vormen: cirkel

21 Webtechnologie Labo 1 21 A-Oefening 2

22 Webtechnologie Labo 1 22 A-Oefening 2 Teken een zwarte cirkel met een radius van 5px Positioneer de cirkel tegen de rechterzijde van de gele rechthoek

23 Webtechnologie Labo 1 23 Verschillende vormen: ellips

24 Webtechnologie Labo 1 24 Verschillende vormen: ellips Uitleg code Er moet een ellips getekend worden Een ellips is in feite een cirkel met 2 verschillende radiussen rx en ry Alle andere eigenschappen zijn identiek aan de cirkel

25 Webtechnologie Labo 1 25 A-Oefening 3

26 Webtechnologie Labo 1 26 A-Oefening 3 Voeg 2 ellipsen toe Positioneer deze ellipsen langs de linkerzijde en de rechterzijde van de gele rechthoek Geef ze een witte achtergrondkleur met een zwarte rand van 2px dik

27 Webtechnologie Labo 1 27 Verschillende vormen: lijn

28 Webtechnologie Labo 1 28 Verschillende vormen: lijn Uitleg code Er moet een lijn getekend worden Het punt x1 / y1 bepaalt het vertrekpunt van de lijn Het punt x2 / y2 bepaalt het eindpunt van de lijn Stroke bepaalt de kleur van de lijn Stroke-width bepaalt de dikte van de lijn

29 Webtechnologie Labo 1 29 A-Oefening 4

30 Webtechnologie Labo 1 30 A-Oefening 4 Teken 2 zwarte lijnen met een dikte van 2px Deze lijnen vertrekken van een hoekpunt van de rode rechthoek en lopen naar elkaar toe

31 Webtechnologie Labo 1 31 Filters ( algemeen ) Net zoals in Photoshop kunnen er filters toegekend worden op figuren Er bestaat een volledig gamma aan filters Er kunnen meerdere filters gebruikt worden op 1 element rs_intro.asp rs_intro.asp

32 Webtechnologie Labo 1 32 Filters ( voorbeeld )

33 Webtechnologie Labo 1 33 Filters ( voorbeeld ) Filters worden gedefinieerd binnen tags ( definitions ) Daarna kom de tag met als attribuut een uniek id Daarbinnen een element met de naam van de filter Attribuut: in="SourceGraphic" bepaalt dat het effect voor de volledige tekening telt Attribuut: stdDeviation="3" bepaalt de hoeveelheid blur

34 Webtechnologie Labo 1 34 Filters ( voorbeeld ) Toepassen op een object

35 Webtechnologie Labo 1 35 A-Oefening 5

36 Webtechnologie Labo 1 36 A-Oefening 5 Pas een blur filter toe op de 2 ellipsen Zorg voor een afwijking van 5

37 Webtechnologie Labo 1 37 Gradients ( Algemeen ) Is een zachte overgang van het ene kleur naar het andere Gradients worden gedefinieerd binnen de tags Er kunnen verschillende gradients op 1 element toegepast worden Er bestaan 2 soorten gradients Linear radial

38 Webtechnologie Labo 1 38 Linear gradients ( voorbeeld )

39 Webtechnologie Labo 1 39 Linear gradients ( voorbeeld ) Ook binnen de tags Geeft aan om welk type gradient het gaat Id=“” geeft een unieke naam aan de gradient X1,y1 / x2,y2: stelt in waar de overgang begint en waar hij eindigt Y1=y2 horizontaal X1 =x2 verticaal

40 Webtechnologie Labo 1 40 Linear gradients ( voorbeeld ) Een tag om telkens een nieuw kleur aan te geven Offset=“” geeft aan waar een kleur begint en stopt style="stop-color:rgb(255,0,0) bepaalt de kleur stop-opacity bepaalt de opacity voor dit kleur

41 Webtechnologie Labo 1 41 Linear gradients ( voorbeeld ) Toepassen op objecten

42 Webtechnologie Labo 1 42 A – Oefening 6 Kopieer de code uit het voorbeeld en experimenteer met verschillende gradients

43 Webtechnologie Labo 1 43 Radial gradients ( voorbeeld )

44 Webtechnologie Labo 1 44 Radial gradients ( voorbeeld ) Veel overeenkomsten met linear gradients Verschillen: Cx,cy en r bepalen de buitenste cirkel Fx en fy bepalen de binnenste cirkel

45 Webtechnologie Labo 1 45 A – Oefening 7 Kopieer de code uit het voorbeeld en experimenteer met verschillende gradients

46 Webtechnologie Labo 1 46 Herhalingsoefening Maak volgende figuur na

47 Webtechnologie Labo 1 47 Einde les 11


Download ppt "Webtechnologie 1 labo Dieter Roobrouck Kristel Balcaen Claudia Eeckhout Koen De Weggheleire Frederik Duchi An Deraedt 1 Les 11: SVG."

Verwante presentaties


Ads door Google