Webseitengestaltung für Anfänger Eine Präsentation von Alexander Voigts.

Präsentation zum Thema: "Webseitengestaltung für Anfänger Eine Präsentation von Alexander Voigts."—  Präsentation transkript:

1 Webseitengestaltung für Anfänger Eine Präsentation von Alexander Voigts

2 Vorkenntnisse Sie können den Computer ein- und ausschalten und grundlegend bedienen. Sie wissen was eine Webseite und ein Browser und eine Suchmaschine ist. Sie wissen grob, was ein Programm ist und auch kennen vielleicht schon eine Programmiersprache. Sie wollen etwas im Netz präsentieren

3 Was ist eine Webseite Auf einer Webseite kann jeder etwas für die Allgemeinheit am PC übers Netz sichtbar machen. Sie können statische und dynamische Inhalte nutzbar machen. Sie können Webbaukästen oder Content- managementsysteme, wie z.B. TYPO3 nutzen oder selber eine Seite mit HTML und css für die Darstellung und php, PERL oder Javascript für Auswertung und MYSQL für Dateninhalte nutzen.

4 Was kann ich sichtbar machen Sie können Ihre Firma im Netz erreichbar machen. Sie können als Privatperson etwas über Ihr Leben oder Ihre Aktivitäten erzählen. Sie können dazu formatierten Text und Medien, wie Bilder, Animationen, Sounds oder Filme verwenden.

5 Was sind statische und dynamische Inhalte Statisch sind z.B. formatierter Text der fest in der Webseite integriert ist, z.B. das Hauptmenü, das Impressum oder unveränderbarer Text Dynamische Elemente sind z.B. Formularauswertungen mit Datenbankzugriff in php und MySQL oder Fehler- und Hinweismeldungen in Javascript

6 Wer verwendet was Programmierfaule Leute, die nur eine Kleinigkeit im Netz anbieten wollen, können Baukästen benutzen, die von Webanbietern oft kostenlos bereitgestellt werden. Kleinfirmen, die nur ihre Firma vorstellen und vielleicht einen Webshop anbieten wollen können ein CMS mit Corporate Design und einen vorgefertigten Webshop benutzen

7 Programmieren von Webseiten Wenn Sie wirklich der Herrscher über ihre Webseite sein wollen und dynamische, formatierte Inhalte, Datenbankzugriff und aufwendigere Projekte, wie Plattformen, ihr eigenes CMS oder Dienste, so wie dynamische Grafiken oder Onlinespiele anbieten wollen, dann programmieren Sie doch ihre Webseite.

8 Crashkurs HTML Grundlagen der grundlegendsten Sprache im Worldwide Web

9 Was ist HTML HTML ist eine relativ leicht zu erlernende statische Formatierungssprache, die verwendet wird, um normalen Text und auch den Hintergrund passend darzustellen. Hierfür wird der Text zwischen 2 HTML – Befehle, so genannte Tags gestellt. Wenn Sie fortgeschritten sind und nur ein paar Tipps benötigen, bekommen Sie die auf www.selfhtml.org www.selfhtml.org

10 Das Grundgerüst HTML – „Befehle“ werden in spitzen Klammern geschrieben und nach ihrer Anwendung in spitzen Klammern mit einem „/“ – Zeichen vor dem Befehl geschlossen. Zunächst beginnt man das Programm mit und beendet es mit. Weitere wichtige Elemente des Grundgerüstes sind der und der.

11 Im steht zunächst der Title, die Überschrift der Folie Und zwar so Alex‘ Homepage Auch Javascript – und css - Quelltexte oder Link zu den meist ausgelagerten Modulen so wie Metaangeben für die Suchmaschinen, befinden sich im head. Metaangaben, die den Suchmaschinen helfen ihre Seite zu finden

12 Der wichtigste Gerüstbaustein ist der Body. In diesem Abschnitt werden die Webseitenelemente, die sichtbar auf der Homepage zu erkennen sind, beschrieben.

13 Der Body Innerhalb des TAGs …, (TAGs so nennt man HTML-Befehle), ist der Hauptteil der Webseite. Text innerhalb des - Tags, wird zunächst als solcher wiedergegeben. Er kann aber durch andere Tags formatiert werden.

14 WICHTIGE TAGS Crashkurs HTML

