Computer: Graphics in MediaWiki

Gehört zu: Web-Authoring
Siehe auch: Grafiken
Siehe auch: MediaWiki

Status: Statt MediaWiki verwende ich jetzt WordPress

Graphiken in MediaWikiZeichnungen (Drawings)

Auch in MediaWiki möchte man ja ab und zu auch schöne Vektorgrafiken einbauen – nicht nur Pixel-Bilder.

Je nach Format (SVG, SWF, ODG, VSD, PPT,…) sind da unterschiedliche Lösungen möglich, wo bei schon das Upload solcher Grafiken ein Problemchen sein kann.

 Upload von Grafiken auf Mediawiki (SVG, SWF, PDF,…)

Damit man Vektorgrafiken auf Mediawiki hochladen kann, müssen einige Einstellungen vorgengenommen werden.

 php.ini

file_uploads = On 
post_max_size = 20M
upload_max_filesize = 20M

 LocalSettings.php

$wgEnableUploads = true    -->  (dann erscheint links die Klick-Zeile "Upload")
$wgFileExtensions = array('png','gif','jpg','jpeg','pdf','svg','swf','mp3','ogg');

Manchmal gibt es Probleme mit der Erkennung des richtigen MIME-Types. Dann kann man folgendes versuchen:

$wgVerfiyMimeType = false;
$wgMimeDetectorCommand = 'file -bi';
in httpd.conf bzw. .htaccess:  AddType image/svg+xml svg

Contine reading

Computer: SVG Vektorgrafiken (aus Wiki)

Gehört zu: Grafik
Siehe auch: Graphics in WordPress

SVG Scalable Vector Graphics (aus Wiki)

  • SVG ist ein auf XML beruhender W3C-Standard für VektorGrafik.
    • SVG 1.0: 2001
    • SVG 1.1: 2003
    • SVG 1.2: 2005
    • SVG 2.0: hieran wird seit 2011 gearbeitet (“Candidate Recommendation”)
  • SVG wurde sehr stark von der Firma Adobe unterstützt. Zum 1.1.2008 hat Adobe “End of Life” verkündet.
  • SVG hat als offenes; d.h. nicht-proprietäres Format große Unterstützung durch OpenSourceSoftware
  • SVG wird von MediaWiki unterstützt
  • SVG wird von WordPress unterstützt
  • WebBrowser unterstützen SVG auch…?
  • Konkurrierend zu SVG ist: Flash von Macromedia (aufgekauft von Adobe)

SVG Grafiken Einbetten in…

 Bekannte Probleme mit SVG

  • Darstellung von Pfeilspitzen an Linien
  • Welche Schrifttypen werden unterstützt?
  • Darstellung von Fließtext (ab SVG 1.2 möglich)

 Weblinks zu SVG

 SVG die ersten Schritte

  • Koordinatensystem
    • X-Achse waagerecht vom linken Bildrand nach rechts
    • Y-Achse senkrecht vom oberen Bildrand nach unten
  • Elemente
    • Rechteck
    • Text, auch Fließtexte
    • Bezierkurven
    • Kreis, Ellipse, Bogen
    • Pfad
    • Pfeilspitzen ????????

Beispiel für einen Pfad

Pfad aus “M” (=move to) und “L” (= line to):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" 
     width="200" height="300">
  <path stroke="black" stroke-width="1px" fill="none"
     d="M 50,250 L 50,150 L 100,77.5 L 150,150 L 55,150 L 150,250 L 54.5,250 L 150,154 L 150,246"/>
</svg>

Dies als Grafik:

http://blog.kr8.de/wp-content/uploads/2016/08/DasHausvomNikolaus.svg

SVG-Grafik: Path

Beispiel für Bogenstücke

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
<g stroke="black" stroke-width="1" fill="none">
<path d="M150 50 A100 100 0 0 0 50 150" />
<path d="M0 150 L150 150" stroke="red"/>
<path d="M150 0 L150 150" stroke="blue" />
<path d="M50 200 A50 50 0 0 1 100 250" />
<path d="M50 160 L50 300 M0 250 L150 250" stroke="gray"/>
</g>
</svg>

Dies als Grafik:

