Selber websites erstellen
Download
1 / 44

Selber Websites erstellen - PowerPoint PPT Presentation


  • 89 Views
  • Uploaded on

Selber Websites erstellen. PC-Club Wil, 3. Juli 2002. Programm. Strategien Am Anfang steht die Idee Werkzeuge Grafikquellen Todsünden Profitools Nützliche Tipps. Am Anfang steht die Idee!. Was will ich mit meiner Homepage? Privat Familie vorstellen Hobby präsentieren

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Selber Websites erstellen' - lamya


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Selber websites erstellen

Selber Websites erstellen

PC-Club Wil, 3. Juli 2002


Programm
Programm

  • Strategien

  • Am Anfang steht die Idee

  • Werkzeuge

  • Grafikquellen

  • Todsünden

  • Profitools

  • Nützliche Tipps


Am anfang steht die idee
Am Anfang steht die Idee!

  • Was will ich mit meiner Homepage?

    • Privat

      • Familie vorstellen

      • Hobby präsentieren

      • Gleichgesinnte finden

    • Firma

      • Werbung

      • Kunden gewinnen

      • Lieferanten gewinnen

      • Mitarbeiter rekrutieren

      • Kosten senken


Inhalte m ssen geordnet werden
Inhalte müssen geordnet werden

  • Einfach, logisch, konsistent

  • Selbsterklärend – für jeden verständlich

    • Auswahl der Begriffe für Menüs

  • Der Informationsmenge angepasst

  • Geringe Verschachtelung/Ebenen

  • Schnell

    • Schnell am Ziel mit wenigen Klicks

  • Orientierungshilfen

    • Aktuelle Position immer ersichtlich


Experiment
Experiment

  • Einige Begriffe werden gleich für 60 Sekunden eingeblendet.

  • Merke Dir soviele wie möglich.

  • Danach:

    • Nimm Papier und Stift zur Hand.

    • Notiere alle Begriffe, an die Du Dich erinnern kannst.


Experiment1

Stempel

Nussbaum

Reifenventil

Diskette

Fenster

Unterhose

Handbuch

Fussball

Zoo

Traktor

Schwimmbad

Augentropfen

Taschenrechner

Feuerwehr

Ventilator

Bodensee

Bleistift

Matterhorn

Experiment

  • 20 Begriffe werden gleich für 60 Sekunden eingeblendet.

  • Merke Dir soviele wie möglich.

  • Danach:

    • Nimm Papier und Stift zur Hand.

    • Notiere alle Begriffe, an die Du Dich erinnern kannst.


Experiment2
Experiment

Bitte Begriffe notieren!

  • 20 Begriffe werden gleich für 60 Sekunden eingeblendet.

  • Merke Dir soviele wie möglich.

  • Danach:

    • Nimm Papier und Stift zur Hand.

    • Notiere alle Begriffe, an die Du Dich erinnern kannst.


Experiment3
Experiment

  • 20 Begriffe werden gleich für 60 Sekunden eingeblendet.

  • Merke Dir soviele wie möglich.

  • Danach:

    • Nimm Papier und Stift zur Hand.

    • Notiere alle Begriffe, an die Du Dich erinnern kannst.



Berlegungen zur struktur
Überlegungen zur Struktur

  • Optimal: 7 Elemente zur Auswahl

  • Flache Struktur (eindimensional)

    • Sehr übersichtlich

    • ideal für wenig Informationen

  • Zweidimensional

    • Klassisch bei KMU-Homepages

    • Komfortabel, übersichtlich

    • Komprimisse nötig (Firmenstrukturen aufbrechen)

  • Mehrdimensional

    • unübersichtlich, unverständlich

    • benötigt viel Platz auf Bildschirm


Ms word
MS Word

  • Nur einfachste Pages erstellbar.

  • Export in HTML-Datei sehr inneffizient.

    • Datei sehr gross

    • Viel unnützer Code

    • Wenig Kompatibilität

  • Nicht empfehlenswert.


Profitools
Profitools

  • Macromedia DreamWeaver

  • Adobe Golive

  • MS Frontpage

    • Grosser Lernaufwand

    • HTML-Kenntisse zwingend notwendig

    • Interaktion (z.B. Gästebücher) nicht einfach zu realisieren.

    • Kosten


