Computer: Adobe Flash Player – Shockwave – in Mozilla Firefox

Gehört zu: Vektorgrafiken
Siehe auch: SWF, SVG
Benutzt: Grafiken aus GitHub

Meine Vektorgrafiken als SWF oder SVG

My older websites do use vector graphics in Shockwave format – originally produced by Feehand and converted from .fla to .swf

In the long run I am planning to convert .swf to a more open and modern format ( like .svg or html5 or ….)

At the moment I want to keep my older websites “alive”, so I need to know how to embed SWF-files in HTML and how to render them in the important Web Browsers (Mozilla Firefox,…)

My traditional website, that I want to keep “alive” is:  http://www.kr8.de (original) resp. http://web.kr8.de (converted to bootstap).

Adobe Flashplayer

As I understood, I need Adobe Flashplayer as a plugin into my web browser in order to render my SWF graphics properly.

My favorite web browser is Mozilla Firefox. With Firefox version 43.04 I was unable to install the Adobes Flashplayer plugin.
With Mozilla Firefox 28.0 the installation of the Adobe Flash Plugin went well. To be exact: I installed Shockwave Flash 22.0.0.209 as a plugin to Mozilla Firefox 28.0.

Rendering SWF in HTML

My SWF files showed up perfectly on my HTML-Pages in Mozilla Firefox.
Example: http://web.kr8.de/ldap.html

This is the code I used for embedding the SWF into the HTML:

<object align=”left” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0″ width=”294″ height=”126″>
<param name=”movie” value=”img/ldap.swf” />
<param name=”wmode” value=”transparent” />
<param name=”quality” value=”high” />
<embed quality=”high” pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” src=”img/ldap.swf” width=”294″ height=”126″  wmode=”transparent” />
</embed>
</object>

Potential Problems

  • Use the right file path in the SRC parameter e.g. src=”img/ldap.swf”
  • Use wmode=”transparent”
  • Other Firefox-Plugins may interfere with the Shockwave Flash plugin, e.g. Shockwave Director or others…

Als SVG-Grafik geht es ganz einfach

Wenn wir statt Shockwave das SVG-Format nehmen, geht es einfacher, wobei wir SVG in der WordPress Media Library oder auch in GitHub speichen können:

Abbildung 1: LDAP-Schema (WordPress Media Library : ldap.svg)

Abbildung 2: LDAP-Schema (GitHub: ldap.svg)

Ldap.svg

Computer: SVG Vektorgrafiken (aus Wiki)

Gehört zu: Vektorgrafik
Siehe auch: Graphics in WordPress
Benutzt: Grafiken aus Github, Fotos aus Google Drive

Stand: 15. Sep 2021

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-Dateien sind keine binären Dateien, sondern Text-Dateien, die also auch mit normalen Text-Editoren bearbeitet werden können.
Solche SVG-Dateien sind “normale” XML-Dateien mit dem besonderen Namespace SVG.

SVG tat sich anfangs sehr schwer, da Flash der Industrie-Standard war.
SVG 1.1 enthielt lediglich eingie Korrekturen zu 1.0
SVG 1.2 wurde nie offiziell fertiggestellt.
SVG 2.0 soll der neue Super-Standard werden – als Teil von HTML5

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-Viewer

SVG-Grafiken bis Verson 1.1 können z.B. in Mozilla Firefox betrachtet (“Rendering”) werden. Auch Google Drive…

SVG-Grafiken Erstellen und Bearbeiten

Ich benutzte zur Zeit (Feb. 2020) das SVG-Tool Inkscape. Leider wurden in Inkscape schon einige Elemente von SVG 1.2 implementiert, die aber nie definitiv verabschiedet wurden. Dazu gehören: flowRoot, flowRegion und flowPara…

Dies sind Fliesstext-Konstrukte, die von den Vertretern im W3C sehr kontrovers diskutiert wurden und schließlich nicht in den SVG-Standard aufgenommen wurden. Wir müssen bei Inkscape also aufpassen und ggf. solche Konstrukte entfernen und durch einfachere Konstrukte von SVG 1.1 ersetzen.

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>

Abbildung 1: Dies als Grafik in SVG-Format (Github: DasHausvomNikolaus.svg)
DasHausvomNikolaus.svg

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>