15 Die wichtigsten Formatierwerkzeuge … Überschrift 1. Unterüberschrift ist dann z.B. …. Die können noch bis Unterüberschrift 6 erweitert werden. Leerzeichen Zeilenvorschub (in HTML5 )

16 Textstrukturierung … Hierin findet man Absätze … Text, der so dargestellt wird, wie er z.B. in einem Listing drinsteht. Formatierungen oder Befehle innerhalb des pre-Tags werden ignoriert. steht für Zitate graphische Elemente Erklärtext für graphische Elemente Textstrukturierung können durch mit z.B. durch css definierte Zusätze weitergehend formatiert werden.

17 Trennlinien markiert eine waagrechte Trennlinie, die verschiedene Bereiche voneinander abtrennt. Zu css, später mehr. Das ist eine Formatiersprache für wiederkehrende HTML-Elemente.

18 Listen Es gibt geordnete, ungeordnete und seit HTML 5 auch beschreibende Listen … setzt den Anfang und das Ende einer ungeordnteten Liste. Hier steht immer z.B. ein – und dann der Listenpunkt innerhalb von … …. stellt eine geordnete Liste, die z.B. mit 1. 2. 3. …n. arbeitet, dar. Auch hier steht der Listenpunkt innerhalb von …

19 Beschreibende Listen

20 Tabellen Nun zum erstellen des Tabellenkonstrukts Die Tabelle befindet sich zwischen … … … … …. steht hierbei für die ganze Tabelle steht für Tabellenkopffelder (tablehead) steht für Tabellenreihe und steht für eine Tabellenspalte.

21 Mit dem folgenden Schema kann man die Spaltenbreite festlegen 1. Zeile, 1. Spalte 1. Zeile, 2. Spalte 1. Zeile, 3. Spalte Die erste Spalte hätte die Breite 80, die zweite 100 und die dritte 320. Es gibt auch die Möglichkeit mit % bei width zu arbeiten. Man kann zusätzlich den Befehlszusatz span verwenden, der beschreibt, wie viele Spalten mit einer Spaltenlänge width auftauchen sollen.

22 Das Attribut colspan (deutsch: Spalte überspannen) erlaubt es, eine Tabellenzelle nach rechts über mehrere Spalten auszudehnen. Das Attribut rowspan (deutsch: Zeile überspannen) erlaubt es, eine Tabellenzelle nach unten über mehrere Zeilen auszudehnen.

23 Links Man kann auf einer Seite auf einen anderen Teil der Seite oder eine andere Page mit einem Link verweisen: Das geht so: Link zur Suchmaschine Google Oder : Sprung zu Ziel auf der selben Webseite in Verbindung mit:

24 Bilder einfügen So kann das Bild bild.jpg auf der Seite hochgeladen werden. Bilder können mit dem Programm irfanview verkleinert werden oder mit den Befehlen width=numerischer Wert und height =numerischer Wert, zurechtgestutzt werden. Nichts ist nerviger als ein Bild, das ewig braucht, bis es geladen ist.

25 Weitere Webtechnologien Editoren, XAMPP und weitere Sprachen fürs Web

26 EDITOREN Eingabe des Quelltextes

27 Bekannte Editoren für Websprachen Dreamweaver – Umfangreicher Editor mit grafischer Oberfläche, in der man Element direkt einfügen kann und der Möglichkeit Text zu editieren. Er kostet allerdings ne Stange Geld. Notepad ++ – Editor auf Textbasis. Die meisten Computersprachen werden unterstützt. Außerdem ist er kostenlos

28 Homesite – Auf Websprachen ausgerichteter Editor, der umfangreiche Möglichkeiten der Textergänzung zur Verfügung stellt. Nicht ganz so teuer. Frontpage oder heute Microsoft Sharepoint und Microsoft Visual Studio – Microsofts Webeditor, der grafische Oberflächen und auch die.net – Sprachen unterstützt. Gibt es oft auf DVDs von Fachzeitschriften als Zugabe Eclipse – Wenn man Java - Applets oder ähnliches programmieren will, wie z.B. Java oder C++ - Applikationen ist das Programm erste Wahl. Auch das gibt es über die Presse. Zur Not tut es auch einfacher Texteditor, wie der von Windows mitgelieferte Editor

