begrüssung

andré

andré m. winter

• 2000 uni wien: kartographie
• bis 2001 freytag&berndt: multimedia manager
• 2002: erste SVG konferenz SVG Open https://www.svgopen.org/
• bis 2005 uni innsbruck: programmierer tirol atlas
• 2006 SVG-buch https://svg.carto.net/
• bis 20??: selbst. kartograph, webentwickler, autor und lehrgangsleiter in götzens/tirol https://pro.carto.net/

bergsteigen, photographie, reisen

nicole

nicole ueberschär

• 2001 TFH Berlin: kartographie
• seit 2001: mitarbeiterin studiengang kartographie
• 2002: erste SVG konferenz SVG Open https://www.svgopen.org/
• 2006 SVG-buch https://svg.carto.net/
• 2008: entwicklungszusammenarbeit in Ruanda

tanzen, photographie, tüfteln

nicole pic

you

und ihr ?

i-want-you.jpg ursprünglich von https://www.tuxparty.com/wp-content/uploads/2008/02/i-want-you.jpg

SVG basics

SVG eckpunkte

• 1998: zu viele unvollständige graphikstandards: Secret Origin of SVG https://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG
• direkte vorgänger:
• Vector Markup Language VML (Microsoft)
• Precision Graphics Markup Language (Adobe)
• 1999: erste W3C SVG workgroup arbeitet draft specification aus. teilnehmer:
• Adobe, Corel, Ericsson, Microsoft, Canon, HP, Quark, Kodak, IBM, Sun, Netscape, Apple, Macromedia, Xerox, Opera, Sharp, etc.
• 1999: erste interaktive SVG-karten von andreas neumann in Zürich und Wien https://www.carto.net/neumann/
• 2001: W3C-spezifikation SVG 1.0 https://www.w3.org/TR/SVG10/
• 2002: erste SVG konferenz SVG Open
• 2006: W3C SVG 1.2 Mobile Candidate Recommendation
• 2011: W3C-spezifikation SVG 1.1 https://www.w3.org/TR/SVG11/

SVG einsatz

SVG und karten

• dtp 2 web
• gis 2 web
• objektorientiert
• 1A-graphik
• offener standard

tagesplanung

do.02.02 kennenlernen, technik, xml, svg-basislemente

fr.03.02 koordinatensystem, styling, text und pfade

mo.06.02 statische basiskarte korsika

di.07.02 animationen und scripting-einführung

mi.08.02 scripting anwendung, interaktive kartographie

do.09.02 korsika-karte mit interaktion versehen

fr.10.02 daten nachladen, serverlogik

zeiteinteilung

• 09.00 - 10.30
• 15min pause
• 10.45 - 12.150
• 1std mittagspause
• 13.15 - 14.15
• 15min pause
• 15.00 - 16.30

ablauf von lv-einheiten

• vorstellung von inhalten: folien, web, buch, code, etc.
• übungen: texteditor, webbrowser, etc.




• fragen, anregungen: jederzeit

beispiele

• tirol atlas https://tirolatlas.uibk.ac.at/maps/
• geofoto.ch https://www.geofoto.ch/geophotomap/>
• SVG tetris https://croczilla.com/bits_and_pieces/svg/samples/svgtetris/svgtetris.svg
• carto:papers:svg:examples:basic https://www.carto.net/papers/svg/samples/#base
• google graphs https://www.google.at/webhp?sourceid=chrome&ie=UTF-8#sclient=psy-ab&hl=fr&source=hp&q=(sqrt(cos(x))*cos(214x)%2Bsqrt(abs(x))-0.67)*(4-x*x)%5E0.01&pbx=1&oq=(sqrt(cos(x))*cos(214x)%2Bsqrt(abs(x))-0.67)*(4-x*x)%5E0.01&aq=f&aqi=&aql=&gs_sm=s&gs_upl=0l0l0l85504l0l0l0l0l0l0l0l0ll0l0&fp=1&biw=1400&bih=935&bav=on.2,or.r_gc.r_pw.r_cp.,cf.osb&cad=b