Abbildung 2: Dies als Grafik in SVG-Format (Github: Pathwitharcs.svg)

Pathwitharcs.svg

SVG mit Bogenstücken

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>

Abbildung 3: Dies als Grafik (Github: BalacedScorecard-3.svg)

BalancedScorecard-3.SVG

Balanced Scorecard als 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.

Abbildung 4:  SVG-Grafik mit Fließtext (Google Drive: flow-2.jpg)


SVG Fließtext – Text Flow

Da hier SVG 1.2 kann 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 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):

Abbildung 5: Und so sieht die SVG-Grafik dann aus (Github: Helloworld.svg)

Helloworld.svg

SVG-Grafik Hello World

Abbildung 6: SVG Beispiel 2: Tageslänge (GitHub: Tageslaenge.svg)

Tageslaenge.svg

 

SVG Beispiel 3: RSS Family

Abbildung 7: Dies Beispiel stammt von der Seite: RSS (Github: Rss-family.svg)

Rss-family.svg

SVG Beispiel 4: SWISH Flash Animation

Abbildung 8: Dies SVG-Beispiel stammt von der Seite: SWiSH (Github: Swish_Flash_Animation.svg)

Swish_Flash_Animation.svg

Internet: Google Webmaster Tools: Google Analytics – Google AdWords

Gehört zu: Internet
Siehe auch: Google

Google Webmaster Tools

Alle gehosteten WebSites sind im Google Webmasters Tool registriert: http://www.google.com/webmasters/tools

und bei Google Analytics unter Google-Konto mit Tacking-IDs angemeldet: http://www.google.com/analytics/

Google Analytics

Anmelden bei Google Analytics:  http://www.google.com/analytics/

Als erstes benötigen wir ein Google-Konto. Das haben wir normalerweise schon…
Contine reading

Computer: WordPress Menüs – Navigation

WordPress Menüs – Navigation

Gehört zu: WordPress
Siehe auch: Google Fotos
Benutzt: Fotos von Google Drive

Stand: 23.09.2021

Menüs zur Navigation zu WordPress-Seiten, kann man ja sehr intuitiv im WordPress-Backend unter dem Punkt “Design > Menüs” einrichten.

Zuvor muss jedes Menü aber “angemeldet” werden. Diese Anmeldung geschieht bei WordPress-Thems in der PHP-Datei “functions.php”.
Nachdem ein Menü in “functions.php” angemeldet wurde und im WordPress-Backend von seiner Struktur her definiert wurde, muss man als dritten Schritt noch für die Ausgabe des Menüs sorgen.

WordPress-Menü anmelden in “functions.php”

 
Die Anmeldung der Menüs erfolgt mit der PHP-Funktion “register_nav_menues()” und kann etwa wie folgt aussehen:
 
register_nav_menus( array(
             primary =>  Erstes Menu ,
             secondary => Zweites Menu,
             tertiary => Drittes Menu,
      ) ) ;
 
Man spricht von “slugs”  ( primary, secondary, tertiary) und “descriptions”  (Erstes Menu, Zweites Menu, Drittes Menu).
Die Bezeichnungen ‘Erstes Menu’, ‘Zweites Menu’ und ‘Drittes Menu’  erscheinen dann im WordPress-Backend unten unter Menü-Einstellungen – Position im Theme.

Menü-Strukturen definieren im WordPress-Backend unter Design > Menüs

 Im WordPress-Backend werden nun Menü-Strukturen (Hierarchie von Seiten) definiert.  Die Seiten müssen zu diesem Zeitpunkt schon mal vorhanden sein – ggf. nur als Dummies mit leerem Inhalt o.ä.

Im WordPress-Backend  bekommt jede hier angelegte Menü-Struktur einen weiteren sprechenden Namen, der ausschließlich hier im WordPress-Backend zur Benennung und Auswahl (“Wähle ein Menü zum Bearbeiten:…” – richtiger Weise “Wähle eine Menü-Struktur….”) benutzt wird. Ich kann hier beliebig viele Menü-Strukturen definieren. Muss dann aber letztlich jedem angemeldeten Menü (s.o.) eine Menü-Struktur zuordnen. Dazu wird bei einer Menü-Struktur unten im WordPress-Backend unter Menü-Einstellungen – Position im Theme eine “Description” ( ‘Erstes Menu’, ‘Zweites Menu’ und ‘Drittes Menu’ ) angehakt.

