Prof. Dr. Claus Brell Die eigene interaktive Internetseite von Null auf Hundert Dienstag und Mittwoch 10. und 11.09.2013
Die eigene interaktive Internetseite von Null auf Hundert Programm Eine eigene Seite im Internet aufbauen und mit interaktiven Komponenten anreichern: das kann man in zwei Tagen lernen. Im Vordergrund steht das praktische Einüben und Erproben an einfachen Beispielen. Die Grundlagen werden in jeweils sehr kurzen Vorträgen vermittelt. Das Seminar richtet sich in erster Linie an Personen aus Nicht-Informatik- Fachrichtungen. Zur Teilnahme sollten lediglich folgende Kenntnisse bereits mitgebracht werden: Die Teilnehmer können einen Windows-PC mit Maus und Tastatur bedienen. Die Teilnehmer können mit dem Windows-Explorer Dateien von einem Ordner in einen anderen verschieben und wiederfinden. Die Teilnehmer haben schon einmal mit einem Texteditor (Notepad ) oder einer Textverarbeitung (Word ) gearbeitet. Die Teilnehmer können mit Google etwas im Internet finden. Die Teilnehmer stehen technischen Aspekten grundsätzlich offen gegenüber. Am ersten Tag geht es um die Basics. Es werden einfache Internetseiten (HTML und CSS) erstellt. (Dieser Tag wäre für Einsteiger auch alleine sinnvoll): Wie funktioniert das Internet elementare Grundkenntnisse der Datenkommunikation. Was benötige ich, um einfache Internetseiten zu erstellen Tools und Methoden. Wie finde ich einen Provider wohin mit meinen Seiten. Wie fange ich an meine erste Seite in HTML. Tabellen, Listen, Überschriften strukturieren von Internet-Seiten Bilder einbinden und Seiten verlinken. Seiten gestalten mit CSS. Welche Schritte sind erforderlich, wenn die eigene Seite umfangreicher wird Content-Management und Co. Am zweiten Tag sollen die ersten interaktiven Programme entstehen. Dazu sind die Inhalte des ersten Tages Voraussetzung. Es werden Formulare in HTML und Scripte in der einfach zu erlernenden Internet-Programmiersprache PHP erstellt. Wie funktionieren Formulare? Wie kann ich fertige Internetprogramme einsetzen Google-Suche auf meiner Seite. Welche Möglichkeiten der Realisierung für interaktive Webseiten gibt es von Javascript bis PHP. Erste Gehversuche in PHP. Interaktive Seite am Beispiel eines bmi-rechners (Body Mass Index) Wie mache ich allein weiter Tipps und Tricks Implementierung einer eigenen Testumgebung XAMP. Betreutes Spielen mit PHP
Inhalt: 1. Organisation 2. Internet 3. HTML 4. CSS 5. Provider finden 6. CMS und Co 7. Javascript (kurz) 8. Webserver aufsetzen 9. PHP
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert Organisation und Einstimmung Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Claus Brell - zur Person 2 bis 1989 bis 1991 bis 2001 bis 2012 bis 2008 ab 2012 Physikstudium (angewandte Physik, Oberflächen und dünne Schichten) Universität Düsseldorf Anwendungsentwicklung und DV-Organisation KKB Lebensversicherung, KKB Bank Vernetzung und Internet in der Landesverwaltung, zentrale Datenbankdienste Landesamt für Datenverarbeitung und Statistik NRW (jetzt IT.NRW) Projektorientierte und institutionelle Forschungsförderung (WGL- Institute, Fachhochschulen) Informationsmanagement und Organisation Wissenschaftsministerium NRW Promotion in der Physikdidaktik zum Dr. rer. nat. Universität Bremen Professur Hochschule Niederrhein Lehrgebiete Wirtschaftsinformatik und Statistik
Überblick 3 1. Organisation heute und morgen, Themen 2. Vorgehen, Zeitplan Pausen 3. Benötigte Technik (Editor, Webserver mit PHP zum selber Experimentieren) Weitere Foliensätze: - Wie funktioniert HTML, HTTP, Internet und Co? - HTML Einführung - CSS Einführung - Content Management Systeme - Internet Content Provider finden - Eigenen Testserver aufsetzen - Javascript ein ultrakurzer Streifzug - PHP Einführung Literatur 4 Münz, Stefan; Nefzger, Wolfgang: HTML 4.0 Handbuch. Franzis, Poing, 1999, 3 Auflage Krause, Jörg: PHP 5 - Webserverprogrammierung unter Windows und Linux. Hanser, München, 2005, 2 Auflage, Bibliothekssignatur TYD Krau
Internet-Quellen 5 Editor Notepad++: http://www.notepad-plus-plus.org/ Webserver Komplettsystem XAMPP: http://www.xampp.de HTML lernen: CSS lernen: http://de.selfhtml.org http://www.css4you.de Javascript lernen: http://www.kostenlose-javascripts.de/tutorials/tutorials.html http://wiki.selfhtml.org/wiki/javascript/tutorial PHP lernen: http://www.selfphp.de Ihr bester Freund ist.. Google. Ihr zweitbester Freund ist die Hochschulbibliothek. Organisation 6 Empfohlen: Zwei Personen arbeiten an einem Rechner und unterhalten sich über das, was sie tun. Einloggen: Nutzer: - wird im Kurs mitgeteilt - Kennwort: - wird im Kurs mitgeteilt - Pausen: nach Absprache
Vorgehen 7 Erarbeiten der Kenntnisse ( Kennen ) und Fähigkeiten ( Können ) in kleinen Schritten. 1. Kurze Darstellung auf den Folien 2. Nacharbeiten am PC 3. Betreutes Spielen zur Vertiefung Benötigte Software: Notepad++ 8 Für die Erstellung von (einfachen) Internet-Seiten wird lediglich ein Texteditor benötigt. Notepad (als Windows Bordmittel) wäre völlig ausreichend. Ein Editor mit Syntax-Highlighting, z.b. Notepad++, ist bequemer und man kann schneller arbeiten. Nächster Schritt: Installation von Notepad++.
Benötigte Software: Notepad++ 9 Notepad++ für zuhause: Download von http://notepad-plus-plus.org/download/v6.4.5.html Wählen Sie: Notepad++ zip package : Don't want to use installer? Check this one (zip format). Vorteil: funktioniert auch auf USB-Stick. Notepad hier: von gemeinsamen Laufwerk. Arbeitsschritte (wird vorgeführt): 1. Verzeichnis Daten auf c:\ anlegen. (Dann können Sie alles auf USB-Stick mitnehmen) 2. Verzeichnis notepad++ auf c:\daten anlegen. 3. Datei npp.6.4.5.bin.zip von gemeinsamen Laufwerk auf c:\daten\notepad++ kopieren. 4. npp.6.4.5.bin.zip öffnen und in c:\daten\notepad++ entpacken. 5. c:\daten\notepad++\notepad++.exe starten. 6. Settings Preferences Language English auf German umstellen. Notepad++ 10 So ähnlich sollte Notepad++ bei Ihnen aussehen. c:\daten\html\33\text.html Arbeitsauftrag: 1.) Richten Sie nun Notepad++ auf Ihrem Rechner ein. 2.) Schreiben Sie Ich bin ein einfacher Text in Zeile 1 und Ihre Vornamen in Zeile 2 3.) Speichern Sie unter c:\daten\html\033\text.html 3.) Doppelklicken Sie auf c:\daten\html\033\text.html (sollte mit Browser geöffnet werden.)
Arbeitsumgebung im Internet 11 Zum Ausprobieren (funktioniert auch von Zuhause) gibt es für jede Gruppe ein Verzeichnis auf einem Internet-Server: - wird im Kurs mitgeteilt -. Die jeweilige Nummer 001.. wird Ihnen bekannt gegeben. Sie können Dateien hochladen und löschen. Dazu rufen Sie in Ihrem Internet- Verzeichnis das Unterverzeichnis ADM auf, z.b. - wird im Kurs mitgeteilt - Arbeitsauftrag: 1.) Laden Sie nun Ihre Datei text.html auf Ihr Internet-Verzeichnis hoch. 2.) Testen Sie Datei mit dem Browser. Geben Sie in die Bearbeitungszeile - wird im Kurs mitgeteilt - ein Weitere Foliensätze 12 Sie können nun HTML-Seiten erstellen und im Internet ablegen. Für die nächsten Schritte benötigen Sie ein wenig Grundverständnis über die Funktionsweise des Internet. Damit Ihre Internetseiten Struktur und Aussehen bekommen, benötigen Sie Kenntnisse in HTML und in CSS. Wenn Sie Ihre eigene Internet-Seite aufsetzen wollen, benötigen Sie außerdem einen Internet-Provider. Wenn Sie viele gleichartige Seiten erstellen wollen oder im Team an einer Website arbeiten, werden Sie ein sogenanntes Content Management System (CMS) einsetzen. Joomla, Contao, Typo3, NPS5, Drupal, Wordpress sind solche Systeme. Die nachfolgende Anleitung für die Einrichtung eines eigenen Webservers benötigen Sie erst für den zweiten Tag, nicht jetzt.
Am 2. Tag: Webserver mit PHP (als Testsystem) einrichten 13 Warum eigener Webserver? 1. Erstellung interaktiver Internetseiten via Versuch&Irrtum geht schnell und macht Spaß. 2. HTML-Seiten können im lokalen Dateisystem getestet werden, Scripte benötigen den Webserver. 3. Jedes mal zum Test das Script auf den Server im Internet hochladen ist lästig. 4. Lokal einen Webserver haben macht es noch schneller und macht noch mehr Spaß. Welcher Webserver? 1. Wer Webadministrator werden will: verschiedene Webserver und Scriptsprachenversionen und Datenbankmanagementsysteme manuell einrichten. 2. Wer schnell im Rennen sein möchte: vorkonfiguriertes Paket nehmen. 3. XMAPP bietet Leistungen, die den gängigen Leistungen der Provider entsprechen => zum Testen XAMPP installieren. XAMPP einrichten in drei Minuten 14 Zuhause: 1. http://www.xampp.de aufrufen. 2. XAMPP portable lite als.zip-datei herunterladen (127 MB) 3..zip-Datei öffnen, das darin vorhandene Verzeichnis xampp in des Wurzelverzeichnis eines Laufwerks (c:\, oder USB-Stick ) ziehen. 4. Xampp-control.exe starten. 5. Apache starten. HIer: 1..zip-Datei von gemeinsamen Laufwerk auf c:\daten kopieren. 2. Dann wie oben.
XAMPP einrichten in drei Minuten 15 So sollte es dann aussehen: XAMPP einrichten in drei Minuten 16 Testen Sie den Webserver mit dem Browser. Tagen Sie in die Browserzeile http://localhost oder http://127.1.1.1 ein. Das Ergebnis sollte so aussehen: Klick auf Deutsch.
XAMP einrichten in drei Minuten 17 Unterhalb des Verzeichnisses c:\xampp sollte es so aussehen: In das Verzeichnis htdocs richten Sie ein weiteres Verzeichnis www ein dort speichern Sie Ihre HTML-Dateien und PHP-Scripte. Einrichtung testen 18 Arbeitsauftrag: 1.) Richten Sie auf dem PC vor Ihnen XAMPP ein wie auf den Folien beschrieben. 2.) Kopieren Sie Ihre Dateien (HTML-Dateien, Bilder) vom Vortag in das Verzeichnis c:\xampp\htdocs\www. 3.) Testen Sie mit dem Browser. Geben Sie in die Bearbeitungszeile http://localhost/www/bild.html oder http://127.1.1.1/www/bild.html ein. 4.) ermitteln Sie Ihre IP-Adresse in der DOS-Box (CMD) mit dem Aufruf ipconfig /all. 5.) Bitten Sie Ihren Nachbarn, auf Ihren Webserver mit http://ipadresse/www/ zugreifen.
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert Wie funktioniert HTML, HTTP, Internet und Co? Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Wofür benötigt man HTML? 2 Eine einfache Textseite ist eine einfache Textseite ist eine einfache Textseite Eine Informationsseite im Internet soll - Strukturiert sein. - Grafische Elemente enthalten. - Eine positive Anmutung haben. Lösung: HTML Hypertext Markup Language HTML ist eine Seitenbeschreibungssprache mit sogenannten Tags. HTML gibt dem Browser Anweisungen zur Darstellung der Inhalte. HTML kann Texte strukturieren und Bilder hinzuladen. HTML-Dateien können mit einem einfachen Texteditor erstellt werden. HTML-Dateien haben die Dateiendung.html oder.htm.
Anzeige eine HTML-Seite auf dem eigenen Rechner im Browser 3 Mein Rechner file:// Browser: Festplatte c:\ Verzeichnis \Daten\033\ index.html Anzeige eine HTML-Seite im Internet / im lokalen Netz 4 Mein Rechner Browser: http:// Netz, Internet Rechner im Internet Webserver Festplatte Verzeichnis \Daten\033\ index.html
Internet-Grundlagen (unpräzise, dafür kurz & knapp) Merksätze 5 Das Internet besteht aus vernetzten Rechnern (Großrechner, Notebooks, Smartphones ). Anwendungen (Computerprogramme, Apps) auf diesen vernetzten Rechnern kommunizieren miteinander über das netzorientierte Protokoll TCP/IP. Das World Wide Web (WWW) ist die Gesamtheit von Webservern im Internet, auf die mit Webbrowsern (IE, Firefox, Safari) zugegriffen werden kann. Webserver und Webbrowser benötigen zusätzlich zum netzorientierten Protokoll TCP/IP das anwendungsorientiertes Protokoll HTTP (Hypertext Transfer Protocol). HTTP unterstützt die Anfragen von Browsern nach Dateien, auf die der Webserver Zugriff hat. Browser können Textdateien, die mit HTML strukturiert sind, auf dem Bildschirm darstellen ( rendern ). HTML unterstützt den Verweis auf andere Dateien im Internet ( Links ). Internet-Grundlagen (unpräzise, dafür kurz & knapp) Grafik 6 Ihr Rechner Browser: HTTP Internet TCP/IP TCP/IP Router TCP/IP Lokales Netz der Hochschule Rechner im Internet Provider: Hosteurope Webserver claus-brell.de Festplatte Verzeichnis.\Daten\033\ index.html (HTML)
HTML-Dateien im Internet 7 Damit der Browser Ihre Dateien darstellen / rendern kann, müssen die Dateien in der Beschreibungssprache HTML vorliegen. Wenn nur Sie die Dateien sehen wollen, können diese auf Ihrer eigenen Festplatte liegen. Wenn andere das auch auf ihren Rechnern sehen sollen, müssen die Dateien auf einen Rechner im Internet, der einen Webserver hat, übertragen werden. nächster Schritt: Erstellen von HTML-Dateien und Transfer der Dateien auf einen Webserver im Internet.
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert HTML Einführung Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Wofür benötigt man HTML? 2 Eine einfache Textseite ist eine einfache Textseite ist eine einfache Textseite Eine Informationsseite im Internet soll Strukturiert sein. Grafische Elemente enthalten. Eine positive Anmutung haben. Lösung: HTML Hypertext Markup Language HTML ist eine Seitenbeschreibungssprache mit sogenannten Tags. HTML gibt dem Browser Anweisungen zur Darstellung der Inhalte. HTML kann Texte strukturieren und Bilder hinzuladen. HTML-Dateien können mit einem einfachen Texteditor erstellt werden. HTML-Dateien haben die Dateiendung.html oder.htm.
Grundgerüst einer HTML-Seite 3 Grundgerüst <html> <head> <title>ich bin eine einfache Seite</title> </head> <!-- ich bin ein Kommentar und werde nicht angezeigt --> <body> <h1>ich bin eine Überschrift</h1> Ich bin einfacher Text<br> Claus Brell, 03.09.2013 </body> </html> Regeln und Tipps für HTML-Tags 4 HTML-Tags sind von spitzen Klammern eingeschlossen: <body> Viele Tags haben ein Ende Tag: </body> Tags können sauber geschachtelt werden, wie Matroschka- oder Fukurokuju- Puppen. Inhalte stehen zwischen Tag und Ende-Tag: <li>ich bin ein Listeneintrag.</li>. Sinnvoll: geschachtelte Tags im Editor einrücken. Sinnvoll: Nicht mehrere Tags in einer Zeile. HTML dient dazu, Struktur in ein Dokument zu bringen. Das Aussehen sollte über CSS (eigener Foliensatz) gesteuert werden. Wichtige Internet-Quellen zum HTML-lernen: http://de.selfhtml.org/ Google.
Erste HTML Tags 5 Mit folgenden HTML-Tags können Sie bereits gut strukturierte Informationsseiten im Internet aufbauen: <html> Damit startet ein HTML-Dokument, endet mit </html> <head> Kopfteil des HTML-Dokuments, für Metainformationen, endet mit </head> <body> ab hier erfolgt der eigentliche Inhalt, endet mit </body> <h1> Überschrift der Ebene 1, endet mit </h1> <h2> Überschrift der Ebene 2, endet mit </h2> <hr> horizontale Linie <br> Zeilenumbruch <ol> geordnete Liste <ul> ungeordnete Liste <table> Tabelle <tr> Tabellenzeile <td> Tabellenfeld Erste strukturierte Seite 6 Arbeitsauftrag: 1.) Erzeugen Sie mit Notepad++ eine Datei erste_seite.html mit dem unten gezeigten Inhalt. 2.) Testen Sie die Datei mit dem Browser. 3.) Laden Sie die Datei auf den Internet-Server und testen Sie dort mit http://claus-brell.de/nullhundert/033/erste_seite.html
Spielen mit Tabellen 7 Arbeitsauftrag: 1.) Erzeugen Sie mit Notepad++ eine Datei geschachtelte_tabelle.html mit dem unten gezeigten Inhalt. 2.) testen Sie und laden Sie hoch. Bilder einbinden 8 Mit <img > können Bilder in HTML-Seiten eingebunden werden. Funktionsweise: 1. Der Browser fordert die HTML-Datei vom Webserver an. 2. Der Browser rendert die HTML-Datei und stößt auf das img-tag. 3. Der Browser wertet das img-tag aus und fordert in einem zweiten Übertragungsschritt die darin benannte Datei vom Webserver an. 1 Browser Webserver bild.html 2 3 Beschreibung auf selfhtml: http://de.selfhtml.org/html/grafiken/einbinden.htm#referenz
Bilder einbinden 9 Arbeitsauftrag: 1.) Erzeugen Sie mit Notepad++ eine Datei bild.html mit dem unten gezeigten Inhalt. 2.) Kopieren Sie vom gemeinsamen Laufwerk die Datei bild.jpg in Ihr Verzeichnis, testen Sie und laden Sie hoch. Internetseiten vernetzen 10 Vorteil des WWW: Es kann in einer HTML-Datei auf eine andere Datei verwiesen werden. Damit werden Dokumente untereinander vernetzt. Verweise in HTML-Dokumente heißen Links, die Adressen, die in den Links angegeben werden, heißen URL (Unique Request Locator). So funktioniert es:
Internetseiten vernetzen 11 So sieht es aus: Nachlesen bei selfhtml.org: http://de.selfhtml.org/html/verweise/definieren.htm#beispiele oder auch http://de.selfhtml.org/navigation/html.htm#verweise Internetseiten vernetzen 12 Arbeitsauftrag: 1.) Erzeugen Sie mit Notepad++ eine Datei uebersicht.html mit Verweisen auf Ihre Dateien bild.html, geschachtelte_tabelle.html, erste_seite.html. 2.) Versehen Sie die Seite mit einer Überschrift, bringen Sie die Verweise in eine Tabelle oder eine Liste. 3.) Testen Sie lokal, laden Sie hoch und testen Sie erneut. So kann Ihr Ergebnis aussehen, muss aber nicht so aussehen:
Formulare 13 Mit Formularen können Daten in HTML-Seiten erfasst und an ein Programm auf dem Webeserver übermittelt werden. Das Programm auf dem Webserver verarbeitet die Daten und erzeugt eine HTML-Seite, die dann zum Browser übertragen und angezeigt wird. Beispiel: Google Suche 1. Webbrowser http request Google http://www.google.de/search?q=http 2. 3. Webbrowser Webbrowser Ergebnisseite im Browser anzeigen http response Google Google Google stellt Ergebnisseite zusammen Formulare, Google Suche 14 Probieren vor Studieren.. Arbeitsauftrag: 1.) Fügen Sie mit Notepad++ in Ihrer Datei bild.html den unten gezeigten Quelltextschnipsel für die Google-Suche ein. 2.) Versehen Sie die Seite mit einer neuen Überschrift. 3.) Testen Sie lokal, laden Sie hoch und testen Sie erneut.
Formulare, einfache Beispiele 15 <form method="get" action="antwort.php" enctype="multipart/form-data"> Text in Zeile eingeben: <br> <input type="text" name="text" size="30"> <br> <input type="submit" name="l" value="absenden"> </form> Formulare, einfache Beispiele 16 <textarea name="text" cols=45 rows=5/></textarea> <input type="submit" name="l" value="absenden">
Formulare - Grundgerüst 17 <form method="get" action="antwort2.php" >.. Verschiedene Eingabefelder, Führungstexte etc </form> Hier: Methode GET, es gibt auch noch POST, HEAD. Auswertungsscript Formulare - Checkboxen 18 <form method="get" action="antwort2.php" > Eine oder mehrere Möglichkeiten in den Checkboxen auswählen: <br> <input type="checkbox" name="auswahl1" value="1"> erste Auswahlmöglichkeit<br> <input type="checkbox" name="auswahl2" value="2"> zweite Auswahlmöglichkeit<br> <br> <input type="submit" name="l" value="absenden"> </form> Vorbelegung einer Checkbox mit: checked= checked.
Formulare - Radiobuttons 19 <form method="get" action="antwort2.php" > Genau eine Möglichkeit in den Radiobuttons auswählen: <br> <input type="radio" name="auswahl" value="a"> erste Auswahlmöglichkeit<br> <input type="radio" name="auswahl" value="b" checked="checked"> zweite Auswahlmöglichkeit<br> <br> <input type="submit" name="l" value="absenden"> </form> Beispiele unter http://.../formulartest2.htm Formulare, eigene entwerfen 20 Spielen ist wichtig.. Arbeitsauftrag: 1.) Erstellen Sie mit Notepad++ eine Datei meinformular.html mit einem Textfeld und einem weiteren Eingabefeld. 2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut. Achten Sie auf die Eingabezeile im Browser. Verwenden Sie: <form method="get" action= http://claus-brell.de/nullhundert/033/antwort2.php >
Fazit 21 Sie können: Einfache Internet-Seiten erstellen, Bilder in Internet-Seiten einbinden, Seiten mit Überschriften, Listen, Tabellen strukturieren, Formulare für fertige Programme entwerfen. Sie kennen: Funktionsweise des Zusammenspiels Browser - Webserver, Editor für HTML-Seiten, Informationsseiten im Internet, um selber weiter zu experimentieren. Üben und Spielen mit HTML wird empfohlen. Nächster Schritt: Gestalten von Internetseiten mit CSS.
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert CSS Einführung Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Wofür benötigt man CSS und wo finde ich Informationen? 2 HTML beschreibt die Struktur einer Internet-Seite. CSS (Cascading Style Sheets) steuert das Aussehen der HTML-Elemente. Zur Einstimmung: http://de.selfhtml.org/css/intro.htm CSS-Tags können direkt in HTML-Seiten geschrieben werden. CSS-Tags können als separate Dateien für mehrere HTML-Dateien geschrieben werden (empfohlen für größere Projekte). Wichtige Internet-Quellen zum CSS-lernen: http://www.css4you.de http://de.selfhtml.org/ Google.
CSS Beispiel 3 Drei Möglichkeiten, CSS-Tags mit HTML-Tags zu verbinden. Im head Im HTML-Tag Als separate CSS Datei (nächste Folie) CSS Beispiel 4 CSS als separate Datei. Vorteil: Mit der Änderung eines Stylesheets kann das Aussehen von allen HTML-Seiten geändert werden. Nachlesen: http://de.selfhtml.org/css/formate/einbinden.htm#separat
CSS, eigene Experimente 5 Arbeitsauftrag a: 1.) Erzeugen Sie mit Notepad++ eine Datei meincss.css mit z.b. dem unten gezeigten Inhalt. 2.) Binden Sie die Datei in zwei Ihrer HTML-Dateien ein 3.) Testen Sie nur lokal. Arbeitsauftrag b: 1.) Fügen Sie mit Notepad++ in meincss.css zwei weitere Tags hinzu. 2.) Speichern Sie und testen Sie die Auswirkungen af beide Dateien 3.) Testen Sie nur lokal. CSS, Hinweise 6 Ein mächtiges Instrument ist das HTML Statement <div>. Es dient dazu, ganze Bereiche zu kennzeichnen und einheitlich mit CSS zu formatieren. Siehe dazu: http://de.selfhtml.org/html/text/bereiche.htm#block http://www.css4you.de/wslayout1/index.html Beispiel: <div style="text-align:center; padding:20px; border:thin solid red; margin:25px"> <h1>alles zentriert</h1> <ul> <li>alles zentriert</li> <li>alles?</li> <li><span style="font-weight:bold; color:red">alles!</span></li> </ul> </div>
Fazit 7 Sie können: Internet-Seiten Ihren Farb- und Größenvorstellungen anpassen., Sie kennen: Möglichkeiten, ganze Bereiche einheitlich zu formatieren, Informationsseiten im Internet, um selber weiter zu experimentieren. Üben und Spielen mit CSS wird empfohlen. Nächster Schritt: Internet-Provider finden.
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert Provider finden Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Wofür benötigt man einen Provider? 2 Browser Internet Webserver Wer stellt die Internet-Anbindung bereit? Siehe auch: http://de.wikipedia.org/wiki/internetdienstanbieter Liste von Diensteanbietern z.b. unter http://www.toptenhostlist.net/topten_web.php Wer stellt die Hardware bereit? Wer stellt die Internetanbindung bereit? Wer administriert den Webserver? Wer besorgt die Internet-Adresse? Wer kümmert sich um das Backup der Datenbanken?
Leistungen des Providers / Auswahlkriterien 3 Preis: Setup-Gebühren monatliche Kosten versteckte Kosten Leistungsumfang:Domains (Anzahl, Domainendung) Datenbank (MySQL, Version?) Programmiersprachen (PHP, Version?) Speicherplatz für Content Speicherplatz für Mail Traffic-Grenzen vorinstallierte Software (CMS, Forum ) htaccess-dateien Datensicherung / Backup Zertifikate (für https ) Verfügbarkeit: 99% heißt, fällt an drei Tagen im Jahr aus. Vertragslänge Support / Service / Ansprechpartner Beispiel 4 Domain Factory, abgerufen am 04.09.2013 Angebot mit einer Domain, 3 MySQL Datenbanken, PHP und Perl Tipp: 1.) Besser klein anfangen als gar nicht. 2.) Besser kurze Kündigungszeiten. 3.) Provider ist kein Ehepartner bei Mißfallen zügig wechseln
Provider suchen 5 Arbeitsauftrag: 1.) Rücken Sie in Ihrer Reihe zusammen und 2.) bearbeiten Sie gemeinsam: Produktrecherche: Reihe 1: 1&1 oder Telekom Reihe 2: Host Europe oder Vodafone Reihe 3: Strato oder O2 Reihe 4: Freenet oder Netbeat Ermitteln Sie die monatlichen Kosten für zwei Domains, 1 MySQL-Datenbank, PHP kein Traffic-Limit, min. 5GB Speicherplatz. Fazit 6 Sie können: Provider im Internet finden, Kriterien für die Auswahl aufstellen, Kosten für das Hosting ermitteln. Sie kennen: Einige Provider, Deren Leistungen, Deren Kosten. Anfangen wird empfohlen. Achtung: gesetzliche Regelungen beachten (TMG: Impressumspflicht, Haftung für Inhalte, Haftung für Links, allgemeine Sorgfaltspflichten) Nächster Schritt: Nutzung von fertigen Softwarepaketen (Forum, CMS, Wiki).
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert CMS und Co. Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Wofür benötigt man fertige Websoftware, z.b. CMS? 2 Wenn man alleine wenige individuelle Internetseiten aufbauen möchte: HTML-Seiten mit Texteditor. Wenn man im Team umfangreiche gleich gestaltete Internetseiten aufbauen möchte: Content Management System (CMS) Beispiele: Hochschule Niederrhein nutzt Typo3. Manche NRW- Behörden nutzen NPS6. TV Schiefbahn e.v. nutzt Contao, Triathlonabteilung nutzt Joomla. Dann gibt es noch - Drupal - Wordpress - Eine lange Liste von CMS: http://www.contentmanager.de/produkte/content_management_systeme.html
Was leistet ein CMS? 3 Aus der Wikipedia: Ein Content-Management-System (kurz: CMS, deutsch Inhaltsverwaltungssystem ) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content). Ein Autor mit Zugriffsrechten kann ein solches System in vielen Fällen mit wenig Programmieroder HTML-Kenntnissen bedienen, da die Mehrzahl der Systeme über eine grafische Benutzeroberfläche verfügen. Content Management Systeme trennen Aussehen und Inhalt, die Autoren pflegen die Inhalte, die zentrale Administration legt Verhalten und Aussehen fest. Weitere Websoftware 4 Sammeln und vernetzen von Wissensschnipseln so wie Wikipedia: Wiki-Software: http://mediawiki.de Weitere Wiki-Software: Confluence, DokuWiki, DrupalWiki, Foswiki, TikiWiki und TWiki. Kurzbeschreibungen unter http://blog.seibert-media.net/2011/08/03/studie-wiki-software-vergleich/ Diskussionsforen: PhpBB https://www.phpbb.com/ Vergleich siehe z.b. http://forensoftware.de/ Groupware-Software (z. B. BSCW) Lernplattform (z.b. Moodle) Shop-Software (noch keine erprobt).
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert Javascript Kurzeinführung Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Dynamische Inhalte mit Javascript? 2 Aus der Wikipedia (verkürzt): JavaScript (JS) ist eine Skriptsprache, um Benutzerinteraktionen in HTML- Seiten auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern. Heute findet JavaScript auch außerhalb von Browsern Anwendung, so etwa auf Servern und in Microcontrollern. Browser Internet Webserver Javascript läuft im Browser ( Client-basiert ). Javascript kann direkt in HTML eingebettet werden (wie CSS) Javascript kann in eigene Dateien aufgelagert werden (wie CSS, empfohlen)
Ein einfaches Beispiel: BMI-Rechner 3 Vorteile und Nachteile von Javascript 4 Vorteile: Kann ohne Webserver getestet werden. Javascript ist stabil und wird weiterentwickelt. Es gibt viele fertige Scripte (Google ist Ihr Freund). Man kann sich schrittweise an Javascript herantasten und bestehende HTML-Seiten um Dynamik erweitern. Geeignet für GUI-Effekte: Popup-Fenster und Reiter und Reiter in Webseiten und. Nachteile: Nicht alle Browser interpretieren Javascript gleich. Javascript kann im Browser ausgeschaltet sein. Aus Sicherheitsgründen kann im Firmennetz / Verwaltungsnetz Javascript ausgeschaltet sein. In Javascript werden immer wieder Sicherheitslücken entdeckt. Daten speichern über die aktuelle Sitzung hinaus ist so direkt nicht möglich. Quelltext ist einsehbar, Sie können kein Know How verstecken. Folgerung: Javascript kann eine sinnvolle Ergänzung zu serverbasierte Scripten sein. Der Einsatz in kritischen Projekten muss wohl überlegt werden.
5 Arbeitsauftrag: 1.) Erzeugen Sie mit Notepad++ eine Datei bmirechner.html mit eingebettetem Javascript wie im Beispiel. 2.) Testen Sie lokal, laden Sie hoch und testen Sie erneut. 3.) Erweitern Sie das Programm so, das die Nachkommastellen abgeschnitten werden (Tipps: Math.round, Google Suche nach anderen BMI-Rechnern) Fazit 6 Sie können: Interaktive Element mit Javascript in Internet-Seiten einbinden, Sie kennen: Eine clientbasierte Scriptsprache, die mit dem Browser ausgeführt und getestet werden kann, Vor und Nachteile von Javascript. Nächster Schritt: Einrichten einer Testumgebung für serverbasierte Scriptsprachen Und erste Experimente mit PHP.
Sommerakademie 2013 Die eigene Internetseite von Null auf Hundert PHP Prof. Dr. rer. nat. Claus Brell 10.09.2013 Folien unter: http://claus-brell.de Dynamische Inhalte mit PHP? 2 Aus der Wikipedia (verkürzt): PHP wird auf etwa 244 Millionen Websites eingesetzt (Stand: Januar 2013) und wird auf etwa 80 % aller Websites als serverseitige Programmiersprache verwendet (Stand: Juni 2013) und ist damit die am häufigsten verwendete Sprache zum Erstellen von Websites, Tendenz steigend. Zudem ist sie bei den meisten Webhostern vorinstalliert. Browser Internet Webserver PHP läuft auf dem Webserver( Server-basiert ). PHP kann direkt in HTML eingebettet werden (wie CSS). PHP kann als Programmiersprache auch außerhalb des Webservers eingesetzt werden. Manche Informatiker sagen, PHP ist gar keine richtige Programmiersprache. Was kümmert es die Eiche, wenn sich die Sau ihr schrubbt?
Was ist ein Programm? 3 Arbeitsdefinition: Ein Programm (= Computerprogramm) ist die computergerechte Umsetzung einer genauen Vorschrift (Algorithmus), wie mittels eine Abfolge von Befehlen ein Aufgabe zu bewältigen ist. Beispiel: Berechnung des größten gemeinsamen Teilers: Sei A die größere der beiden Zahlen A und B (gegebenenfalls vertauschen). 2. Setze A := A - B. 3. Wenn A und B ungleich sind, dann mit Schritt 1 fortfahren; wenn sie gleich sind, dann den Algorithmus beenden: Diese Zahl ist der größte gemeinsame Teiler. A=6, B=8, tauschen, A=8, B=6. A = 8-6 = 2. A<>B, also tauschen A=6, B=2. A = 6-2 = 4. A<>B, A=4, B=2. A = 4-2 = 2. A=B. fertig, A = kleinster gemeinsamer Teiler Beispiel für ein Programm, programmiert in der Sprache PHP 4 Berechnung des größten gemeinsamen Teilers while ($A!= $B) { if ($B > $A) {$H=$B; $B=$A; $A=$H;} $A=$A-$B; } echo $A;
Wie führt ein Computer ein Programm aus? 5 Ein Computer kann ein Programm nur ausführen, wenn es in einer geeigneten Form vorliegt: Als digitale binäre Daten auf dem Datenträger (Festplatte, USB-Stick ) Mit Befehlen, die die CPU kennt. stark vereinfacht: 0110 0010 1110 11.. Festplatte Programm.exe RAM (Hauptspeicher) CPU (Prozessor) Wie bekommt man ein Programm in eine computerausführbare Form? 6 Zwei von drei Möglichkeiten: 1. Compiler: Quelltexte werden in ausführbare Form umgewandelt. 2. Interpreter: Quelltexte werden zur Laufzeit in ausführbare Form umgewandelt. (PHP macht das so ) Interpreter stark vereinfacht: Texteditor echo "Hallo Welt!\n"; Interpreter Hallo Welt Festplatte Quellcode Programm.php Interpreter Php.exe