Beispiel für zwei einzelne Textzeilen

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  width="265" height="65" 
     xml:space="preserve" color-interpolation-filters="sRGB" fill="none">
	<title>Balanced Scorecard</title>
	<desc>Aus:  pres_030806.ppt TTC</desc>
	<style type="text/css">
		.st2 {fill:rgb(0,103,171);font-family:Verdana;font-size:20pt;font-style:italic;font-weight:bold}
	</style>
	<g>	
                <rect x="1" y="1" fill="none" stroke="black" width="264" height="64"/>
		<text x="18" y="29" class="st2">Basic Balanced</text>	
		<text x="50" y="55" class="st2">Scorecard</text>		
	</g>
</svg>

Dies als Grafik:

http://blog.kr8.de/wp-content/uploads/2019/03/BalancedScorecard-3.svg

Beispiel für Fließtext

Fließtext wurde in SVG 1.2 neu eingeführt. Nicht alle SVG-Tools unterstützen dies.
SVG-Quellcode:

<?xml version="1.0" standalone="no"?>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg"
    id="body" width="350" height="350">
  <title>SVG flowPara Example.</title>
  <g>
    <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
    <flowRoot>
      <flowRegion>
        <rect stroke="blue" fill="gold" x="10" y="10" width="200" height="300"/>
      </flowRegion>
      <flowDiv text-align="start">
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P1 The quick brown fox jumped over the lazy dog.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P2 Gallia est omnis divisa in partes tres quarum unam incolunt Belgae.</flowPara>
        <flowPara font-family="Arial" font-size="20" fill="#000000" text-align="start">
                  P3 a b c d e f g h i j k l m n o p q r s t u v w x y z</flowPara>
      </flowDiv>
    </flowRoot>
  </g>
</svg> 

Dies als SVG-Grafik mit Version 1.2 Elementen zum Fließtext:

Flow-2.jpg

SVG-Grafik mit Fliesstext

Da hier SVG 1.2 kan das SVG nicht als Original Flow-2.svg richtig angezeigt werden. Daher wir es in ein Flow-2.jpg umgewandelt (mit Inkscape und Libre Office Draw).

 

SVG Tools

SVG Tools 1

 SVG Tools2

SVG Beispiele

 SVG Beispiel 1: Hello World

So sieht der SVG Quelltext aus:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="260" height="60">
	<rect x="10" y="10" fill="blue" width="240" height="40"/>
	<text x="40" y="40" style="fill:gold; font-size:20pt">
		Hello World!
	</text>
</svg>

Diese SVG-Datei wurde als “normale” Grafik auf die WordPress Media Libray hochgeladen.

Das Einfügen dieser SVG-Grafik erfolgt dann in WordPress  “normal” über den “Add Media” Buttom im Editor (der dann ein HTML.IMG daraus macht):

Und so sieht die SVG-Grafik dan hier  aus:

http://blog.kr8.de/wp-content/uploads/2016/08/Helloworld.svg

SVG-Grafik: Hello World

 

SVG Beispiel 2: Tageslänge

http://blog.kr8.de/wp-content/uploads/2016/08/Helloworld.svg

SVG Beispiel 3: RSS Family

Dies Beispiel stammt von der Seite: RSS.

http://blog.kr8.de/wp-content/uploads/2016/08/Rss-family.svg

SVG-Grafik: RSS-Family

 

SVG Beispiel 4: SWISH Flash Animation

Dies SVG-Beispiel stammt von der Seite: SWiSH

http://blog.kr8.de/wp-content/uploads/2016/08/Swish_Flash_Animation.svg

 

Computer: Web Prototyping

Web Prototyping

Für das Prototyping von HTML-Seiten gibt es viele ganz unterschiedliche Tools.

Pingendo ist ein HTML-Editor auf Bootstrap-Basis

http://t3n.de/news/pingendo-einfaches-prototyping-608076/

Stichworte

  • Stichwort: wireframe
  • Stichwort: Click-through    Clickpfad  Klickpfad
  • Stichwort: Mockup

Tools

  • Tool: Fireworks
  • Tool: Axure
  • Tool: Pencil Project   http://pencil.evolus.vn/Downloads.html
  • Tool: Balsamiq