Wie kann man eine Webseite eigentlich selber machen … ?

Wie Word den reinen Text codiert, um dadurch Zeilenumbrüche, Überschriften und Farben darzustellen, muss auch für den Browser der Text codiert werden, damit er weiss, wie er den Text darstellen soll. Im Gegensatz zu Word braucht es dazu aber keine kostenpflichtige Software (Word), es reicht der einfache Texteditor.

Mit dem Editor kann der Text mit HTML so ausgezeichnet werden, dass Inhalt in jedem Browser strukturiert und somit verständlich dargestellt wird.

• Hypertext Markup Language (HTML)
  Code für Hypertext (Webseiten mit Text, Links und Bilder)
• Befehle (sogenannte Tags) weisen Textteilen eine semantische Bedeutung zu.
  Beispiel <h1> für Überschrift erster Ordnung oder <br> für einen Zeilenumbruch
• Die Tags werden durch Attribute ergänzt
  Beispiel align=”right” für das rechte Ausrichten einer Überschrift
• Alle Tags und Attribute bei SELFHTML

CSS

Rein mit HTML war es möglich, weltweit über technische Grenzen hinweg zu kommunizieren – vorausgesetzt der Sender hat seine Texte mit HTML ausgezeichnet und der Empfänger benutzt zum Lesen eine Browser.

Dochmit zunehmender Verbreitung des Internets wurden auch neue Bedürfnisse wach:
Die Texte sollten verschieden groß, bunt oder mit Farbe hinterlegt werden.

In Zeiten des Browserkriegs ermöglichte dies jeder Browser auf seine eigene Art und Weise, die aber der jeweils Browser andere nicht verstand. Aus dieser Zeit kommt das „optimiert für XY).

Dabei gab es schon seit Mitte der 1990er Jahre die HTML-Ergänzungssprache CSS.

• HTML-Ergänzungssprache, um Text-Inhalte wie in Word zu formatieren
• Cascading Style Sheets – Kaskadierende Stilanweisungen
• Stil-Kaskade:
  • Website weite Stil-Anweisung
    (Alle Überschriften der Website sind grün, 20px groß und fett)
  • Seiten weite Stil-Anweisung
    (Auf dieser Spezialseite sind alle Überschriften rot)
  • Lokale Stil-Anweisung
    (bis auf diese konkrete Überschrift, die ist blau)
• Referenz: SELFHTML-CSS – Alle CSS-Styles mit Beispielen

Javascript

• Echte Programmiersprache (im Gegensatz zu HTML und CSS)
• Wichtige Funktion bei Browserweiche
• Früher häufig verwendet für nette und teils nervige Effekte
  Spiele wie Memory oder Quiz
• Heute wichtiger Teil der Web 2.0 Technik Ajax
  Beispiel Sortieren von Tabellen
• Referenz: SELFHTML-Javascript

Inhalt (Texte, Bilder …) mit HTML, CSS und JS bilden den statischen Code einer Internetseite.

Dieser Code ist für den Besucher der Website unveränderlich und fest. Statische Webseiten können nur geändert werden, wenn direkt auf dem Server der Code geändert wird. Statische Webseiten können nicht durch Eingaben auf der Webseite selber verändert werden.

Statisches Web 1.0 ade

Statische Websites gibt es bis heute – Beispiel sind ein Großteil unserer Seiten im Geschäftsbereich

• Einweg-Kommunikation = Monolog
• statischer, unveränderlicher Code → keine Veränderung oder Anpassung der Web-Seiten vom Benutzer möglich
• unveränderliche, statische HTML-Seiten werden komplett auf der Festplatte des Server gespeichert und vom Browser wie codiert dargestellt

Dynamisches Web 2.0 hallo:

Doch viele Webseiten – insbesondere im sogenannten eCommerce – bauen auf die Kommunikation mit dem Besucher

• Dynamische Websiten ermöglichen einen Dialog zwischen einem Besucher und der Website, Beispiel Bahn.de
  (einfaches Beipiel aus dem Geschäftsbereich: Publikationen)