Yahoo geocities
Yahoo Geocities

  • Kostenloser Webspace für private Homepages.

  • Umständliche URLhttp://www.geocities.com/huwilerm

  • Werbung wird eingeblendet

  • Bequeme PageWizards für schnelle Seitenerstellung.

  • Top Page-Editor mit vielen Möglichkeiten

  • Statistiken

  • Kein FTP-Upload möglich

  • Leider alles in englisch (oder deutsch, aber mit wenigen Möglichkeiten)


Lycos tripod
Lycos Tripod

  • 50 MB kostenloser Webspace für private Homepages.

  • Umständliche URLhttp://mitglied.lycos.de/huwilerm

  • Werbung wird eingeblendet

  • Bequeme PageWizards für schnelle Seitenerstellung.

  • Statistiken

  • Seitenupload per FTP

  • Datenbanken PHP4/mySQL

  • Alles in deutsch


Webserver

Auswahl des Hosters


Organisatorischer ablauf
Organisatorischer Ablauf

  • Domain-Reservation (SWITCH)

  • Anmeldung bei Provider

    • Webhosting

    • Mailhosting

  • Domain-Aktivierung (direkt bei SWITCH oder durch den Provider)

  • Daten-Upload via FTP


Domain registrierung
Domain-Registrierung

  • De schnäller isch de Gschwinder -> www.switch.ch

  • Einhaltung der Gesetze

    • Markenrecht

    • Namenrecht

    • Wettbewerbsrecht

  • Gut merkbare (und aussprechbare) Domainnamen bevorzugen!

  • Kosten wiederkehrend (CH 48.- + einmalig 80.-)

  • Achtung vor Fast-Gratis-Angeboten (vor allem bei .DE-Domains). Häufig bleiben die Namen auf den Provider eingetragen... Probleme/Kosten beim Provider-Wechsel.


Webserver kenndaten
Webserver-Kenndaten

  • Offensichtlich

    • Kosten für Einrichtung sowie wiederkehrende Kosten.

    • Webspace (zur Verfügung stehender Speicherplatz)

    • Datentransfer-Menge

    • Anzahl E-Mail-Adressen

    • Zusatzdienste (Statistik, CMS, Backup, etc.)

  • Versteckt/schwer zu ermitteln

    • Zuverlässigkeit

    • Erreichbarkeit/Geschwindigkeit

    • Kooperation/Stabilität bei CGI-Skripts

    • Kundensupport

    • Kündigungsfrist


10 tods nden beim webdesign
10 Todsünden beim Webdesign

1.

Die Seite lädt und lädt – und es gibt weder etwas zu sehen noch zu lesen.


Kompression
Kompression

  • GIF

    • 2 bis 256 Farben (2,4,8,16,32,64,128,256)

    • Gute Kompression bei gleichmässigen Mustern/Flächen

    • Ideal für Grafiken, Diagramme, Schriften

    • Ungeeignet für Fotos

    • Möglichkeit, eine Farbe als transparent zu definieren.

    • Verlustfreie Kompression


Kompression gif
Kompression (GIF)

256 Farben

31‘464 Bytes

32 Farben

16‘368 Bytes

16 Farben

11‘189 Bytes

4 Farben

4‘474 Bytes


Kompression1
Kompression

  • JPG

    • Millionen von Farben

    • Gute Kompression bei ungleichmässigen Mustern (Fotos)

    • Ideal für Fotos

    • Eher ungeeignet für starke Kontraste (Schriften)

    • Keine Transparenz

    • Farbverschiebungen durch Kompression-

    • Verlustbehaftete Kompression (Artefakte, besonders beihohen Kontrasten)


Kompression jpg
Kompression (JPG)

100%

44‘784 Bytes

75 %

12‘188 Bytes

50 %

8‘405 Bytes

25 %

5‘565 Bytes

5 %

2‘382 Bytes


10 tods nden beim webdesign1
10 Todsünden beim Webdesign

2.

Design auf 1024×768 ausgelegt.

640 × 480 4% 100%

800 × 600 40% 96%