Abbildung 1: WordPress Backend Menues (Google Drive: WordPress-Backend-Menuestruktur.jpg)

WordPress backend Menue-Struktur

WordPress-Menü Ausgeben auf die Web-Seite

 Für die Ausgabe eines Menüs ist die Position (Ort)  auf der Web-Seite und die Gestaltung des Menüs (Farben, Schrift, Kästchengröße, Verhalten bei Klick, Hover etc.) anzugeben.
Typischweise ist der Ort eines Menüs im Header-Bereich – kann aber auch an anderen Stellen plaziert werden.
Die Ausgebe-Befehle (z.B. in der PHP-Datei “header.php”) erfolgt mit der PHP-Funktion “wp_nav_menu()” und kann etwa wie folgt aussehen:
   <?php
                      wp_nav_menu( array(
                          theme_location     => primary,
                          depth              => 2,
                          container          =>  div,
                          container_class    => collapse navbar-collapse navbar-ex1-collapse,
                          menu_class         =>  nav navbar-nav,
                          fallback_cb        => wp_bootstrap_navwalker::fallback,
                          walker             => new wp_bootstrap_navwalker())
                      ) ;
        ?>
Man sieht, dass hier die Menüs mit ihrem “slug” (also ‘ primary’, ‘ secondary’ etc.),  so wie bei der Anmeldung vergeben, identifiziert werden.
Die Gestaltung (Aussehen) des Menüs erfolgt dann durch die diversen CSS-Klassen ( z.B. “nav”, navbar-nav”) und das  “Walker-Objekt”…..

Computer: Web Prototyping

Gehört zu: Web-Anwendungen
Siehe auch: HTML-Editing

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

 

Computer: Mozilla Firefox 28: Evernote Web Clipper Icon disappeared

Gehört zu: Internet
Siehe auch: Mozilla Firefox, Evernote

Mozilla Firefox: Evernote Problem

I am using Mozilla Firefox with the older version 28, because I do not like the newer Firefox versions…..

One day (April 2015) I noticed that the Evernote Web Clipper icon had disappeared from my Mozilla Firefox toolbar….

Web experts I could google had interesting ideas on problem cause and potential solotions — none worked for me.

Comparing my desktop PC with my notebook PC,  I realized that one had installed Evernote Web Clipper Mozilla AddOn version 5.9.1 and the other version 6.x.x. – perhaps by automatic updating…

I switched back to Evernote Web Clipper 5.9.1 and my problem was solved.

Version 6 of the Evernotes Web Clipper is said to be a “complete re-write” – which was not good for my Firefox 28

 

Computer: Mozilla Firefox v28 ändern von Englisch auf Deutsch

Gehört zu: Internet
Siehe auch: WebBrowser

Mozilla Firefox v28 ändern von Englisch auf Deutsch

Ich liebe den Mozilla Firefox Version 28 und möchte nicht die neueren Versionen haben, weil ich deren Oberfläche nicht mag.

Problem Nr 1:

Nach dem Installieren des Firefox v28  wird automatisch erkannt, dass diese Version nicht die neueste ist, und sofort ein Update gestartet.

Lösung Nr.1

Bei der Installation sollte “customized” gewählt werden und dann die angebotene Installation des “Maintenance Service” abgewählt werden.
Ausserdem bei den Firefox-Einstellungen (Menü Extras Einstellungen Erweitert Update) den Radio-Button “Nicht nach Updates suchen” anklicken.

Problem Nr. 2

Ich habe leider die englische Version von Firefox v28 intsalliert. Mein betreuter Benutzer möchte aber lieber den Firefox in DEUTSCH haben.

Lösung Nr.2

Man findet schnell, dass man die Firefox-Sprache umstellen kann, indem man auf die URL “about:config” geht und dort nach der Zeile “general.useragent.locale” sucht. Da klickt man mit der rechten Maustaste drauf und wählt bearbeiten und kann die Einstellung von “en-GB” ändern auf “de” – und speichern. Nach einem Neustart von Firefox ist die deutsche “Locale” auch aktiv. Aber das ganze nutzt noch nichts, denn das Umschalten der “Locale” geht ins Leere, solange man nicht auch das deutsche Sprachpaket für Firefox installiert hat.