• Auch die mehrseitige Kommunikation n:m innerhalb von Gruppen ist möglich → das Web 2.0 entsteht
• dynamische Websites brauchen zum HTML-Code weiteren Code einer dynamische Websprache wie PHP
• PHP-Seiten können ohne Server nicht dargestellt werden im Gegensatz zu statischen HTML Seiten
• PHP-Seiten sind nur Bauplan, der externe Inhalte je nach Anfrage zusammenstellt – nie die gesamte sichtbare Website.
• Die Inhalte dynamischer Websites liegen meist in Webdatenbanken

Erst durch dynamische Websiten ist eine wirkliche Online-Kommunikation möglich.
Sie sind die technische Grundlage des Web 2.0 – des Mitmach-Webs

Szenario 1:
„Ich habe private und berufliche Interessen und würde mich gerne aktuell über das Internet darüber informieren. Wie geht das, ohne Stunden mit dem Abklappern von zig Webseiten zu verbringen?“

Szenario 2:
„Wir von den Bayerischen Staatsforsten wollen die Berichterstattung und ggf. Kommentierungen in den Onlinemedien im Blick haben. Wie können wir nun das Web 2.0 effizient nutzen ohne den Überblick zu verlieren?

RSS Feed – der Nachrichten-Direktkanal

• Vorteile des RSS-Feeds
• ähnlich Newsletter, aber viel komfortabler und müllt das Postfach nicht zu
• zeigt automatisch jeden neuen Beitrag der abonnierten Webseite
• Knappe Einführung und Anleitung bietet Spiegel-online

• RSS-Feed entweder von relevanten Websiten abonnieren (wenn angeboten) oder über das RSS-Verzeichnis suchen
• alle Web 2.0 Plattformen lassen sich über RSS-Feeds abfragen (Youtube, Flickr, GoogleNews …)

• zur Anzeige sind RSS-Reader nötig
  • Outlook
  • Browser direkt oder über Lesezeichen
  • spezialisierte RSS-Reader (z.B. Google-Reader)
  • Google-Desktop als einfacher RSS-Reader
• RSS-Reader können abonnierte RSS-Feeds verschlagworten und gruppieren und dies wieder als RSS-Feed exportieren
• Dies kann wieder als RSS z.B. in die iGoogle-Oberfläche eingebunden werden

Google-Desktop

• personalisierbare Oberfläche für:
  • genutzte Google-Dienste wie Email und Kalender
  • RSS-Reader für einzelne RSS-Abonnements
  • weitere Dienste wie bahn.de
  • …

• über den iGoogle-Desktop können die wichtigsten Angebote“ leicht im Auge behalten werden”
• Effizienter Überblick über Online-Veröffentlichungen für persönliche Interessen oder Wettbewerbsanalyse

Ausblick

• Web 2.0 setzt verschiebt den Fokus beim Arbeiten am Computer weg vom lokalen PC zu den Netzplattformen (sog. Cloud)
• Beispiel Google Onlinewerkzeug Text & Tabellen:
  ersetzt lokal installierte Office-Software und bringt Groupware-Eigenschaften zum gemeinsamen Bearbeiten und Veröffentlichen mit
• Die fortschreitende  Entwicklung weg vom lokalen Rechner hinein „in die Cloud“ ist der Weg zum Web 3.0

Internet:

• AELF
• www.forst.bayern.de und www.lwf.bayern.de
  • Besonderheiten: Podcasts, Suche, RSS …
  • Zugriffszahlen und SEO
  • Neues Layout im Geschäftsbereich StMELF

Intranet

• Einstieg für Fachinfos und Materialien
• Neukonzeption:
  Das InTRAnet wird zum Mitarbeiterportal  
  • Ziel eines Mitarbeiterportal ist es, die Verständigung und Wechselbeziehungen innerhalb eines Unternehmen und seiner Beschäftigten zu unterstützen, zu vereinfachen und zu verbessern.
  • Funktionen des künftigen Mitarbeiterportals auf Basis der Portalsoftware Intramo

Webseiten mit Beteiligung der Bayer. Forstverwaltung oder der LWF

• waldwissen.net
• Forstwirtschaft schafft Leben
• Arbeitsgemeinschaft Forstliche Standorts- und Vegetationskunde
• Sektion Forstgenetik (im Aufbau)
• Forstzentrum und Cluster Forst und Holz in Bayern