übung: urlaubsrückblende...

<circle cy="45.583155" cx="7.340691" r="1.4"
                   onmouseover="myInfo('andré',2011)"/>

browser

• google chrome 2010+
• mozilla firefox 1.1+ https://www.mozilla.org/fr/firefox/
• opera 8+ https://www.opera.com/
• safari 2006+ https://www.apple.com/de/safari/
• MSIE 6+ & ASV3.03 @ vista- https://www.adobe.com/svg/viewer/install/
• MSIE 9 @ win7+
• apache batik squiggle https://xmlgraphics.apache.org/batik/tools/browser.html#downloading

shortcuts

• ctrl + r
• ctrl + t
• ctrl + n
• ctrl + h
• ctrl + shift + j
• ctrl + shift + i (oder firebug @ firefox)
• F12 (MSIE, mit einschränkungen)

local vs. web

• 75% webserver unter unix
• MIME Types ("image/svg+xml")
• dateinamenschreibweise
• keine leer- und sonderzeichen
• nur [a-zA-Z0-9_-.]
• ichBinEinKamel.html
  ich-bin-ein-kamel.php
  ich_bin_ein_kamel.js
  ichbineinkamel.svg
  ich.bin.ein.kamel.svg
• share!

SFTP

• filezilla-project.org
• server:
• www.carto.net (78.46.49.178)
• user: berlin12
• unter /home/berlin12/www unterverzeichnisse mit euren namen anlegen
• unter https://kurs.svg.carto.net/ abrufbar (selbes passwort)
• dort all eure aufgaben ablegen
• achtung: alles für alle lesbar und löschbar!

texteditor

• standardeditoren sind unbrauchbar
• ersatz ist unüberschaubar
• sollte können:
• search & replace in mehreren dateien mittels RegExp
• syntax highlighting
• spaltenmodus
• harten und weichen zeilenumbruch
• unbegrenzte zeilenanzahl- und länge
• strict unicode anwenden

texteditoren

• brauchbare unter windows, unte vielen anderen:
• PSPad https://www.pspad.com/
• notepad++ https://notepad-plus-plus.org/
• Vim https://www.vim.org/download.php#pc
• achtung:
• TextPad nicht unicode-kompatibel (probleme bei sonderzeichen)
• UltraEdit ist kostenpflichtig

lokal arbeiten & lokal anzeigen

ctrl + s	alt + tab	ctrl + r
text-editor.png		browser.png

lokal arbeiten & am server anzeigen

ctrl + s	alt + tab	enter	alt + tab	ctrl + r
text-editor.png		filezilla-small.png		browser.png

UTF-8

umfangreicher "zeichensatz", ohne untergliederung verwendbar

relevant bei:

• datei header
• speichern im texteditor
• server-einstellungen
• browser-einstellungen

normal:

01f_utf8_ok_editor.png

01f_utf8_ok_viewer.png

falsch, vermehrt:

01f_utf8_error_editor.png

falsch, verschluckt:

01f_utf8_error2_editor.png

encoding und texteditoren

PSPad

pspad_utf8.png

textpad et al.

textpad_utf8.png

encoding und browser

firefox

ff-encoding-wrong.png

chrome

chrome_encoding.png

UTF-8, abhängigkeiten

UTF-8, sytemabhängigkeiten

• windows-default: Windows-1252
• alter unix-default: Latin1 = ISO 8859-1
• alter mac-default: mac OS Roman
• neuer mac- und unix-default: UTF-8

UTF-8 im web-serverbetrieb

• Windows-IIS-Default: Windows-1252
• Apache-Default: oft Latin1 = ISO 8859-1 (umstellen!)
• Achtung bei DB-Output via PHP/CGI: Alle müssen UTF-8 sein.
• Bei PHP: include()/require() aufpassen mit re-ecoding.