Man findet die Firefox-Sprachpakete (de.xpi, en-US.xpi, etc.)  unter:  http://releases.mozilla.org/pub/mozilla.org/firefox/releases/latest-8.0/win32/xpi

Leider lässt sich dieses “neueste” Sprachpaket de.xpi aber nicht unter Firefox v28 installieren. Ich muss also das zu Firefox v28 passende Sprachpaket herunterladen. Das finde ich unter  http://releases.mozilla.org/pub/mozilla.org/firefox/releases/28.0/win32/xpi

 

Computer: WebDAV on Apache

Gehört zu: Internet
Siehe auch: HTTP-Server

WebDAV on Apache

Meine Anforderungen: Mobile Dokumente

Ich möchte viele meiner auf lokalen PCs befindlichen Dokumente auch aus dem Internet erreichen können und das auch mit mobilen Geräten wie z.B. meinem iPad.
Das moderne Stichwort dafür ist die “Cloud“.
Allerdings möchte ich am liebsten meine Dokumente nicht einem Cloud-Provider im Internet übergeben, sondern lieber meine eigene Cloud in meinem häuslichen LAN betreiben, auf das dann per FritzBox mit VPN zugegriffen werden kann.
Ausserdem möchte ich keine (redundante) Kopie meiner Dokumente erstellen, sondern mit den original-Dateien auch per “Cloud” arbeiten.
Für einen solchen Remote-Zugriff stehen prinzipiell verschiedene Mechanismen (Protokolle) zur Verfügung:

  • WebDAV
  • Samba
  • FTP/SFTP/SSH

Ich bevorzuge WebDAV, weil das unabhängig vom jeweiligen Betriebssystem (Windows, iOS, Android) rein auf TCP/IP basierend auf das Internet zugeschnitten ist. Auch arbeiten mehrere Cloud-Anbieter mit WebDAV (z.B. Telekom Mediencenter, DropBox,…).
Auch auf der Client-Seite, speziell im mobilen Bereich, scheint es Apps zu geben, die WebDAV recht komfortabel unterstützen; d.h. mehr als nur eine Anzeige- und Download-Funktion…

Erster Versuch: ownCloud

Als ersten Versuch habe ich ownCloud auf meinem Windows 2011 HomeServer zum Laufen gebracht. Aber bei ownCloud werden die Dokumente (redundant) in einer mySQL-Datenbank gespeichert, was ich ja nicht möchte, denn dann müsste ich ja ausschießlich mit ownCloud arbeiten – auch wenn ich zu Hause in meinem eigenen LAN bin.

Zweiter Versuch: WebDAV

1.Schritt: Apache testen

Testen ob der Apache, auf dem WebDAV konfiguriert werden soll, korrekt läuft und von anderen Geräten im LAN erreichbar ist.

I have installed Apache 2.2.14 on Windows 7 and can view my web pages using both http://localhost and http://127.0.0.1 but when I try to access the server from another computer on the same router, it fails. It also fails when I use the DynDNS address that I have mapped.
This worked fine under Windows XP before I upgraded to Windows 7.
I suspect the issue is something like port 80 not being opened up for outside access into the computer.
Does anyone know how to open that port up in the Windows Firewall, or if something else is locked down what that is and how to unlock it?

To add a rule in the Windows Firewall for port 80, do the following:

  • Go to the Control Panel and launch “Windows Firewall”
  • Go to “Advanced Settings”
  • Select “Inbound Rules” in the left pane
  • Select “New Rule” in the right pane
  • In the New Inbound Rule Wizard, select “Port” as Rule Type, then click on “Next”
  • Select “TCP and put “80” (and any other ports you want to open) in “Specific local ports”, then click on “Next”
  • Select “Allow the connection”, then click on “Next”
  • Select the network location where the rule should apply (select them all if you’re not sure), then click on “Next”
  • Give a name and an optional description

That should do it.

2. Schritt: DAV im Apache aktivieren

In der Apache-Konfigurationsdatei httpd.conf folgende Einträge entkommentieren:

  • LoadModule dav-module …
  • LoadModule dav-fs-module …