Neue Wege im Internet

• Podcasts unter www.forstcast.net
• Waldradio unter laut.fm/forstcast
• Kurznachrichten zur Forstwirtschaft unter http://twitter.com/forstwirtschaft
• Videos auf Youtube
• Artikel
  • Podcast, Twitter und Internetradio
    Crossmedia in der forstlichen Informationsarbeit
    (Forst und Holz 9/2010 – Amereller, Seidl – LWF)
  • Zur Medienarbeit im Forstamt
    Public Relations: Überziel „Aufmerksamkeit“ oder Reizüberflutung?(AFZ 6/2010 – Horst Sproßmann – Thüringen Forst)

Weitere forstliche Webseiten

• http://www.baysf.de
• http://www.waldundklima.net/
• http://www.treffpunktwald.de/wald-online/
• SDW
• http://www.dfwr.de/
• http://www.nationalpark-bayerischer-wald.de/
• AFZ
• …

Bilddatenbanken

• Vorstellung und Nutzungshinweise
• Hinweis neue Bilddatenbank pixelbox für den Geschäftsbereich StMELF

Arbeitsgemeinschaft Forstliche Standorts- und Vegetationskunde

Eine Suchmaschine beinhaltet eine riesige Datenbank, die einerseits die Suchbegiffe und andererseits die zugeordneten Adressen von passenden Websiten enthält (Beachte: keine Livesuche, nur ein Index).

Sie geben bei einer Suchmaschine einen oder mehrere Suchbegriffe ein und erhalten als Ergebnis eine Liste mit gefundenen Adressen.

1. Suchmaschinen

• Kataloge (wie Web.de, Lycos, Altavista)
  Liste Kataloge
• Suchmaschinen (wie Google, Yahoo, Bing)
  Liste Suchmaschinen
• Spezielle Suchmaschinen
  • Forestle
  • Semager (Beispiel Wald)
  • …
• Weitere Infos zu Suchmaschinen: www.suchfibel.de

2. Finden mit der Suchmaschine Google

• Funktions-Aufrufe für die Textsuche
  • Bestimmte Dokumentenart:  (kontonummer filetype:xls)
  • Suchbegriff in einer bestimmten Website:  (holz site:www.lwf.bayern.de)
  • Verlinkungen prüfen: (link:www.lwf.bayern.de)
  • Suchbegriffe in der Internetadresse inurl: (allinurl: waldbesitzer)
  • Funktionsaufrufe Übersicht
• Operatoren:
  • Begriffe ein- oder ausschliessen
  • Feststehende Begriffe suchen
• Erweiterte Google-Suche
• Nicht nur eine Textsuche
• Mehr Optionen

3. Gefundenwerden mit Suchmaschinen

• Wichtige Faktoren für das Ranking auf der Ergebnis-Liste:
  • Pagerank der Seite (Wikipedia)
    Anzahl und Qualität der Links, die auf eine Website zeigen
  • Inhaltliche Qualität der Seite
    „Erstellen Sie eine Website mit klar strukturiertem Aufbau und Textlinks“ (Google-Richtlinien für Webmaster)

4. Suchmaschinen-Optimierung (SEO)

• Optimierung der Verlinkung
• Optimierung des Textes auf bzgl. Struktur und wichtige Keywords

Downloads für Spezialisten:

• Professionelle Suchmaschinen-Optimierung:
  Wie Sie Ihr Ranking bei Google & Co. nachhaltig verbessern,
• Erfolgreiche Suchbegriffe finden:
  Welche Keywords Ihre Kunden im Web verwenden

• Browser-Trends:
  • Firefox lässt Federn (Spiegel Online vom 7.6.2010)
  • Internet Explorer lässt Federn (Spiegel Online vom 4.10.2010)
  • Aktueller Stand der Browsernutzung

• Internet in Zahlen:
  • Ende 2010 werden 2 Milliarden Menschen weltweit das Internet nutzen (Studie der Internationalen Fernmeldeunion vom Oktober 2010)
  • Onlinenutzung in Deutschland 2010: 50 Mio. = 70% (ARD-Onlinestudie 2010)
  • Derzeit werden weltweit täglich 220 Milliarden Emails versandt – 90 % davon sind Spam ( Quelle1, Quelle2 )
  • Weltweit werden pro Sekunde werden fast 200.000 SMS verschickt (Quelle)
  • Deutsche verschicken 34 Milliarden SMS pro Jahr (Heise-online)