29 Notepad ++ Hier kann man zu jeder Sprache die passende Syntaxkorrektur wählen und hat Möglichkeiten mit Suchen, Ersetzen, kopieren und allem was ein guter Texteditor hat komfortabel das gewünschte Programm erstellen.

30 XAMPP Testwebserver

31 Was ist XAMPP XAMPP steht für Linux, Apache, MySQL, PHP und Perl XAMPP ist ein Testserver, der auf dem Computer zu Hause oder in der Firma läuft, auf dem man testen kann, ob die Serverapplikationen, die man programmiert hat auch laufen. Man kann es bei Apachefriends gratis downloaden, oder z.B. bei einer Zusatz-CD einer Fachzeitschrift

32 Unter dem Apacheserver kann man diesen mit php und PERL programmieren und mit MySQL definierte Datenbanken dynamisch be- und entfüllen. Eine einfache Anwendung ist die Auswertung von Formularen, die zunächst in php geschrieben wurden. Es lassen sich mit Hilfe von MySQL auch Daten erheben und abrufen

33 Beispiele

34 Einrichten von XAMPP XAMPP wird auf der Webseite: https://www.apachefriends.org/de/index.html zum Download zur Verfügung gestellt. https://www.apachefriends.org/de/index.html Es muss auf dem Wurzellaufwerk nach dem Download installiert werden. Man startet vor dem Programme testen, den XAMPP-Server. Die Programme werden im Ordner htdocs abgelegt. Die Startseite dort trägt den Namen index mit.html oder.php als Zusatz.

35 FORMULARERSTELLUNG MIT HTML UND AUSWERTUNG MIT PHP Wie geht das mit den Formularen?

36 Das Gerüst von Formularen Eingabewert 1 Eingabewert 2 In diesem Formular kann man 2 Werte, hier idealerweise Ziffern, eingeben. Durch die Tabelle wird das Formular übersichtlicher.

37 Auswertung dieses Formulars Berechnung $a=$_POST [A]; /*Die Werte aus dem Formular */ $b=$_POST[B];/*werden nach php übertragen. */ $c=$a+$b; /* Die Summe, der beiden Werte wird berechnet */ Echo „Das Ergebnis der Addition von “.$a.“ und „.$b:“ ist :“.$c.“.“; /* Ausgabe des Ergebnisses */ ?>

38 Weitere Arten von Formularbausteinen

39 JAVASCRIPT ZUR EINGABEVERBESSERUNGSAUFFORDERUNG Was passiert, wenn der Benutzer falsche Eingaben macht

40 Grundlegende Regeln Javascript ist, ähnlich wie php, eine ganz normale Computersprache. Sie arbeiten beide mit Variablen und echten Befehlen. Auf einen Befehl folgt ein Semikolon. Schleifen und andere Prozesse stehen zwischen geschweiften Klammern

41 Eventhandler Um auf ein Script zuzugreifen, kann man z.B. einen Event Handler benutzen, wie: onSubmit() onClick() ondblClick() Weitere finden Sie unter: http://wiki.selfhtml.org/wiki/JavaScript/Event /%C3%9Cbersicht http://wiki.selfhtml.org/wiki/JavaScript/Event /%C3%9Cbersicht