Und dann muss man noch den Pfad für die Lock-datei angeben, in der WebDAV ggf. konkurrierende Zugriffe verwaltet. Auf diesen Pfad muss der Apache-Prozess Schreibrechte haben.

  • DavLockDB “D:/temp”

3. Schritt: Verzeichnisse unter Apache stellen

Üblicherweise möchte man über WebDAV nicht nur Dokumente über das Internet bearbeiten, die auf dem Apache-Computer unterhalb des Apache DocumentRoot stehen, sonden Dokumente in den Verzeichnissen, in denen sie “normal” stehen (und man möchte auch keine Kopien).
Apache bietet die Möglichkeit die gewünschten Verzeichnisse “virtuell” unter das Apache DocumentRoot zu stellen – mit der “Alias” Direktive:

  • Alias /MyDocs “d:/var/Documents/MyDocs”
  • Alias /Music “z:/Medien/Music”
  • Alias …

4. WebDAV für diese Verzeichnisse aktivieren

Für jeden dieser Ordner muss dann WebDAV aktiviert werden.
<Directory “d:/var/Documents/MyDocs” >
Dav On
ForceType text/plain
< /Directory >

5. Benutzer einrichten

Die einfachste Möglichkeit ist das sog. “Basic”-Verfahren zur Autentifizierung von Usern.

6. Zugriffberechtigungen einrichten

Für jeden WebDAV-Ordner sind dann die Zugriffsberechtigungen einzurichten.
Wir verwenden dazu das sog. “Basic” Autentifizierungsverfahren.

<Directory "d:/var/Documents/MyDocs" >
Dav On
ForceType text/plain
AuthType Basic
AuthName "WebDAV Zugang Computer XYZ"
AuthUserFile "D:/bin/Apache/..."
AllowOverride None
Options Indexes
Order allow,deny
Allow from all
<limitExcept GET HEAD Options>
Require valid-user
</LimitExcept>
< /Directory >

7. Testen WebDAV über WebDAV-Clients

Es gibt verschiedene Möglichkeiten, von der Client-Seite den Zugriff auf unseren konfigurierten WebDAV-Server zu testen.

7.1 Web-Browser

Über einen Web-Browser (z.B- Mozilla Firefox) können wir über die URL
http://192.168.2.100/MyDoc
zugreifen. Falls man in der httpd.conf die Direktive “Option Indexes” vergessen hat, bekommt man allerdings eine Fehlermeldung.

7.2 WebDAV-Clients auf Windows 7

Windows selbst ermöglicht die Einbindung von WebDAV-Ordnern in den Explorer…
BitKinex ist eine schöne Software für WebDAV und mehr…..
CarotDAV ist auch nicht schlecht… ist als portable Version verfügbar…
CyberDuck kommt aus der Apple-Ecke…

7.3 WebDAV-Clients auf dem iPad

“My WebDAV” kann in der kostenlosen Version nur eine WebDAV-Verbindung speichern. Der Zugriff auf den Apache-WebDAV im LAN erfolgt problemlos (auch ohne SSL).
“GoodReader” kann ebenfals erfolgreich auf unseren Apache-WebDAV zugreifen, allerdings sind keine Viewer enthalten, sonden die Files müssen immer erst heruntergeladen werden…
“OverTheAir” kann problemlos auf unseren Apache-WebDAV zugreifen und enthält auch Viewer für vieles…
“iFiles” ……

 

Computer: Migration vom Speedport W921V auf FritzBox 7390

Gehört zu: Fritzbox
Siehe auch: Internet-Zugang

Internet-Zugang mit ADSL Router: Speedport W921V – Fritzbox 7390

Heute habe ich meinen Telekom DSL-Router Speedport W921V gegen eine FritzBox 7390 ausgetauscht.

Mit der FritzBox kann ich zunächst alles das, was ich mit dem SpeedPort auch mache:

  • IPTV (Telekom Entertain)
  • IP Telefonie (Telekom)
  • DECT-Basisstation für meine vorhandenen DECT-Telefone
  • DSL Modem für Internet-Zugang (zur Zeit DSL 16000 von der Telekom)
  • Gigabit Ethernet Switch mit 4 Ports
  • WLAN Access Point