Webseiten sind auf sogenannten Servern gespeichert. Das sind Computer, die im Gegensatz zu den Clients (PC’s in den Haushalten und Büros) permanent miteinander verbunden sind und die die notwendige Software besitzen, um miteinander zu kommunizieren und die auf Ihnen gespeicherten Webseiten an die PersonalComputer = Clients auszuliefern. Die Web-Server sind das Internet.

Damit der Browser (Firefox, Internet Explorer) eine bestimmte Webseite anzeigen kann, muss man ihm mitteilen, wo imInternet, d.h. auf welchem Server diese Webseite liegt. Dazu wird die sogenannte URL verwendet, eine weltweit einzigartige Adresse. Beispiel http://www.geo.de - Dies ist die Startseite vom Magazin GEO.

Wählt man von der Startseite ausgehend weitere Unterverzeichnisse an, und schließliche eine Datei, dann hat man einen Beitrag auf dieser Webseite ausgewählt. Das ergibt im Beispiel schließlich folgende Adresse: http://www.geo.de/GEO/natur/oekologie/tag_der_artenvielfalt/53073.html

Diese Adresse setzt sich aus genau definierten Bestandteilen zusammen:

• http://
  Steht für das verwendete Übertragungsprotokoll und muss nicht extra eingetippt werden. Die Webserver wissen damit, was sie mit den Daten tun sollen.
• www.
  Ist der „Dienst“, kann meist auch weggelassen werden
• geo.de
  Das ist die sogenannte Domain.
  Sie besteht aus der Haupt-Domain (häufig ein Länderkürzel) und einem frei gewählten, aber einzigartigen Begriff.
  Domains werden von Providern verwaltet und können dort gegen Entgelt gebucht werden.
• /GEO/natur/oekologie/tag_der_artenvielfalt/
  Unterverzeichnisse auf dem Server, ähnlich der Verzeichnisstruktur auf Ihrem Rechner
• 53073.html
  Name der ausgewählten Datei = die konkrete Webseite

Wir über uns – So schreiben Sie eine gute Selbstdarstellung

Für Menschen texten heißt für Suchmaschinen texten

Tipps zum Browser Internet-Explorer

siehe dazu:  FüAK-Seminarunterlage zum IE 7

Browser-Oberfläche:

• Titelzeile -> bei Erstellen der Seite in Imperia beachten
• Pulldown für letzte Adressen
• Schnellregisterkarten
• „Aktualisieren“ in der Befehlsleiste
• Menüleiste für weitere Befehle (-> rechte Maustaste)
  • Datei
  • Ansicht
  • Extras
• Statusleiste zeigt Informationen wie Linkziel und gibt Möglichkeit zum Vergrößern
• Explorerleiste für Favoriten

Ausgewählte Funktionen:

• Startseite/n aufrufen und einrichten
• Favoriten anlegen und verwalten
• Drucken/Vorschau
• Zeichensatz
• Die rechte Maustaste

• IE und Google
  • Adressfeld ist KEIN Suchfeld
  • -> Suchfeld mit voreingestellter Suchmaschine
  • Weitere Suchmaschinen können hinzugefügt werden
  • auf der Seite suchen
  • Spezialitäten der Google-Suchleiste
    • rechnen
    • umrechnen
    • Definitionen suchen (z.B. Baum)

• Datenschutz und Sicherheit
  • Extra: Browserverlauf löschen und mehr

• Addons für den IE
  • Die besten Add-Ons für den Internet Explorer I
  • Die besten Add-Ons für den Internet Explorer II

• Weitere Hilfen yum Internet Explorer
  • Funktionen
  • Videos

Firefox – die Browser-Alternative

Es muss nicht immer der Internet Explorer sein: Alternative Webrowser schützen häufig besser vor Datenschnüfflern und bieten mehr Funktionen
(sueddeutsche.de – Firefox, Opera und Co. – Sicherer Surfspaß )