übung: dateien zusammensetzen

unter

https://kurs.svg.carto.net/uebungen/

liegen drei text-dateien:

ue02_teil[1-3].txt

diese herunterladen, zusammensetzen, speichern und unter

https://kurs.svg.carto.net/teilnehmer/[YOU]/ue02.svg

ablegen.

XML

XML einführung

eXtensible Markup Language (erweiterbare Auszeichnungssprache)

1998 als Standard vom W3C eingesetzt

sogenannte Metasprache zum Definieren von "bedeutungstragenden Zeichenketten" (Elementen, Tags)

Mithilfe dieser Tags werden die Texte bzw. Inhalte umschlossen und damit ausgezeichnet:

<tag>ein Element</tag>

XML beispiel

<liste xmlns="https://www.carto.net/attrib">
  <punkt>
    <id>p101</id>
    <path>/2004/07/18_rosskogel_stiglreith/</path>
    <img>20040718-073213_parkplatz_stiglreith_1363m.jpg</img>
    <thb>tn_20040718-073213_parkplatz_stiglreith_1363m_jpg.jpg</thb>
    <coo>11.21895806618417,47.23706038104233,0</coo>
    <zoom>3</zoom>
  </punkt>
  <punkt>
   <id>p102</id>
   <path>/2004/07/18_rosskogel_stiglreith/</path>
   <img>20040718-085105_abzw_rosskogelhuette.jpg</img>
   <thb>tn_20040718-085105_abzw_rosskogelhuette_jpg.jpg</thb>
   <coo>11.19021315867346,47.24007374589851,0</coo>
   <dest>11.18940109217046,47.23949237682798,0</dest>
   <zoom>3</zoom>
  </punkt>
</liste>
  
https://www.geotrace.net/gm/?lang=en&gox=11.02152&goy=47.05822&goz=13&goid=2639&mt=1&goxpos=11.015351&goypos=47.05482, XML-daten nachführung zu sehen mit chrome developer tools, firebug, u.a.

XML typen

nur daten, keine darstellung

• XML
• GML
• GPX
• OSM

mischformen

• (X)HTML
• SVG
• Open Offce file format
• Office Open XML (microsoft: .docx, etc.)

SVG elemente

elemente:

• <text>Text in SVG</text>
• <rect x="100" x="200" width="300" x="400"/>

eltern- und kindelemente:

• <foo>
     <bar/>
  </foo>

typische eltern- (container-) elemente;

• <svg/>
• <defs/>
• <g/>
• <a/>
• <symbol/>
• ...

XML elemente

• wurzelelement <svg/>
• korrekte verschachtelung der elemente
• jedes element muss abgeschlossen werden
• klein- und GROSSsschreibung berücksichtigen!
• 1 fehler = ganzes dokument korrupt

SVG attribute

• attributname="wert"
• im start-tag
• nach dem elementnamen
• beliebig viele, aber eindeutig (= nicht doppelt)
• punkt an stelle des kommas (z.b. opacity=".5")
• klein- und GROSSsschreibung berücksichtigen! (z.B. viewBox="...")
• attribut id:
• fakultativ aber eindeutig
• darf nicht mit einer zahl beginnen
• keine leer- und sonderzeichen (wie dateinamen)

SVG dateistruktur

XML-deklaration

<?xml version="1.0" encoding="iso-8859-1"?>

root-element

<svg>

   ...

</svg>

SVG datei beispiel

<?xml version="1.0"?>
<svg version="1.1" viewBox="0 0 459 540"
      xmlns="https://www.w3.org/2000/svg"
      xmlns:xlink="https://www.w3.org/1999/xlink">
  <image id="dland" xlink:href="deutschland.jpg"
      width="419" height="500" x="20" y="20"/>
</svg>
  

XML/SVG kommentare

• zum strukturieren des dokumentes
• zum ausprobieren verschiedener varianten
• zum kommentieren einzelner zeilen