Die FritzBox soll darüberhinaus zusätzliche Vorteile bringen, von denen viele meiner Kollegen schwärmen. Das werde ich Punkt für Punkt ausprobieren. Als Vorteile der FritzBox werden u.a. genannt:

  • Umfassende Administrierbarkeit
  • UPnP Gerätesteuerung – um z.B. den Remote-Web-Zugriff einfach einzurichten
  • Fritz!NAS
  • Aufbau eines VPN
  • Und einiges andere mehr (siehe später weiter unten)

Ich behalte den Telekom Speedport nun als Zweitgerät, was zum Austausch in Notfällen dienen soll (Single Point of Failure) und falls die Telekom bei zukünftigen Störungsmeldungen sich querstellen sollte.

Erste Einrichtung der FritzBox

IP-Adresse

Zunächst kann ich die FritzBox nicht von meinem PC über Internet-Browser ansprechen. Wenn in in der Adresszeile “fritz.box” eingebe, tut sich erst einmal garnix. Erst nach dem Herunterfahren und Neu-Starten meines PCs bekomme ich die Benutzeroberfläche der FritzBox im Internet-Browser. Der Grund ist wohl dass die FritzBox standardmäßig mit der IP-Adresse 192.168.178.1 arbeitet in mein häusliches LAN seit Jahren mit einer anderen Ethernet-Adresse arbeitet. Über das DHCP der FritzBox bekommt mein PC dann eine 178er Adresse. als erstes ändere ich die Netzwerkadresse der FritzBox auf meine gewohnte Netzwerkadresse, dann spielen auch alle meine Devices im LAN wieder mit (z.B. der Microsoft Homeserver).

DHCP

Den DHCP-Bereich stelle ich dann genauso ein, wie er auf dem SpeedPort war (100-199).

Internet-Provider

Die Eingabe der Zugangsdaten funktioniert bestens über den Einrichtungsassistenten der FritzBox. Ich kann nun wieder von allen meinen Geräten im häuslichen LAN im Internet surfen.

WLAN

Auch das WLAN der FritzBox stelle ich auf die gleichen Daten ein, wie es vorher mit dem SpeedPort war (SSID, WPA2 mit dem gleichen pre-shared Key), dann funktionieren alle meine WLAN-Geräte (z.B. Notebook, iPhone, iPad) unverändert.

FritzBox sagt: WAP2, TKIP und AES-CCMP

Mit der Einstellung “WPA + WPA2” funktionierte das WLAN mit den Notebooks gut, aber als der neue Drucker HP Officejet 6700 dazu kam, wollte der sich nicht mit dem WLAN verbinden. Erst als ich den WPA-Modus auf “WPA2 (CCMP)” umstellte, ging auch der neue Drucker ins WLAN.

Telefonie

Meine Telefonnummern für IP-Telefonie mit der Telekom kann ich ganz einfach über den Einrichtungsassistenten der FritzBox eingeben.

DECT-Basis

Meine drei DECT-Telefone muss ich nun mit der DECT-Basis der FritzBox “paaren”. Das ist ein bisschen fummelig. Ich muss die Telefone auf “Basis 4” einstellen dann “Mobilteil paaren” mit Pin 0000 am Telefon eingeben und gleichzeitig im Einrichtungsassistenten die DECT-Paarung anstossen. Nach mehreren Versuchen hat auch das dann schließlich funktioniert.

Remote Web-Zugriff

Was muss ich machen, um meinen Microsoft HomeSever wieder von außen d.h. vom Internet, zu erreichen?

Der Windows HomeServer kann den Remote Web-Zugriff automatisch mit einem Assistenten einrichten. Dazu ist es erforderlich, dass der Router d.h. die FritzBox das “UPnP” unterstützt.

Die FritzBox kann das (im Gegensatz zum SpeedPort), die UPnP-Funktion muss aber “freigeschaltet” werden.

Auf der Benutzeroberfläche der FritzBox zuerst unter dem Menüpunkt System -> Ansicht die “Erweiterte Ansicht” einschalten. Dann unter dem Menüpunkt Heimnetz -> Netzwerk auf dem Reiter “Programme” auch den Haken im dritten Absatz “Änderungen der Sicherheitseinstellungen über UPnP gestatten.

Dann auf dem Windows HomeServer:

  • Das “Dashboard” aufrufen.
  • klicken auf die Schaltfläche “Start” auf der oberen Leiste ganz links.
  • unter “Diese Aufgaben abschließen” anklicken “Remotewebzugriff einrichten”‘