• Firefox installieren und einrichten
• Firefox: Die Lesezeichen im Griff
• Firefox finetunen und erweitern

Firefox mit Addons erweitern:

• Werbung ausblenden mit Adblock
• Kommentierte Screenshots mit Fireshot
• Zentrale Liste mit offiziellen Firefox-Addons
• Deutsche Seite mit Addons

Grundprinzipien des Web 2.0

1. Das Web 2.0 ist allgegenwärtig, jeder kann es von überall über einen Browser nutzen
2. Software as a Service – Software wird nicht mehr als Produkt ausgeliefert und installiert, sondern als Dienst mit allen möglichen Geräten über das Web 2.0 genutzt.
3. Innovation durch Zusammenbau – Jede Web-2.0-Anwendung und ihre Daten kann zur Basis einer nächsten Web-2.0-Anwendung werden (sog. Mashups)
4. Grundlage dafür: Einfachheit und Offenheit der Web-2.o Technologien
5. Durch intensive Verlinkungen von Daten, Seiten und Diensten entsteht eine Art „Architektur der Partizipation„

Kann ich das Web 2.0 sehen?

• Web 2.0 als Großstadt
• Web 2.0 als Farb-Prisma
• Mashups – Pro und Contra

Web 2.0 Beispiele

Wikis

Wikis sind Webseiten, dessen Inhalte von den Benutzern nicht nur gelesen, sondern auch online direkt im Browser geändert werden können. Zum Bearbeiten der Inhalte wird meist eine vereinfachte Auszeichnungssprache verwendet.

• Berühmte Beispiele sind Wikipedia undWikiLeaks
• Wikipedianer werden und Beiträge bearbeiten
• Wikis können auch selbst installiert und betrieben werden → Mediawiki
• Wikis gut geeignet für gemeinsames Erarbeiten von Wissen

Blogs

• Ein Beispiel für die Wirksamkeit von Blogs:
  Loveparade oder Flashmob
• Blogs sind gut geeignet für Kommunikation über und Darststellung von aktuellen Beiträgen, z.B. als Gartentagebuch oder ÖJV-Blog
• Blogs können auch selbst betrieben werden, z.B. mit WordPress wie dieser Workshop-Blog

Selber Bloggen

Es gibt zwei Möglichkeiten, sich einen eigenen privaten Blog einzurichten:

• eigene Installation auf einem Webspace
  Kosten < 5,00 €/Monat, etwas KnowHow erforderlich
• Mit WordPress in 5 Minuten online gehen
  Kostenloses komplett eingerichtetes Blog anlegen.

• Blog-Start Serie für Einsteiger
  Artikel-Serie in rund 20 Teilen zum Start und Betrieb eines Blogs

Weitere Web 2.0 Plattformen

• Bilder- und Video-Communities wie Flickr oder Youtube
• SocialBookmarking wie Mr. Wong (Beispiel „Wandern“) oder Delicious
• SocialNetworks wie Facebook, Twitter oder Xing

Twitter – das Social-Web lässt grüssen

Twitter ist kein Hype mehr, es ist ein eindeutiger Trend und Trends bergen über kurz oder lang immer Möglichkeiten, die Reichweite der eigenen Marke zu verbessern.

Zum Beispiel Spiegel:
„Auf Twitter können Sie über neue Texte informiert werden – also gezwitschert bekommen – sobald wir einen neuen Artikel auf  SPIEGEL ONLINE veröffentlichen. Außerdem twittern wir bei ausgewählten Ereignissen live und führen dort auch Live-Debatten über einzelne tagesaktuelle Themen.“

Forstwirtschafts-Twitter der LWF:
Auch die LWF testet das Web 2.0 mit einem experimentellen Forstwirtschafts-Twitter zu Aktuellem aus Wald, Forst und der LWF.
Die LWF konnte bisher schon eine Reihe relevanter Follower gewinnen – Abonnenten unserer Kurznachrichten, die selbst twittern und damit den Bekanntheitsgrad der LWF und seiner Publikationen deutlich vergrößern:
Interforst, Deutscher Bauernverband DVB, Landesforsten Rheinland-Pfalz, ESRI, KWF, PEFC, Magazin GEO, NABU, ÖJV, das österreichische Lebensministerium …