1024× 768 46% 56%

1280×1024 9% 10%

1600×1200 1% 1%



10 tods nden beim webdesign3
10 Todsünden beim Webdesign

3.

Ausgefranste und schlechte Bilder.

Cliparts aus Standardsammlungen.

Schlechte Bilder werfen ein ebenso schlechtes (unprofessionelles) Licht auf die Firma.


Www photodisc com de
www.Photodisc.com/de

  • Professionelle Grafiken und Fotos.

  • Sind nicht gratis, dafür umsoeinzigartiger.

  • Wenige Deja-vu's.

  • Geeignet als Ideen-lieferant.


Www corbis com
www.corbis.com

  • Für private und schulische Nutzung speziell preisgünstige Angebote.



10 tods nden beim webdesign4
10 Todsünden beim Webdesign

4.

Verwendung möglichst vieler Schriftarten

  • Vermittelt Unruhe und Unprofessionalität

  • Die richtige Schriftwahl kann das Geschriebene unterstützen.

  • Leser benötigt dieselbe Schrift auf seinem Rechner! -> in Grafikprogramm gesetzte Schrift.


Schrifttypen
Schrifttypen

  • Serifenschrift

    • Optimale Lesbarkeit, auch für längere Texte


Schrifttypen1
Schrifttypen

  • Serifen-lose Schriften (Sans-Serif)

    • Ideal für Überschriften

    • Teilweise optimiert für Bildschirm (Verdana)


Schrifttypen2
Schrifttypen

  • Zierschriften

    • Gemässigt und gezielt einsetzen.

    • Auf Charakteristik achten.

    • Lesbarkeit geht vor Originalität!


10 tods nden beim webdesign5
10 Todsünden beim Webdesign

5.

Ausschluss von Nutzergruppen

  • Nutzer von bestimmten Browsern (WebTV, Palm, Psion, WAP)

  • Nutzer mit Sehschwäche (Schriftgrössen)

  • Blinde Anwender (Grafiklinks ohne ALT-Tag)


Ansicht mit einem Text-Browser. Blinde Anwender verwenden solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.


10 tods nden beim webdesign6
10 Todsünden beim Webdesign solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

6.

Man findet den Eingang zu den eigentlichen Inhalten nicht. (Navigation)

Es ist erstaunlich wie Autoren den Zugang zwischen unzähligen Buttons und Grafiken oder in komplizieren Imagemaps verstecken


10 tods nden beim webdesign7
10 Todsünden beim Webdesign solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

7.

Wenn man ein Formular ausfüllen muss, bevor man etwas zu sehen bekommt.

  • Zu komplexe, seitenlange Formulare.

  • Zwingende Eingabefelder (z.B. E-Mail-Adresse, Fax oder Strasse)


10 tods nden beim webdesign8
10 Todsünden beim Webdesign solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

8.

Wenn sich unvermittelt und ungefragt neue Browserfenster öffnen.

Wer sich im Fensterdschungel verliert, sucht das Weite.


10 tods nden beim webdesign9
10 Todsünden beim Webdesign solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

9.

Last update: 13.10.1996

Hoffen wir, Ihre Firma hinkt der Zeit nicht ebenso nach...


10 tods nden beim webdesign10
10 Todsünden beim Webdesign solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

10.

Broken linksJavaScript-ErrorsFehlende Bilder

Ohne seriöse Tests gewinnt man keinen Pokal!


10 tods nden beim webdesign11
10 Todsünden beim Webdesign solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

  • http://www.snafu.de/~tilman/xenulink.html


Www webmasterplan de
www.webmasterplan.de solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

  • Checks

    • Ladezeit, Link, HTML

  • Tools

    • Meta-Tag Generator

    • Keyword-Datenbank

    • Browser-Screenshot

    • Image-Komprimierung


Dr web www drweb de
Dr. Web (www.drweb.de) solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

  • Die Infoquelle für Webdesigner

  • Zahlreiche Tipps und Tricks


Besten dank
Besten Dank! solche, da diese über Zusatzgeräte (Braille-Lesezeile, Sprachausgabe) nutzbar werden.

Bis irgendwann bei

www.huwi.ch


ad