Dynamisches DNS

Zum Zugriff von außerhalb z.B. Remote Web oder auch VPN ist eine feste Adresse für die FritzBox sehr sinnvoll.

Mein ganz alter Account bei DynDNS funktioniert nicht so richtig. Deshalb habe ich nun einen neuen Account bei www.NO-IP.com eingerichtet. Dort haben die DNS-Namen die Form: xxxxxxx.zapto.org.

In der Oberfläche der FritzBox kann man das dynamische DNS einrichten unter:

Internet –> Freigaben –> Dynamisches DNS

Nun kann ich meine FritzBox vom Internet aus unter der URL. https://xxxxxx.zapto.org erreichen.

Eine solche feste Adresse für die FritzBox ist beispielsweise sinnvoll, wenn die VPN-Funktion eingesetzt werden soll.

Neue Funktionen

Fax-Funktion

Als erstes versuche ich die Fax-Funktion der FritzBox zu aktivieren.

Das geht ganz einfach mit der Benutzeroberfläche der FritzBox im Internet-Browser.

Ich möchte eingehende Faxe nicht lokal abspeichern, sondern mir auf eine E-Mail-Adresse weiterleiten lassen. Da bietet mir der Fax- Einrichtungsassistenten Dinge zum Einstellen an, die ich nicht sofort verstehe und deswegen zunächst falsch eingebe. Der Assistent testet diese Eingaben aber sofort und meldet richtigerweise, dass es so noch nicht funktioniert.

Aber wo in der Benutzeroberfläche der FritzBox kann ich diese falschen Einstellungen jetzt korrigieren? Da muss man erst einmal herausfinden, das dies nicht unter der Rubrik “Fax-Funktion”, sondern unter dem eigenständigen Punkt “Push Service” zu geschehen hat. Wenn ich dort dann E-Mail-Adresse, SMTP-Server, E-Mail User-Id und E-Mail Passwort richtig eingebe, verläuft auch der Test positiv und ich eine erhalte tatsächlich eine kleine E-Mail in der E-Mail-Inbox auf meinem iPhone.

Fritz!NAS einrichten

Wir stecken einen USB Memory-Stick hinten in die FritzBox.

Unter “Heimnetz” –> “Speicher (NAS)” aktivieren wir den xxx

Speicher an der Fritz!Box: Häckchen bei: Speicher (NAS) aktiv

Fritz!NAS benutzen

Aus dem häuslichen LAN lässt sich der so eingerichtete NAS-Speicher wie folgt ansprechen:

  1. Mit dem WebBrowser über http://fritz.nas
  2. Als Samba-Share. \fritz.boxFRITZ.NAS
  3. Über FTP über ftp://fritz.box z.B. mit WinSCP oder FileZilla

Fernzugang per VPN

Als Voraussetzung für den Fernzugang per VPN richten wir per “Dynamischem DNS” eine feste Internet-Adresse für die FritzBox ein.

Das Programm “FritzBox Fernzugang einrichten” herunterladen vom VPN-Service-Portal bei AVM.

Mit Hilfe dieses Einrichtungsprogramms kann man auf einem Computer außerhalb des häuslichen LANs die Konfigurationsdaten für das VPN erzeugen.

Diese Konfigurationsdaten muss man in die FritzBox importieren, um die VPN-Funktionalität auf der FritzBox zu aktivieren.

Von außerhalb des häuslichen LAN kann man nun mit jedem geeigneten VPN-Client über die FritzBox auf das LAN zugreifen. Das iPad hat standardmäßig eine solche VPN-Client-Funktion…..

Apps für iPhone und iPad

Bisher habe ich zwei Apps ausprobiert:

MyFritz!App

Mit dieser App muss man sich als erstes im häuslichen LAN an der FritzBox anmelden. Dadurch wird ermittelt, unter welcher Adresse im Internet Web ansprechbar ist. (xyzxyzxyz.myfritz.net).

Nun kommt man mit dieser App von überall her auf die Benutzeroberfläche der FritzBox.

Fritz!App Fon

Mit dieser App kann man sein iPhone zum Telefonieren im häuslichen LAN verwenden.