42 Aufrufen des Skripts durch ein Formular Javascripttest Function test(){ Alert („Sie haben Text eingegeben!“>; } Eingabe =

43 Erklärung des Skripts Im Head erscheint das Skript, das die Meldung: „Sie haben Text eingegeben“, ausgibt. Im body folgt das Formular, welches bei einem Mausklick, mithilfe des passenden Eventhandler zu dem Javascript wechselt. Für dieses Programm, das nicht Server – sondern clientseitig ausgeführt wird, muss man Javascript auf dem PC aktiviert haben.

44 Weiteres Mithilfe solcher Javascripte kann man z.B. mit regulären Ausdrücken die Eingaben der Benutzer überwachen und notfalls bei Falscheingabe wiederholen lassen. regulären Ausdrücken Man kann sogar aufwendige Grafiken z.B. für Onlinecomputerspiele mit Hilfe der Canvasfunktion mit Javascript erstellen. Canvasfunktion

45 Beispiel

46 Einführung in die Programmierung mit Javascript Wichtige Strukturen erleichtern das Programmieren mit Javascript Es gibt hier Schleifen, die bestimmte Vorgänge, so oft bis zu einem bestimmten Ereignis wiederholen Kontrollstrukturen helfen Entscheidungen zu treffen. Mit Funktionen und Klassen können sie bestimmte Vorgänge kapseln und müssen Sie nicht immer wieder programmieren

47 Schleifen For (i=Anfangswert;i=Sollwert;i++){Befehlsreihe, in der z.B. i ausgegeben, oder verarbeitet wird.} While (i<x){Befehlsreihe, bei der i irgendwann größer oder gleich i werden muss.

48 Kontrollstrukturen If (Bedingung){Befehlsreihe;} elseif(Bedingung{Befehlsreihe;}else {Befehlsreihe;} Hier wird eine klassische Wenn,.. Dann.. Entscheidung getroffen Switch i{ i=1:Befehlsreihe;return; i=2:Befehlsreihe; return;…;i=n:Befehlsreihe;return;default: Befehlsreihe;return;} Hier wird eine umfangreiche Fallentscheidung getroffen.

49 FORMATIERUNG MIT CSS Wo kommt die schöne, dynamische Gestaltung z.B. für corporate Design her ?

50 Grundstruktur In CSS sind Eigenschaften innerhalb von Regelsätzen organisiert. Ein Regelsatz besteht aus: Einem Selektor oder einer Gruppe von Selektoren, gefolgt von einem durch geschweifte Klammern begrenzten Bereich, in dem Eigenschaften ein Wert zugewiesen wird. Beispiel: (Pseudo-Code) Selektor { Eigenschaft1: Wert; Eigenschaft2: Wert; } Selektor Eins, Selektor Zwei { Eigenschaft: Wert; } Hier zwei Beispiele für einen Regelsatz. Der erste Regelsatz besteht aus einem Selektor, dem zwei Eigenschaften zugewiesen werden. Der zweite Regelsatz besteht aus zwei voneinander unabhängigen Selektoren, denen dieselbe Eigenschaft zugewiesen wird. Eine Formatierung, die für mehrere Elemente eines Dokuments gelten soll, muss daher nur einmal definiert werden. Ein Stylesheet kann schon durch das Vorhandensein einer einzigen Regel entstehen. Selektoren werden im Abschnitt CSS/Selektoren ausführlich behandelt.CSS/Selektoren

51 Wie kann man Webseiten ähnlich grafisch gestalten? Sie sehen, dass diese beiden Seiten ähnlich gestaltet sind. Im Fachjargon nennt man das Corporate Design. Einige mögen jetzt fragen, wie geht das denn? Mit css. Die css – Datei wird am Anfang der HTML-Datei im head eingebunden.

52 Der Code dazu P { font-family : Verdana; color : Navy; background-color : Aqua; } H1 { font-size : xx-large; color : #ffddaa; font-family : Comic Sans MS; text-decoration : underline; } H2 { font- family : Comic Sans MS; font-size : x-large; font-style : italic; text-decoration : overline; background-color : Silver; } H3 { background-color : Aqua; font-family : Comic Sans MS; color : Blue; } A { font-weight : bold; color : Blue; } A:Visited { color : Blue; } A:Active { font-weight : bold; font-style : italic; color : Fuchsia; text-decoration : underline; } A:Hover { color : Red; font-weight : bold; text-decoration : underline; } BODY { font-family : Verdana; color : Navy; background : url(http://www.avoigts.de/bilder/Homepageleiste.jpg) no- repeat top left; background-color: #eedd77; }

53 Erklärungen P steht für einen Absatz. Was in den geschweiften Klammern steht, sind die Formatierungen für alle Absätze. In h1 bis h3 sind die Formatierungen für die Überschriften enthalten. Die anderen haben analog dazu die Formatierungen für die Ihnen zugehörigen HTML – Befehle enthalten A:active steht dabei für den aktiven Link

54 DATENBANKERSTELLUNG MIT MYSQL MITHILFE VON PHYPMYADMIN Wie war das mit den dynamischen Daten

55 WAS ist SQL SQL steht für structured query language (strukturierte Abfragesprache) Mit dieser Sprache kann man Datenbanken modellieren, erstellen, modifizieren, befüllen und anzeigen. Es gibt viele Dialekte von SQL – Access und der MSSQL – Server benutzen MSSQL – In Onlinedatenbanken verwendet man MySQL oder POSTGRESQL

56 Die wichtigsten Befehle Create database (erstellt eine Datenbank), erstellt die Datenbank Select spalte from tabelle where a=b, zeigt Datensätze an. Insert into tabelle (spalte1, spalte2,…spalte n, „wert1“, „wert2“, …, „wert n“); schreibt in Datenbank Grant und revoke verleihen Zugriffsrechte Join verbindet relational angelegte Tabellen Über Indizes miteinander

57 Screenshot

58 So gehen Sie online Webseiten ins Netz setzen

59 ONLINEDIENSTE Das kennen sie vielleicht

60 Facebook Wenn Sie sich im Netz mitteilen, mit Freunden unterhalten, zocken oder Bilder und Videos teilen wollen, können Sie ein öffentliches, soziales Netzwerk, wie Facebook oder Google+ nutzen. Da gehen Sie auf die Seite www.facebook.de, melden sich an und können das dann nutzen.www.facebook.de Allerdings sammelt Facebook Ihre Daten und wird vom NSA zu Analysezwecken über Personen genutzt. Auch der Chef sollte nicht unbedingt Ihr Freund auf Facebook sein, wenn Sie von Ihren Partyerlebnissen berichten wollen.

61 Soziale Netzwerke für Ihre berufliche Zukunft Mit XING oder Linked In können Sie ihr Profil Arbeitgebern zur Verfügung stellen und an Gruppen und Seminaren teilnehmen. Sie können auch Kontakte knüpfen, z.B. um über Vitamin B in eine Firma reinzukommen.

62 Blogging Blogger sind Leute, die etwas übers Internet mitteilen. Man kann z.B. über irgendein Thema Buch führen und das über einen Bloggingdienst anderen zur Verfügung stellen. Ein bekannter Bloggingdienst ist z.B. Wordpress

63 PROVIDER, FTP UND RANKING Webseiten online stellen

64 Was ist ein Provider Ein Provider ist ein Unternehmen, das gegen Geld, Webspace auf einem Server zur Verfügung stellt Sie müssen mit dem Provider einen Vertrag abschließen, um auf dem Webspace ihre Webseiten hochzuladen. Einige Provider bieten Zusatztools, wie z.B. die Möglichkeit php und MySQL zu nutzen oder auch CMS oder vorgefertigte Webshops zu verwenden.

65 Was kostet es im Homepage eine Internetpräsenz Es gibt Dienst, bei denen Sie reine HTML – Pages oder mit dem Webbaukasten erstellte Seiten umsonst ins Internet setzen können. – Zusatz beim Kauf eines MAGIX – Produkt – beepworld – Zahlreiche Dienste Günstige Anbieter von Seiten mit CMS, Webshop, PHPMyAdmin, php und PERL gibt es ab 40 € pro Jahr, z.B. Alfahosting. Teure Anbieter, wie die Telekom verlangen zwischen 25 und 50 € im Monat, bieten dann aber auch einiges zusätzlich, wie Videoportale und gute, einfache Baukastensysteme und sehr viel Speicherplatz auf der Cloud.

66 Was ist ftp ftp ist das sogenannte file transfer protocol, zu deutsch Datentransferprotokoll. Es ermöglicht den Upload einer Webseite auf den Server und somit die Bereitstellung der Seite(n) im World wide web Ein ftp-Server ist ein wesentlicher Bestandteil des Webvertrages und wird vom Provider zur Verfügung gestellt.

67 Was ist ranking Sie müssen mit Google adsense einen Vertrag abschließen, damit durch die Metaangaben die auf ihrer Homepage im Head-Bereich, ihre Seite von den Suchmaschinen, wie Bing oder Google gefunden wird. Ein gutes ranking bedeutet, dass Ihre Homepage leicht gefunden wird, d.h. sie nicht 20 mal Blättern müssen, um Ihre Seite in der Suchmaschine zu finden.

68 Quellen www.selhtml.org www.avoigts.de www.filehorse.com Webpräsenz von Notepad++

69 Fazit Jetzt wissen Sie, was eine Homepage ist und was es für Möglichkeiten gibt, sie im Netz zu programmieren.