<!-- kommentar -->

<!-- auskommentiertes Element über mehrere zeilen
        <image
             xlink:href="myImg.jpg"../>
              -->

• gilt nicht für CSS und Script!

var a = 1; // kommentar einzelne zeile oder am ende einer zeile

/* dieser kommentar darf auch über mehrere zeilen gehen,
  so dass man hier auch etwas mehr schreiben kann */

SVG painters model

  <rect x="50" y="50" width="200" height="200" fill="blue"/>
  <rect x="60" y="100" width="200" height="200" fill="red"/>
  <rect x="70" y="150" width="200" height="200" fill="green"/>
 
  <rect x="300" y="50" width="200" height="200" fill="blue"/>
  <rect x="310" y="100" width="200" height="200" fill="green"/>
  <rect x="320" y="150" width="200" height="200"  fill="red"/>

übung: datei sanieren

unter

https://kurs.svg.carto.net/uebungen/

liegt die datei:

ue03_xml_corr.svg

mit vielen XML-fehlern. diese ist zu korrigieren und unter

https://kurs.svg.carto.net/teilnehmer/[YOU]/ue03_xml_corr.svg

abzulegen.

SVG basiselemente intro

<rect fill="red" stroke="black" x="15" y="15" width="100"
                                                     height="50"/>

<rect fill="blue" stroke="black" x="150" y="15" width="100"
                                     height="50" rx="12" ry="18"/>

<circle fill="yellow" stroke="black" cx="62" cy="135" r="20"/> 

<ellipse fill="green" stroke="black" cx="200" cy="135"
                                                 rx="50" ry="20"/>

<line x1="15" y1="240" x2="30" y2="200" stroke-width="2"/>

<polyline fill="none" stroke="red" stroke-width="2"
                        points="160,200 180,230 200,210 234,220"/>

<polygon fill="yellow" stroke="black" stroke-width="1"
points="49,272 57,297 114,282 63,314 71,339 49,324 27,339 [...]"/>

<path stroke="black" fill="none" stroke-width="3
               d="M150 280l19,10 -22,33 40,3c12,43 44,-83 83,20"/> 
  

SVG text

<text x="140" y="30">County</text> 

<text x="32" y="66" transform="rotate(20)">Strasse</text>

<text x="140" y="73">more than one row: 
  <tspan x="140" dy="12">first row</tspan> 
  <tspan x="140" dy="12">second row</tspan> 
</text>
  

SVG image

  <image id="raster" xlink:href="i-want-you.jpg"
      width="419" height="500" x="20" y="20"/>
      
      
  <image id="vector" xlink:href="painters_model.svg"
      width="322" height="280" x="180" y="20"/>
  

SVG-spezifikation nur JPG, PNG, SVG. browser unterstützten mehr

SVG gruppen

  <g id="mainlayer" stroke="black">
    <g id="sublayer1" fill="red">
      <rect [...]/>
      <rect [...]/>
      <rect [...]/>
    </g>
    <g id="sublayer2" fill="blue">
       <circle [...]/>
       <circle [...]/>
       <circle [...]/>
    </g>
  </g>
  

SVG layout intro

fill=

• füllung bzw. textfarbe
• "blue", "#00f", "rgb(0 0 255)", "rgb(0% 0% 100%)"

stroke=

• umrandungsfarbe
• (wie fill)

stroke-width=

• strichstärke
• numerischer wert, zb. "12345.67"

opacity=

• Deckkraft
• numerischer wert zwischen 0 und 1, zb. ".85"

übung: datei erstellen

unter

https://kurs.svg.carto.net/uebungen/

liegt die "leere" datei:

ue04_self.svg

es gilt nun möglichst viele der nun bekannten elemente einzusetzen und ein motiv freier wahl zu gestalten. bitte wieder unter

https://kurs.svg.carto.net/teilnehmer/[YOU]/ue04_self_1.svg

ablegen.