Computer-Supported Learning Research Group Prof. Dr. U. Schroeder RWTH Aachen Webshop & Co: How to do (Was steckt hinter dynamischen Internetseiten?) Ein Modul für das Schülerlabor Informatik –InfoSphere- an der RWTH Aachen Verfasser: Marco Kraß Marc-Christoph Gerasch Eiko Schuddebeurs-Kerinnis Kurz-Info: Informatischer Inhalt: DYNAMISCHE WEBPROGRAMMIERUNG Jahrgangsstufe: 8 BIS 9 Vorwissen: HTML, CSS Inhaltsverzeichnis Kurzinformationen für die Lehrkraft…………………………………………………………. 2 Modulbeschreibung: Lernziele…………………………………………………………………………………. 3 Fachliche Analyse………………………………………………………………………. 4 Einordnung in gesetzliche Rahmenbedingungen…………………………………… 4 Benötigte unterrichtliche Voraussetzungen………………………………………….. 5 Verlaufsplan……………………………………………………………………………... 6 Detaillierte Modulbeschreibung……………………………………………………….. 8 Quellenverzeichnis…………………………………………………………………………...10 Anhang………………………………………………………………………………………...12 Seite 1 Kurzinformation für die Lehrkraft Titel: Webshop & Co – HOW TO DO Modul-Bild Schulstufe: Mittelstufe optimale Jahrgangsstufe: Klasse 8 bis 9 Themenbereich: JavaScript, PHP, SQL, Datenbanken, Webtechnologien, HTML, Webprogrammierung, Webshop EINORDNUNG IN GESETZLICHE RAHMENBEDINGUNGEN Lehrplan NRW: Anknüpfungspunkt ist nach der Lernreihe Einführung in HTML und CSS Ende der Klasse 8, Anfang Klasse 9. Das Modul ist eine Heranführung an das nächste Lernthema (dynamische Webseiten mit PHP und SQL) Bildungsstandards der GI: Die Hauptaufgaben des Moduls sind die Modifizierung und Ergänzung der Quelltexte von Programmen durch Nutzung diverser Programmiersprachen nach Vorgaben (Modellieren und Konstruieren, Strukturieren und Vernetzen) sowie das Kooperieren in Projektarbeit, um ein informatisches Problem zu lösen (Kommunizieren und Kooperieren). Einbindung in den Unterricht: Einstieg in dynamische Webprogrammierung (HTML) Vorkenntnisse: HTML, CSS Dauer: 4 Stunden Inhaltsbeschreibung: Dieses Modul zum Thema Webtechnologien und Webprogrammierung gibt einen Blick hinter die Kulissen von Webshops und allgemeinen Funktionen dynamischer Websites. In einer ersten Phase erkunden die Schülerinnen und Schüler (SuS) die Einsatzgebiete der verschiedenen Websprachen und deren Zusammenspiel anhand eines Produktkreislaufs. Dabei verfolgen die SuS eine http-Anfrage, nachdem in einem Browser auf einen Link geklickt wurde, durch das Netz. Dabei sollen an verschiedenen Stationen Aufgaben zur Funktion der jeweiligen Station bearbeitet werden. Nach einer Ergebnissicherung in Form eines Merkblattes, folgt eine vertiefende Arbeitsphase in der ein Webshop-Grundgerüst mit dem Vorwissen der SuS individuell durch HTML und CSS gestaltet wird. Dynamische Elemente, für die vorbereitete Codebausteine zur Verfügung stehen, sollen erkundet und eingesetzt werden. Somit wird der Umgang mit bestehenden zum Beispiel JavaScripten erlernt. Als Abschluss stellen die einzelnen Teams ihre Ergebnisse kurz der Gruppe vor. Seite 2 LERNZIELE 1. Phase (Einarbeitungsphase)    Die SuS sollen Webtechnologien definieren können. Die SuS sollen die Begriffe Clientseitig, Serverseitig, Client- Server Modell, SQL kennen. Die SuS sollen die im Produktkreislauf kennengelernten Webtechnologien (Datenbank, Server, HTML-Builder, Webbrowser) benennen und deren Funktionsweisen erklären können. 2. Phase (Vertiefungsphase)       Die SuS können Eigenschaften von HTML, JavaScript und PHP und deren Einsatzgebiete benennen. Die SuS können die grundlegende Funktionseinbindung und deren Syntax für JavaScript und PHP in HTML wiedergeben. Die SuS sind in der Lage vorgefertigte Funktionen der oben genannten (Programmier-) Sprachen in anderen Kontexten zu benutzen. Die SuS sind in der Lage ein HTML-Grundgerüst mit Hilfe von CSS zu verändern und dabei den Inhalt (PHP und JavaScript Code) so zu belassen wie er ist. Die SuS kennen die Vor- und Nachteile statischer und dynamischer Programmierung und können diese beschreiben. Die SuS haben einen Überblick darüber, wie Onlineshops (oder auch andere datenbankbasierten Webseiten) aufgebaut sind und haben die Funktionsweise und das Zusammenspiel der einzelnen Bestandteile verstanden, so dass sie den gesamten Ablauf von Onlineshops erklären können. FACHLICHE ANALYSE In diesem Modul sind grundlegende HTML und CSS Kenntnisse sehr wichtig, da die SuS, aufbauend auf diesem Wissen, einen eigenen Web-Shop zusammensetzen sollen. Das Modul selber beschäftigt sich mit der Funktionsweise von Webtechnologien. Darunter fallen die Funktionsweise und der Aufbau von SQL Datenbanken und Servern, sowie das Zusammenspiel zwischen Client und Server (Client-Server Modell). Desweiteren dreht es sich um die Einsatzgebiete und grundlegende Syntax der (Programmier-)Sprachen PHP, JavaScript, HTML, SQL und die Verzahnung dieser. Seite 3 EINORDNUNG IN GESETZLICHE RAHMENBEDINGUNGEN Bildungsstandards der GI Modellieren und Konstruieren  Ein Informatikmodell gewinnen: Die SuS werden mit einem Problem konfrontiert und durch eine anschließende Aufgabenstellung dazu aufgefordert, eine reale Situation mit Hilfe der Nutzung verschiedener und geeigneter Programmiersprachen zu lösen und darzustellen. Dazu müssen sie die Situation strukturieren und abstrahieren. Nach der Reduzierung des Problems auf eine programmierbare Ebene wird in einer ersten Phase des Moduls in Gruppen herausgefunden, welche Anforderungen und Schwierigkeiten bei der Umsetzung vorhanden sind. Die Schwierigkeiten sollten nach dieser Phase dann behoben sein. Strukturieren und Vernetzen  Die SuS bekommen während des Moduls die Aufgabe auf Basis von HTML und CSS die Strukturen und Funktionsweisen neuer Programmiersprachen zu erlernen. Der wesentliche Aspekt ist dabei die Verknüpfung und Integration der neuen “Programmiersprachen“ in die bereits erlernten. Somit sollen die SuS informatischen Inhalten nutzen, um Neues mit Bekanntem zu verknüpfen. Kommunizieren und kooperieren  Die SuS müssen während der Gruppenarbeitsphasen Projekte bearbeiten und sie versuchen auch fertigzustellen. Dabei sind sie darauf angewiesen die, in diesen Projekten aufkommende informatischen, Probleme in Teamarbeit zu bearbeiten und zu lösen. So kommunizieren die SuS strukturiert über informatische Sachverhalte im Team und können gleichzeitig ihre   Kooperationsfähigkeit beim Arbeiten im Team ausbauen. Durch das Ausfüllen eines Merkblatts zur Ergebnissicherung dokumentiert jede Gruppe während der Projektarbeit ihre Ergebnisse Zum Ende jeder Arbeitsphase reflektieren die SuS die Arbeitsphase und die Ergebnisse. Am Ende des Moduls soll eine Gesamtreflexion vorgenommen werden. Darstellen und Interpretieren  Da die SuS viele Modulinhalte eigenständig erarbeiten sollen, liegen eine Reihe von Arbeitsblättern bereit. Durch die Nutzung der bereitgestellten Materialien sollen die SuS selbstständig neue informatische Inhalte erarbeiten. Des Weiteren stellt jede Gruppe ihre in der Projektarbeit erarbeiteten Ergebnisse sachgerecht dar. Seite 4 BENÖTIGTE UNTERRICHTLICHE VORAUSSETZUNGEN  HTML o Grundlagen     o Bild einbinden Link kreieren Tabelle bauen DIV- Blöcke CSS  Formatierungen       Text Tabellen Bilder Rahmen Grundlegende Erfahrung im Umgang mit dem Internet o Was ist das Internet? o Wie rufe ich eine Seite auf? o Wo finde ich das Menü einer Seite und wie bediene ich es? gezielte Recherche im Internet EINBETTUNG IN DEN SCHULUNTERRICHT Das Modul kann als Schlusspunkt in einer Unterrichtsreihe, die sich mit HTML und CSS beschäftigt, genutzt werden. Für die SuS, die über das Modul hinaus Interesse an den Themen entwickelt haben und dieses zu Hause vertiefen möchten, werden zur gezielte Nachbereitung Quellen zu Verfügung gestellt. Es ist denkbar, als weiterführende Aufgabe für zu Hause die Erstellung einer eigenen Homepage zu empfehlen. DIDAKTISCH/METHODISCHE SCHWERPUNKTSETZUNG Das Prinzip des aktiven Lernens ist Grundlage des gesamten InfoSphere und damit auch selbstverständlich Grundlage dieses Moduls. In allen Phasen wird Wert darauf gelegt, dass die SuS selbst aktiv sind. Sei es beispielsweise bei der Durchführung der E-Learning-Einheit und die anschließende Fertigstellung eines Merkblattes oder auch beim Zusammensetzen der Codebausteine Seite 5 in der Vertiefungsphase. Immer wieder müssen die SuS selbst aktiv werden. Das aktive Lernen geschieht sowohl gemeinsam mit anderen SuS in einer Gruppe, als auch in Einzelarbeit. Bei der Gestaltung des eigenen Webshops haben die SuS gemäß des Integrationsprinzips die Aufgabe, ihre HTML- und CSS-Kenntnisse zu verwenden. So können sie das neu erlernte Wissen mit dem Wissen verknüpfen, was sie bereits im Unterricht erworben haben. Durch Veranschaulichung wird der Schwierigkeitsgrad reduziert. Gerade in der Einführungsphase des Moduls wird den SuS auf eine einfache Art und Weise verdeutlicht, wie beispielsweise der detaillierte Ablauf des Client-Server-Prinzips ist. Im Allgemeinen werden die Lerninhalte vereinfacht dargestellt, um die komplexe Thematik angemessen vermitteln zu können (Prinzip der Stufenmäßigkeit). Das Prinzip der Lebensnähe und Aktualität ist in diesem Modul ebenfalls integriert, da viele SuS das Internet nutzen, um beispielsweise in Webshops einzukaufen, den Routenplaner zu nutzen oder mit Freunden in sozialen Netzwerken zu kommunizieren. Der generelle Aufbau des Moduls sorgt für einen sachstrukturellen Aufbau, bei dem der rote Faden jederzeit für die Teilnehmer erkennbar ist. Durch den Einleitungsvortrag zu Beginn des Moduls werden die SuS nicht nur für das Modul motiviert, sondern durch die Vorstellung konkreter Beispiele wird ihnen nach dem Prinzip der Zielvorstellung das Ziel des Moduls mitgeteilt. BEGRÜNDUNG DES METHODEN- UND MEDIENEINSATZES In dem Modul wird, wie bei allen InfoSphere-Modulen, darauf Wert gelegt, dass die SuS selber aktiv entwickeln können. Diesem Anspruch werden wir durch die Gruppenarbeitsphasen, in denen die SuS mit vielen verschiedenen Medien und Materialien in Berührung kommen, gerecht. In den Phasen, in denen die Gruppenarbeiten nicht sinnvoll sind, werden die SuS durch aktive Mitarbeit in Unterrichtsgesprächen eingebunden. Bei der Medienwahl haben wir uns hauptsächlich für den Einsatz von Beamer, PC und Arbeitsblättern entschieden. Der Beamer wird in erster Linie dazu benötigt, den SuS in Kurzpräsentationen zu Beginn der Einführungs- und Vertiefungsphase, in denen sie aktiv mitarbeiten sollen, den fachlichen Inhalt darzustellen und sie gleichzeitig zu motivieren. Die eLearning-Einheit während der Einführungsphase wird mit dem PC durchgeführt, bevor von den SuS zur Ergebnissicherung das Merkblatt vervollständigt wird. In der Vertiefungsphase wird nach einer Präsentation über die Grundlagen der verwendeten Programmiersprachen JavaScript und PHP und mit Hilfe von Merkblättern das Wissen zu vorgefertigten Funktionen der Programmiersprachen vertieft. Mit Hilfe des Phase 5-Editor, der sich Seite 6 besonders gut dafür eignet, vorgefertigte Funktionen als Codebausteine vor zu implementieren, wird ein vorgefertigtes Grundgerüst eines Webshops gestaltet. In das Grundgerüst können die SuS die vorimplementierten Funktionen an richtiger Stelle einbinden und den Webshop mit ihren HTML- und CSS-Kenntnissen gestalten. In einem letzten Arbeitsschritt stellen die SuS ihre selbst kreierten Webshops vor. VERLAUFSPLAN Phase Lerninhalte Zeitliche Einschätz ung Methode/ Phasenbezug Materialien Ziel Einleitung/ Motivation Kurze Übersicht über Ablauf und Vorstellung Webtechnologien/ programmierung, Motivation durch Alltagsbezug 10 min Lehrerpräsentation mit Schülerdiskussion Beamer SuS erhalten groben Überblick über das Thema und Begrifflichkeiten, Problem wird deutlich Erarbeitung mittels eLearning Einheit eLearning-Einheit (Produktkreislauf) zur Erarbeitung der Funktionen und Aufgaben der verschiedenen Webtechnologien 60 min Entdecken lassendes Lernen (Gruppenarbeit) Produktkr eislauf Lückentext  Merkblatt (AB, PC Browsera nwengun g, Merkblatt) SuS lernen das Zusammenwirken der verschiedenen Webtechnologien Ergebnissich erung Zusammentragen der aus dem Spiel gewonnen Informationen über Funktionen und Aufgaben der verschiedenen Webtechnologien. 15 min Plenumsdiskussion und Abgleich der Ergebnisse aus dem Produktkreislauf. AB, Beamer Abschluss des „ersten“ Modulteils (Lückentext) Lehrerpräsentation Beamer Motivation Pause Einführung in die Vertiefungsp hase 15 min Motivation zur Nutzung von dynamischen Komponenten bei der Webprogrammierung 10 min Seite 7 Vertiefungsp hase Vertiefung des Verständnisses der Aufgaben von PHP, JavaScript etc. und deren Verwendung 90 min Praktisches Erarbeiten in Partnerarbeit/ Kleingruppen PCs mit XAMPP und Phase 5 Eigenes Projekt wird mit vorgefertigten Codebausteinen erstellt 50 min SuS-Vortrag/ Diskussion Beamer, etc. Beide Phasen werden nochmal reflektiert, ggf. Vorstellung für Eltern Erkennen der Funktion und Zuordnung (welche Sprache) der jeweiligen Codebausteine. Entdecken erster Befehle der jeweiligen Sprachen. Codebausteine kombinieren/ Funktionen anderer Autoren verwenden. Fertigstellung des eigenen Projektes Abschlusspräsentation Demonstration und Diskussion der Ergebnisse der Vertiefungsphase, Teilen der gemachten Erfahrungen, Schwierigkeiten, Möglichkeiten (Bezug auf alle Phasen) Motivierender Ausblick Seite 8 DETAILLIERTE MODULBESCHREIBUNG Das Modul wird durch einen Vortrag der Betreuer eingeleitet. Die Motivation wird hierbei durch lebensnahe Beispiele aus dem Alltag der SuS erreicht, woraufhin bereits vorhandenes Vorwissen der SuS über Webtechnologien gemeinsam zusammengetragen wird. Es soll vermittelt werden, was die SuS an diesem Tag erwartet und in diesem Zusammenhang ein Rahmen abgesteckt werden, wobei es sich bei Webtechnologien und dynamischer Webprogrammierung handelt. Als nächstes gehen die SuS in Gruppen von 2-5 Personen weiter zu „Tonys Produktkreislauf“, einer mit Arbeitsblättern begleiteten eLearning-Einheit. Hier sollen sie die verschiedenen Stationen ablaufen, die auch eine Produktanfrage, nachdem in einem Onlineshop auf ein Produkt geklickt wurde, durchläuft. Die verschiedenen Stationen sind: Browser, Server, Datenbank, HTML-Builder (und wieder Browser). Am Anfang liegt für jeden SuS ein Merkblatt bereit. Das Merkblatt müssen die SuS selber ausfüllen, daher ist dieses voller Textlücken und Fragen. Die Antworten finden die SuS unter anderem in den Informationsblättern an den einzelnen Stationen. Beim Browser bekommen die SuS eine Produktanfrage und Informationen über Webbrowser. Am Server warten auf sie ein kleines SQLTutorium und eine Aufgabe dazu. Das SQL-Tutorium umfasst Informationen zum Aufbau einer SQLAnfrage und Datenbank. Vom Server geht es weiter zur Datenbank. Hier soll von den SuS die richtige SQL-Anfragezeile zu ihrem Produkt in den Computer eingegeben werden. Daraufhin suchen sie in der „anfassbaren Datenbank“ ihr Produkt, welches in Form von Codeschnipseln bereit liegt. Diese müssen sie an der letzten Station, dem HTML-Builder, in HTML-Tags einbetten, wodurch sich ein Code ergibt der in der Browseranwendung eingegeben wird. Das Ergebnis bekommen die SuS dann in der Browseranwendung angezeigt. Zum Abschluss der ersten Phase findet eine Ergebnissicherung statt. Die SuS sollten sich bereits über den Lückentext in ihrer Gruppe ausgetauscht haben. Der Lückentext wird dann im Plenum mit den SuS zusammen besprochen und so das Wissen, dass sie über Webtechnologien gewonnen haben, zusammentragen und reflektiert. Hiernach gibt es eine kurze Pause bevor es mit der zweiten Phase weitergeht. Die Vertiefungsphase, oder auch zweite Phase, wird wieder durch einen lehrerorientierten Vortrag eingeleitet. Der Inhalt dieses Vortrags ist grundlegendes Wissen über die Verwendung der Programmiersprachen JavaScript und PHP. Im Anschluss bekommen die SuS nochmals ein Blatt mit weitergehenden Informationen zu den Programmiersprachen sowie vorgefertigten Funktionen, die sie im Folgenden in eine eigene Website einbauen sollen. Dazu finden sie sich in 2er Teams zusammen, bearbeiten ein Grundgerüst eines Webshops nach ihren Vorlieben und lernen so Webseiten dynamisch zu gestalten und Inhalte in ein HTML-Layout einzufügen, welches sie mit ihrem Vorwissen, nach Wunsch verändern können. Als Hilfestellung bekommen die SuS eine Reihe von Blättern die ihnen nochmal die verschiedenen HTML und CSS Befehle erläutern, sofern sie dies benötigen. Im Editor „Phase 5“ wurden im Voraus bereits die erwähnten Codebausteine vorimplementiert, sodass Seite 9 diese einfach integriert werden können. Ziel soll es sein, den SuS neben der Auffrischung der Kenntnisse über HTML und CSS, ein Gefühl für die Verwendung dynamischer Elemente, die bereits implementiert wurden, zu geben. Im Internet gibt es eine Vielzahl von bereitgestellten Funktionen die, mit dem hier gelernten Grundlagenwissen, integriert werden können. Außerdem zeigt es den SuS eine für sie neue Form der Webprogrammierung auf, in der das Layout losgelöst vom Inhalt erstellt wird. Dieser sogenannte „Content-Management-System“-Aufbau, ist die Grundlage der modernen Webprogrammierung und öffnet den SuS neue Möglichkeiten zur professionellen Erstellung ihrer eigenen Webseiten. Zum Abschluss des Moduls stellen die SuS ihr Projekt am Beamer vor. Daraufhin folgt noch eine geleitete Diskussion über das Ergebnis der Vertiefungsphase, die gemachten Erfahrungen und die Schwierigkeiten. Besonders wird hier Wert auf das übergreifende Wissen über die Anwendung im professionellen Bereich, wie am Ende des letzten Abschnitts erwähnt, gelegt. Die Erkenntnis, in diesem Modul einen Einblick in die Grundlagen der professionellen Webprogrammierung erhalten zu haben, mit deren Hilfe sie ihre eigene Webseite professioneller gestalten können, soll die SuS zur selbständigen Weiterbildung motivieren. Ein paar Beispiele dazu geben einen Ausblick in die Vielzahl der Möglichkeiten, die ihnen mit ein wenig Engagement offen stehen. Seite 10 QUELLENVERZEICHNIS Textquellen: - - Browser: o http://www.itwissen.info/definition/lexikon/Browser-browser.html o http://www.pc-typ.de/fachbegriffe-lexikon/browser/ Server o http://www.blinde-kuh.de/internet/server.htm Bildquellen: - Browser o http://4.bp.blogspot.com/m05xJ9eXthU/Tt5mIUtP0vI/AAAAAAAAAJA/PufU5IsAeic/s1600/lehrer%25255B1%25 255D.gif o http://4.bp.blogspot.com/9wzsgB2FhM8/T2w9HsqWrKI/AAAAAAAABSk/lj1jCoWUAj4/s1600/Web_Browsers_ War.jpg - - Server o http://www.eva-mariahetterich.de/pics/lehrer.jpg o http://www.blinde-kuh.de/internet/server.htm o http://www.verkehrsrundschau.de/fm/3573/DeutschePostBriefzentrum.jpg Datenbank o - http://www.michaelklier.info/picture/datenbank.gif Tony o http://3.bp.blogspot.com/_lGkpUt4ELB4/TTfQDotd8mI/AAAAAAAAAGI/hKTgtUkl8wo/ s1600/nerd.jpg - SQL o http://hdwh.de/ o http://www.koeln.de/koeln/deutschlands_groesste_ikeafiliale_oeffnet_in_koeln_14049 2.html - HTML-builder: o - http://www.bs-promotion.de/tl_files/bspromotion/images/puzzle.jpg Präsentationen und Merkblätter o Einleitung     http://www.vlmedia.de/wp-content/uploads/2010/12/phase-screen.png http://www.thr3.de/img/web_technologie.png http://blog.botfrei.de/wp-content/uploads/2012/06/browser1.jpg http://trialx.com/curetalk/wp-content/blogs.dir/7/files/2012/04/cities/Merke1.jpg Seite 11       o http://images.computerwoche.de/images/computerwoche/bdb/493328/890.jpg http://www.yopi.de/image/prod_pics/765/f/765572.jpg http://www.swisseduc.ch/informatik/dynamische_webseiten/icons/dynamische _webseiten.jpg http://www.imagine03.de/uploads/pics/kleingruppen.jpg http://schnelllernspezialist.files.wordpress.com/2009/08/fotolia_8851567_xs.jp g http://www.jonathanheitz.ch/data/uploads/technologien5-2.png Vertiefung             http://www.neckermannreisen.de/?extcall=admatics&psem=sem_google_lp=h omepage&gclid=CKLV26u56LMCFYJP3godWGoAwQ http://cdn1.iconfinder.com/data/icons/ie_Bright/512/plus_add_green.png http://techtweets.com.bd/wp-content/uploads/2011/02/HTML-logo.jpg http://www.power-webdesign.de/web_bilder/javascript.png http://www.awesomeit.pl/sites/default/files/ist2_6154797-javascript-code-toreveal-the-internet.jpg http://www.beforth-essen.de/media/Fotos_fotolia/fazit.jpg http://blog.ronnyristau.de/wp-content/uploads/2008/12/php.jpg http://www.php.net/manual/de/function.include.php http://www.gamisoft.de/downloads/Uebersicht%20HTMLBefehle%20Grundlag enkurs.pdf home.arcor.de/san-solty/HTML%20Befehle.doc lmr.monheim.de/aktuelles/berichte2007/.../Liste%20CSS-Befehle.doc http://fatherofcents.com/wpcontent/uploads/2011/08/commenting_html_php_js_asp.gif Seite 12 ANHANG TEIL 1: ORGANISATORISCHES Zugehörige Materialien    Organisatorisches o Ablaufplan o Installationsanleitung für Xampp und Phase 5 Arbeitsblätter o 1.1. M1 Merkblatt-Produktkreislauf o 1.2. B1 Produktanfrage KochbuchDesTodes o 1.2. B1 Produktanfrage iPhone o 1.2. B1 Produktanfrage Samsung Galaxy o 1.3. D1 Datenbanken und SQL o 1.4. H1 Der HTMLbuilder o 2.1. V1 Merkblatt_Vertiefung o 2.2. V2 Anleitung zum Phase 5 Editor o 2.3. V3 Aufgaben zum Einstieg o 2.4. V4 Erläuterung Codebausteine o 2.5. V5 CSS_Grundbefehle o 2.6. V6 HTML_GrundBefehle Materialien o PuzzleTeile o EinleitungsVortragPhase1 o EinleitungsVortragPhase2(Betreuerversion) o EinleitungsVortragPhase2(Vortragsversion) o ErgbnissicherungPhase1(Gestaltungsmöglichkeit) o ErgebnissicherungPhase2(Gestaltungsmöglichkeit) o ErgebnissicherungPhase2Leitfragen o Portable Version von XAMPP mit      HTML-Grundgerüst Web-Shop Browseranwendung Insert für Datenbank Lösungsdokumente für Betreuer o M1 Merkblatt-Produktkreislauf (Lösung) o LösungenFürDieBrowseranwendung Seite 13 Schülerlabor Informatik Webshop und Co. Ablaufplan Einleitung - Begrüßung Einleitungsvortrag (Webshop+Co_new.pptx) Einteilung der Kleingruppen für die E-Learning Einheit E-Learning Einheit - Browser Merkblatt (Blatt M1) Arbeitsblätter sowie Seiten im Browser •home (Einleitung) •browser1 •... •browser4 Browser • server • server2 • server3 •Produkanfrage (B1) Blatt Browser Server HTML Builder Datenbank •htmlbuilder Browser Browser • datenbank • Datenbanken und SQL (D1) Blatt Browser •HTML Builder Infoblatt (H1) •Puzzle •htmlbuilder2 •puzzlecheck (Anzeige des Produkts) •backtobrwoser •Anzeige im Shop Blatt Browser 1 • datenbank2 Schülerlabor Informatik Webshop und Co. Ablaufplan Ergebnissicherung E-Learning Einheit - Ergebnissicherung PPP (Ergebnissicherung.pptx) o Besprechung der Erfahrungen o Vergleich des Merkblattes Pause Vertiefung Einleitung Vertiefung - - Vortrag (Webshop und Co_Vertiefung_new(Vortragsversion)) o Kurze Information zu den verwendeten Programmiersprachen(Beispielhaft) o Einteilung Teams zur Programmierung Merkblatt (V1) Erstellung der Webseiten - Anleitung zum Phase 5 Editor (V2) Aufgaben zum Einstieg (V3) Erläuterung Codebausteine (V4) HTML/CSS Nachschlagwerk(V5/V6) Abschluss Kurzpräsentation der Ergebnisse - Ca. 5 min pro Gruppe o Kurze Erläuterung der Besonderheiten/eingesetzter Elemente/Farbwahl etc. o Hoffentlich sehr viele unterschiedliche Websites  wenig Wiederholung unter den Gruppen Diskussion - - Leitfragen zur Diskussion (Leitfragen für die Gruppendiskussion.docx) o Persönlich interessanteste Erkenntnisse o Schwierigkeiten o Verbesserungsmöglichkeiten Ausblick und Informationen zur selbstständigen Weiterbildung (Links.docx) 2 Installationsanleitung Xampp/Phase 5 Xampp zur Installation von Xampp muss lediglich die Datei "setup_xampp.bat", im Ordner Xampp, ausgeführt werden, um die Umgebungsvariablen entsprechend zu setzen. Danach kann über "xampp_control.exe" ein Fenster geöffnet werden in dem dann Apache und MySQL gestartet werden können. Phase 5 Phase 5 benötigt keine Installation, einfach die "htmledit.exe" öffnen. Damit die SuS beim auswählen des Webshop projektes direkt die Dateien zur verfügung haben, muss der Pfad unter "Projekt --> Einstellungen --> Lokale Verzeichnisse --> Stammordner" auf den Projektordner „xampp --> htdocs --> grundgeruest“ gesetzt werden. Leider lässt das System hier keine relativen Pfade zu, daher muss es bei jedem PC erneut gemacht werden. ANHANG TEIL 2: ARBEITSBLÄTTER Schülerlabor Informatik Webshop und Co. Merkblatt Webtechnolgien Merkblatt - Webtechnologien  In diesem Modul beschäftigen wir uns mit . .  Das ist das grundlegende Modell in unserem Modul. Es dient beispielsweise zum besseren Verständnis einer Produktanfrage. Eine erfolgreiche Produktbestellung läuft wie folgt ab:  Der ist eine Software, um Wide Web und allgemein Dokumente und Daten darzustellen. im World  Neben - Dokumenten kann der Browser unter anderem auch Bilder oder pdf - Dateien visualisieren.  Der Browser befinden sich im Client-Server Modell auf der  Vom Browser werden gesendet.  Damit nun der Inhalt einer bestimmten Internetseite, definiert durch ihre Webadresse im dargestellt werden kann, kommuniziert dieser mit dem  Beim Server unterscheidet man zwischen Hardware und  Aus Hardwaresicht ist ein Server ein mehrere Server (Software) laufen. 1 , auf dem ein oder . Schülerlabor Informatik Webshop und Co. Merkblatt Webtechnolgien  Ein Server aus (Service) anbietet. ist ein Programm, das einen Dienst  Im Rahmen des kann ein anderes Programm, der , diesen Dienst nutzen.  Der Server ist in Bereitschaft, um jederzeit auf die Kontaktaufnahme eines reagieren zu können.  Die Regeln für die Kommunikation (z.B Format) nennt man und sind eindeutig festgelegt.  Es können mehrere verschiedene auf einem laufen.  Die dient zur geordneten und liegt auf dem Speicherung von .  Die Verarbeitung von Daten erfolgt in der Regel mit Hilfe von .  Um die vom geforderten auszulesen, wird eine  Mit Hilfe des zusammengesetzt Daten aus der gestellt. werden die und dann vom zurück zum geschickt, der die gewünschte Internetseite bzw. das Produkt im Browser angezeigt bekommt. 2 Schülerlabor Informatik Webshop und Co. Merkblatt Webtechnolgien Fazit: Der sendet eine Anfrage an den startet eine an die Datenbank, um die vom geforderten aus der wird . Dieser zu holen. Mittels des das zusammengepuzzelt wieder an den gesendet. 3 und vom Schülerlabor Informatik Webshop & Co. B1 Produktanfrage Produktanfrage: IPhone http://127.0.0.1/webshop/index.php?position=iPhone GET /webshop/index.php?position=iPhone HTTP/1.1 Host: 127.0.0.1 User-Agent: Mozilla/5.0 (Windows NT 6.2; rv:16.0) Gecko/20100101 Firefox/16.0 Connection: keep-alive In dem Kasten seht ihr wie eine http-Anfrage aussieht, die der Browser losschickt. Was für uns von Interesse ist, sind die Informationen zu Host und Get. Mit Host wird hier die Adresse definiert, an die die Anfrage gesendet werden muss. Über Get teilt der Browser mit was genau er haben will, hier könnt ihr auch den Namen eures Produktes wiederfinden. Aufgabe: Was glaubt ihr, wohin die Anfrage vom Browser weiter geleitet werden muss? Welche Schritte sind notwendig, um das Produkt letztendlich auf dem Bildschirm anzeigen zu können? Notiert euch eure Vermutungen! Euch könnte der Text über Webbrowser auf der Rückseite weiterhelfen. Wenn ihr fertig seid, geht zur nächsten Station und klickt in der Browseranwendung auf den Button, der mittlerweile dort erschienen sein sollte. 1 Schülerlabor Informatik Webshop & Co. B1 Produktanfrage 1. Station: Der Webbrowser Der Webbrowser ist eine Software, mit der ihr Webseiten darstellen könnt und die euch hilft die zahlreichen Funktionen des Internets zu nutzen. Ruft man einen Web-Link auf, wird eine Seite geladen, die im Browser auf dem Bildschirm dargestellt wird. Neben HTML-Seiten könnt ihr mit dem Browser auch noch weitere Dokumente darstellen, wie z.B. Bilder oder PDF-Dateien. Der Browser befindet sich auf der Client-Seite bzw. er ist ein Web-Client. Das heißt, dass der Browser eine Anwendung ist, die auf eurem Computer ausgeführt wird und nicht auf einem Webserver. Um einen Link zu öffnen kommuniziert der Browser für euch mit dem Server der jeweiligen Internetseite. Dies geschieht über eine http-Anfrage an den Webserver. Der Browser kriegt daraufhin eine http-Antwort zurück, welche die HTMLDokumente mit dem HTML-Code überträgt. Diese Dokumente werden dann vom Browser verarbeitet und graphisch auf eurem Bildschirm dargestellt. http heißt ausgeschrieben „hypertext transfer protocol“ und ist ein Standard für die Kommunikation zwischen Browser und Server. Ihr habt es vielleicht schon einmal am Anfang einer Internetadresse gesehen. 2 Schülerlabor Informatik Webshop & Co. B1 Produktanfrage Produktanfrage: Kochbuch des Todes http://127.0.0.1/webshop/index.php?position=Kochbuch%20des%20Todes GET /webshop/index.php?position=Kochbuch%20des%20Todes HTTP/1.1 Host: 127.0.0.1 User-Agent: Mozilla/5.0 (Windows NT 6.2; rv:16.0) Gecko/20100101 Firefox/16.0 Connection: keep-alive In dem Kasten seht ihr wie eine http-Anfrage aussieht, die der Browser losschickt. Was für uns von Interesse ist, sind die Informationen zu Host und Get. Mit Host wird hier die Adresse definiert, an die die Anfrage gesendet werden muss. Über Get teilt der Browser mit was genau er haben will, hier könnt ihr auch den Namen eures Produktes wiederfinden. Aufgabe: Was glaubt ihr, wohin die Anfrage vom Browser weiter geleitet werden muss? Welche Schritte sind notwendig, um das Produkt letztendlich auf dem Bildschirm anzeigen zu können? Notiert euch eure Vermutungen! Euch könnte der Text über Webbrowser auf der Rückseite weiterhelfen. Wenn ihr fertig seid, geht zur nächsten Station und klickt in der Browseranwendung auf den Button, der mittlerweile dort erschienen sein sollte. 1 Schülerlabor Informatik Webshop & Co. B1 Produktanfrage 1. Station: Der Webbrowser Der Webbrowser ist eine Software, mit der ihr Webseiten darstellen könnt und die euch hilft die zahlreichen Funktionen des Internets zu nutzen. Ruft man einen Web-Link auf, wird eine Seite geladen, die im Browser auf dem Bildschirm dargestellt wird. Neben HTML-Seiten könnt ihr mit dem Browser auch noch weitere Dokumente darstellen, wie z.B. Bilder oder PDF-Dateien. Der Browser befindet sich auf der Client-Seite bzw. er ist ein Web-Client. Das heißt, dass der Browser eine Anwendung ist, die auf eurem Computer ausgeführt wird und nicht auf einem Webserver. Um einen Link zu öffnen kommuniziert der Browser für euch mit dem Server der jeweiligen Internetseite. Dies geschieht über eine http-Anfrage an den Webserver. Der Browser kriegt daraufhin eine http-Antwort zurück, welche die HTMLDokumente mit dem HTML-Code überträgt. Diese Dokumente werden dann vom Browser verarbeitet und graphisch auf eurem Bildschirm dargestellt. http heißt ausgeschrieben „hypertext transfer protocol“ und ist ein Standard für die Kommunikation zwischen Browser und Server. Ihr habt es vielleicht schon einmal am Anfang einer Internetadresse gesehen. 2 Schülerlabor Informatik Webshop & Co. B1 Produktanfrage Produktanfrage: Samsung Galaxy http://127.0.0.1/webshop/index.php?position=Samsung%20Galaxy GET /webshop/index.php?position=Samsung%20Galaxy HTTP/1.1 Host: 127.0.0.1 User-Agent: Mozilla/5.0 (Windows NT 6.2; rv:16.0) Gecko/20100101 Firefox/16.0 Connection: keep-alive In dem Kasten seht ihr wie eine http-Anfrage aussieht, die der Browser losschickt. Was für uns von Interesse ist, sind die Informationen zu Host und Get. Mit Host wird hier die Adresse definiert, an die die Anfrage gesendet werden muss. Über Get teilt der Browser mit was genau er haben will, hier könnt ihr auch den Namen eures Produktes wiederfinden. Aufgabe: Was glaubt ihr, wohin die Anfrage vom Browser weiter geleitet werden muss? Welche Schritte sind notwendig, um das Produkt letztendlich auf dem Bildschirm anzeigen zu können? Notiert euch eure Vermutungen! Euch könnte der Text über Webbrowser auf der Rückseite weiterhelfen. Wenn ihr fertig seid, geht zur nächsten Station und klickt in der Browseranwendung auf den Button, der mittlerweile dort erschienen sein sollte. 1 Schülerlabor Informatik Webshop & Co. B1 Produktanfrage 1. Station: Der Webbrowser Der Webbrowser ist eine Software, mit der ihr Webseiten darstellen könnt und die euch hilft die zahlreichen Funktionen des Internets zu nutzen. Ruft man einen Web-Link auf, wird eine Seite geladen, die im Browser auf dem Bildschirm dargestellt wird. Neben HTML-Seiten könnt ihr mit dem Browser auch noch weitere Dokumente darstellen, wie z.B. Bilder oder PDF-Dateien. Der Browser befindet sich auf der Client-Seite bzw. er ist ein Web-Client. Das heißt, dass der Browser eine Anwendung ist, die auf eurem Computer ausgeführt wird und nicht auf einem Webserver. Um einen Link zu öffnen kommuniziert der Browser für euch mit dem Server der jeweiligen Internetseite. Dies geschieht über eine http-Anfrage an den Webserver. Der Browser kriegt daraufhin eine http-Antwort zurück, welche die HTMLDokumente mit dem HTML-Code überträgt. Diese Dokumente werden dann vom Browser verarbeitet und graphisch auf eurem Bildschirm dargestellt. http heißt ausgeschrieben „hypertext transfer protocol“ und ist ein Standard für die Kommunikation zwischen Browser und Server. Ihr habt es vielleicht schon einmal am Anfang einer Internetadresse gesehen. 2 Schülerlabor Informatik Webshop & Co. D1 Datenbanken und SQL Die Datenbank Datenbanken dienen der geordneten Speicherung von Informationen. Die Daten werden in einer Art Register auf einem Server abgelegt. Jede Information hat spezielle Merkmale, wie zum Beispiel Name, Typ,… anhand dessen sie im Anschluss wiedergefunden werden kann. Die Verarbeitung der Daten erfolgt mit der Hilfe einer Datenbanksprache namens SQL. Um Daten aus der Datenbank zu holen, wird eine Anfrage in der Sprache SQL an die Datenbank gerichtet. Ein Beispiel: Ablauf einer Anfrage Stellen wir uns die Datenbank wie das Lager eine IKEA Filiale vor. Du suchst dir die Adresse einer Filiale raus und fährst dort hin. Du kennst den Produktnamen z.B. „Billy“ und möchtest das Produkt im Lager finden. Im Lager steht ein Mitarbeiter, an den du deine Anfrage stellst und dieser verrät dir, sofern vorhanden, wo sich das Produkt im Lager befindet. Du holst es dir und gehst zur Kasse. Eine Datenbankanfrage funktioniert ganz ähnlich. Du suchst dir die Serveradresse raus auf der die gesuchte Datenbank liegt und stellst eine Anfrage an das Verwaltungsprogramm der Datenbank. Die Anfrage wird verarbeitet und sofern vorhanden bekommst du die Position der gewünschten Informationen, oder einen Fehler, falls die Daten nicht in der Datenbank sind. Natürlich gehst du jetzt nicht hin und holst dir die Informationen persönlich, sondern du lässt ein kleines Programm, das hier jedoch nicht weiter von Interesse ist, deine Daten abholen. 1 Schülerlabor Informatik Webshop & Co. D1 Datenbanken und SQL Aufbau einer Datenbank Jede Datenbank hat einen Namen und enthält Tabellen mit Daten. In einer Datenbank können mehrere Tabellen liegen, die durch ihre Namen aufgerufen werden können. SQL dient nur für die eigentliche Datenbankabfrage. Die Verbindung vom Server zur Datenbank und auch die Kommunikation laufen über eine andere Programmiersprache, so wie du selbst zur IKEA Filiale fahren musst, um dort dein Produkt zu suchen. Wir benutzen hier PHP, die am meisten verwendete Programmiersprache, um Websites effektiver zu gestalten und eine Reihe von Funktionen zu ermöglichen, die mit HTML nicht möglich sind, so zum Beispiel auch Datenbankzugriffe. Um PHP vollständig nutzen zu können, bedarf es einiger Übung und Erfahrung, die wir euch nicht spontan vermitteln können. Euch werden im Lauf des Moduls ein paar Befehle begegnen, die euch später im Umgang mit PHP, SQL, und Datenbanken helfen werden. 2 Schülerlabor Informatik Webshop & Co. D1 Datenbanken und SQL SQL Anfrage “SELECT Spaltennamen FROM Tabellenname WHERE Suchbedingung ”; So sieht eine SQL Anfragezeile aus. Die kursiv markierten Stellen sollen dabei durch die gewünschten Informationen ersetzen werden. Dazu solltet ihr natürlich wissen wie eure Tabelle aufgebaut ist. In unserem Onlineshop sieht eine Tabelle der Produkt-Datenbank wie folgt aus: Tabellenname: products Spaltenname name price text picture Milch 2,5 Diese Milch ist ./milch.jpg besonders Calcium haltig. iPad 399 Ein iPad ist ein Tabletpc ./ipad.jpg mit Touchscreen. … Suchbedingung … … … Wenn ihr eine ganze Zeile und nicht nur einzelne Zellen aus der Tabelle haben möchtet, dann setzt ihr für Spaltennamen einfach ein * ein. Der Tabellenname ist hier products und die Suchbedingung für das iPad würde wie folgt lauten: NAME=‘iPad‘. Achtet auch auf Hochkommata und Leerzeichen, insbesondere auch bei den Produktnamen. 3 Schülerlabor Informatik Webshop & Co. H1 HTML-Builder Infoblatt Der HTML-Builder An dieser Station werdet ihr die Aufgabe des PHP-Scripts kennenlernen, welches die Daten die ihr aus der Datenbank erhaltet, in eine HTML Seite einbettet. Puzzelt aus den zur Verfügung stehenden Teilen eine Produktseite zusammen und setzt die Daten aus der Datenbank ein. Hier gibt es nicht die Information, ob das Ergebnis richtig oder falsch ist. Es wird lediglich angezeigt, ob euer Ergebnis funktionstüchtig ist oder nicht. Die Korrektheit eures Ergebnisses könnt ihr am Laptop überprüfen. Damit ihr nicht ganz ohne Anleitung seid, versucht folgendes zu erreichen. 1. Der Produkttitel soll extra groß und in blau dargestellt werden. 2. Der Preis soll extra extra groß und in rot dargestellt werden und unterhalb des Titels stehen. 3. Ein Bild soll links neben dem Preis und dem Titel stehen. (Es reicht dazu nicht aus, nur zu definieren, dass das Bild links stehen soll, sondern auch eine Definition des Ortes für Preis und Titel wird benötigt.) 4. Die Produktbeschreibung steht unter dem Bild und dem Text. Wenn ihr die Puzzleteile nicht versteht, dann könnt ihr euch bei einem Betreuer eine Tabelle mit grundsätzlichen HTML Befehlen und einer Erklärung dazu abholen. In vielen Fällen reicht es schon den Begriff vom Englischen ins Deutsche zu übersetzen. Nutzt dazu den PC und z.B. www.leo.org Um das Ergebnis des Puzzles anzugucken, notiert ihr euch die Reihenfolge der Buchstaben und Zahlen auf den Puzzleteilen und gebt diese in der Browseranwendung ein. 1 Schülerlabor Informatik Webshop und Co. V1 Merkblatt Webtechnolgien Merkblatt - Vertiefungsphase Eigenschaften HTML:  statisch  Seite muss immer neu geladen werden  für jede Seite gibt es eine eigene Datei  eingeschränkte Funktionsmöglichkeiten JavaScript ergänzt HTML:       macht die Seite dynamisch ermöglicht Interaktion Mit HTML werden die Struktur und der Inhalt der Seite definiert. Mit CSS wird das Layout erstellt. JavaScript wird genutzt, um Interaktion und Dynamik in die Seite zu integrieren. php bringt ebenfalls Dynamik in Webseiten und dient der Kommunikation mit Datenbanken. JavaScript & HTML  Eine JavaScript Funktion kann im „head“ oder einer eigenen Datei deklariert werden… < head> <script text=“text/javascript“> function Funktion(){ …} < /script> < /head>    …und wird im „body“ aufgerufen. < body> <script text=“text/javascript“> Funktion(); < /script> < /body> Der eigentliche Code muss dabei immer von dem HTML-tag „script“ umschlossen sein. Außer eine Funktion wird zum Beispiel mit Hilfe von onclick aufgerufen: o „onclick“ heißt „beim Anklicken“ o Der „onclick“-Effekt ist unter anderem ein Zusatz von Buttons in HTML. <body> <button onclick="myFunction()">Buttonname</button> </body> Schülerlabor Informatik Webshop und Co. V1 Merkblatt Webtechnolgien php und HTML     Eine php Funktion befindet sich meistens in einer extra Datei und sieht vom äußeren einer JavaScript Funktion ähnlich. function Funktion($para1,para2,...){ ... } php-Code muss so wie JavaScript-Code ebenfalls immer, wenn er zusammen mit HTML auftritt, umschlossen sein. Allerdings etwas anders als bei JavaScript: <?php Funktion($para1,para2,...); ?> </body> Und auch die Funktionen werden im „body“ aufgerufen. Eine sehr wichtige Funktion in php ist „echo“ o Mit echo kann man einen Text anzeigen lassen,… <body> <?php o …was für HTML aber nichts Besonderes ist. echo “Auszugebender Text“; ?> </body> o Das Besondere an echo ist, dass man einen Text, den man von einer Funktion bekommt hat, ausgeben lassen kann. o Dazu schreibt man einfach den Funktionsaufruf anstelle des Textes.  <body> <body> <?php echo echoProduktText($product); ?> </body> Anderswo deklarierte Funktion, die den Produkttext ausgibt Eine weitere wichtige Funktion ist „include“ o Mit include kann man den Inhalt anderer Dateien einbinden. <?php include ‘nameDerEinzufuegenenDatei‘; ?> o Das kann man zum Beispiel dazu nutzen, um Werte zuzuweisen: In einer Datei „test.php“, definieren wir zwei Werte. In einer anderen Datei geben wir mit echo einen Text aus, indem wir die Werte aus „test.php“ nutzen. Einmal bevor wir „test.php“ einbinden und einmal nachher. <?php <?php echo "Der $frucht ist $farbe."; include 'test.php'; echo "Der $frucht ist $farbe"; $farbe = 'grün'; $frucht = 'Apfel'; ?> Die Ausgabe sieht dann so aus: (echo1) Der ist . (echo2) Der Apfel ist grün. ?> Wichtig! Dateien, in denen php verwendet wird, müssen auf „.php“ enden. Schülerlabor Informatik Webshop & Co. V2 Anleitung zum Phase 5 Editor Der Phase 5 Editor Ein Editor mit vielen Möglichkeiten und unterstützten Sprachen ist der von uns genutzte Phase 5 Editor. Neben einer guten Auswahl an Funktionen zur HTML CSS und Javascript Programmierung verfügt er auch über eine Verwaltung von so genannten „Benutzer Tags“. Dies sind in diesem Fall von uns eingefügte HTML Codestücke die Ihr nutzen könnt. Die genaue Beschreibung findet ihr auf dem Arbeitsblatt Erläuterung zu Codebausteinen. Ihr benutzt zur Erstellung eurer Webseite unsere Vorlage, welche bereits als Projekt in Phase 5 eingefügt wurde. Wählt im Navigator das Projekt „Webshop“ aus und öffnet die Datei „index.php“. Jetzt könnt ihr mit dem Programmieren anfangen. Schaut euch dazu das Arbeitsblatt V2 an. Navigator Allgemeine Textoperationen Vorschau 1 Benutzer Tags Schülerlabor Informatik Webshop & Co. V2 Anleitung zum Phase 5 Editor Grundlegende Funktionen Navigator Im Navigator wird Euch die Dateistruktur des Projekts angezeigt. Hier könnt ihr auswählen welche Dateien ihr bearbeiten möchtet. Textoperationen Die Textoperationen stehen hier im Schnellzugriff um die Arbeit zu erleichtern. Unter dem Menüpunkt „Einfügen“, findet ihr weitere vorgefertigte Elemente, wie zum Beispiel Bilder oder Tabellen. Vorschau Die Vorschau ermöglicht es euch direkt zu sehen wenn ihr Dinge verändert. Einfacher ist es jedoch, nachdem ihr einmal die Vorschau geöffnet habt, im Browser auf „neu laden“ zu klicken. Denkt jedoch daran, das ihr nur Veränderungen sehen könnt, wenn eure Dateien gespeichert wurden. Benutzer Tags Dies ist der entscheidende Teil des Editors. Klickt ihr auf das Symbol für „Benutzer Tags“, wird euch eine Liste mit vorgefertigten Codebausteinen angezeigt, die ihr direkt übernehmen könnt. Der Code wird an der Stelle, wo euer Curser im Dokument steht, eingefügt. 2 Schülerlabor Informatik Webshop & Co. V3 Aufgaben zum Einstieg Aufgaben zum Einstieg Eure Aufgabe soll es sein, unser HTML Grundgerüst nach euren wünschen zu gestalten. Dies lässt euch großen Spielraum, was ihr letztendlich machen möchtet. Zum reinkommen haben wir hier für euch ein paar mögliche Aufgaben bereitgestellt die euch den Einstieg erleichtern sollen. Im Allgemeinen ändern wir unser Design immer in der Style (.css) Datei, Text hingegen in HTML Dokumenten. Farben Die Farbgebung einer Website bildet ihren Charakter. So wirkt eine sehr bunte Seite beispielsweise verspielt und vielleicht lustig, eine Website mit eher schlichten aber auch gut abgestimmten Farben steht für Professionalität und Seriosität. - geht im Editor auf „Einfügen“ und wählt „RGB Farbe“ - überlegt euch eine Farbe die als Basis für euer Design gelten soll und wählt sie mit dem Schieber aus - mit dem Regler an der rechten Seite könnt ihr die Intensität einstellen, wählt hier eine sehr helle Abtönung und fügt sie für euren Website Hintergrund mit einem Klick auf „ok“ ein - wählt nun verschiedene Abtönungen und fügt sie für verschiedene Elemente eurer Seite ein Der erste Schritt zu eurem Design ist getan. Links und Inhalte Die Inhalte des Grundgerüsts werden mit Hilfe einer PHP Basis eingefügt. Das Design bleibt dabei immer gleich, lediglich der Inhalt des Tabellenabschnitts, wo die Inhaltsdatei eingebunden wird ändert sich. Dies ist bei euch standartmäßig die „<td id="left">“. Eingebunden wird die .php Datei der entsprechenden Position, die ihr über Links verändern könnt. <a href="index.php?position=elektronik">Elektronik</a> Dieser Link ändert die Position auf „elektronik“. Es wird folglich die Datei „elektronik.php“ eingebunden, sofern diese vorhanden ist. - Erzeugt eine Datei „musik.php“ und speichert sie im Hauptverzeichnis (alles im P5 editor) - Schreibt ein paar Zeilen in die Datei und fügt ein Produkt hinzu (siehe AB. V3) 1 Schülerlabor Informatik Webshop & Co. V3 - Aufgaben zum Einstieg Nutzt den vorhandenen Link „Musik“ und ändert ihn so, dass eure Datei aufgerufen wird. Es empfiehlt sich die Navigationsleiste für das wechseln der Links zu nutzen. Dynamische Elemente Ihr habt heute bereits etwas über dynamische Elemente gelernt. Ein Produkt habt ihr eben bereits hinzugefügt, nun wollen wir, dass sich die Textfarbe im Hauptteil verändert wenn wir darauf klicken. - Aus dem Arbeitsblatt V3 könnt ihr den entsprechenden Code entnehmen - Fügt diesen in das „<td id="left">“ Tag ein - gebt bei „box“ „left“ an Speichert und schaut euch das Ergebnis an. Für weitere Dynamische Elemente nutzt die „Benutzer Tag“ Funktion. Diese Aufgaben dienen nur als Einstieg. Ihr könnt nun beliebig weiter an der Website basteln und sie nach euren Wünschen gestalten. 2 Schülerlabor Informatik Webshop & Co. V4 Codebausteine-Handout Erläuterung zu den Codebausteinen Auf den folgenden Seiten werden euch die verschiedenen Codebausteine, die ihr in eure Seite einbauen könnt, näher erklärt. Wenn ihr etwas nicht versteht wendet euch an einen der Betreuer. Von den Dateien, die zu den einzelnen Codebausteinen dazu gehören, ist für euch nur die „style.css“ wichtig. Mit den anderen Dateien solltet ihr erst einmal nicht herum experimentieren. Wenn ihr allerdings mit eurer Seite fertig seid und noch Zeit übrig habt, könnt ihr euch auch diese Dateien anschauen. Aber Vorsicht, sorgt bei diesen Dateien immer dafür, dass ihr eure Änderungen auch wieder Rückgängig machen könnt! 1 Schülerlabor Informatik Webshop & Co. V4 Codebausteine-Handout Die Lightbox Die Lightbox hebt ein Bild in den Vordergrund und vergrößert dieses.  <div id="lightbox"> <img id="highlightpic"> <a href="javascript:hidePic()">Schließen</a> </div> <div id="overlay"> </div>  Die Lightbox-Elemente geben den Rahmen der Darstellung an. Diese müssen in eurer HTML Seite eingebaut werden damit ihr die Lightbox nutzen könnt. In style.css wird über die id‘s definiert an welcher Stelle die Lightbox auftauchen soll. Es gibt zwei Möglichkeiten die Lightbox an einer gewünschten Stelle einzubauen. <a class="lightboxlink" href="javascript:highlightPic('IMAGE/PFAD')">Vergrößern </a> Zum einen direkt im HTML-Code. Hier müsst ihr den IMAGE-PFAD selber einsetzen. <?php echo("<a class='lightboxlink' href=\"javascript:highlightPic("echoProduktBildUrl($positi on)") \">Vergrößern</a>"); ?> Zum anderen als php-Code. Zugehörige Dateien: general.js, style.css Wie binde ich ein Produkt ein? echoProduktText($position); echoProduktPreis($position); echoProduktName($position); echoProduktBild($position); Mit diesen Codebausteinen könnt ihr die einzelnen Komponenten zu einem Produkt in eure Seite einbauen. Denkt daran, dass die Bausteine Methoden sind die in php-Code geschrieben wurden. Ihr braucht hier daher noch echo(„…“) und <?php… ?>. Zugehörige Dateien: functions.php 2 Schülerlabor Informatik Webshop & Co. V4 Codebausteine-Handout Weiterlaufende Uhranzeige Die Uhranzeige gibt die aktuelle Uhrzeit und das Datum wieder: 27 Nov - 23:03 <body onload="dynamicClock(); setInterval('dynamicClock()',1000)" > Die Uhr muss im body-tag aufgerufen werden. Danach wird die Uhr jede Sekunde(1000ms) aktualisiert. <div id="timebox"></div> Innerhalb dieses Div-Blocks wird die Uhr angezeigt. Ihr könnt ihn an jeder beliebigen Stelle einfügen. Zugehörige Dateien: general.js, style.css Textfarbe bei jedem Klick wechseln onmousedown="colorChange(‘box’)" Diesen HTML-Code müsst ihr in einen tag mit reinschreiben (z.B. in body, div, table…). Bei jedem Klick auf den Bereich dieses tags wird die Schirftfarbe innerhalb der ‘box‘ geändert. Anstelle von box könnt ihr von jedem Bereich, in dem ihr die Textfarbe ändern wollt, die ID einsetzen. Beispiel <body onmousedown ="colorChange(‘box’)"> Zugehörige Dateien: general.js 3 Der HTML-Code ist im body-tag mit integriert. Mit jedem Klick, egal wo auf der Seite, wird die Textfarbe innerhalb des box-Elements geändert. Schülerlabor Informatik Webshop & Co. V4 Codebausteine-Handout Anzeigen und Verstecken von Elementen function zeigeElement(element) { document.getElementById(element).style.display="block"; } function versteckeElement(element) { document.getElementById(element).style.display="none"; } <form id="form1" style="display:block” > Diese Funktionen zeigen und verstecken ein Element indem sie die Sichtbarkeit verändern. Bedenkt, dass das javascript ist und ihr noch <script type="text/javascript"> … </script> braucht. Die Blöcke, die ihr verstecken oder erscheinen lassen wollt müssen vordefiniert werden. Bei Seitenaufruf müssen sie also entweder versteckt (display:block) oder sichtbar (display:none) sein. <a href="javascript:versteckeElement('form1')">Verstecke </a> Der Aufruf einer der Funktionen könnte z.B. durch einen Link erfolgen. Zugehörige Dateien: - setTimeout Mit setTimeout könnt ihr eine Funtkion nach gewisser Zeit erst ausführen lassen. window.setTimeout('funktion()', 5000); Links könnt ihr sehen, dass innerhalb der Klammern zwei Werte stehen. Der erste steht für die Funktion, die ihr ausführen lassen wollt, und rechts steht nach wie vielen Millisekunden. <body onLoad="window.setTimeout('zeigeElement()', 6000)"> Zugehörige Dateien: - 4 Ihr könnt das zum Beispiel dazu benutzen um 6 Sekunden nach dem laden der Seite etwas, dass vorher versteckt war, erscheinen zu lassen. Schülerlabor Informatik Webshop & Co. V4 Codebausteine-Handout Ein Menü mit vielen Effekten <ul class="sf-menu"> <li> <a>Elektronik</a> <ul> <li> <a>Handys</a> <ul> <li><a href="">iphone 4</a> </li> <li><a href=""index.php?position=Samsung"">Samsung Galaxy</a> </li> </ul> </li> <li> <a href="test1.htm">TV&Video</a> </li> </ul> </li> </ul> Ihr seht hier eine ganz normale List in HTML. Doch durch den Zusatz class=“sf-menu“, ein paar css-Befehle und javascript-Funktionen wird es ein Menü mit vielen Effekten . Hier kommt auch nochmal „$position“ vor, was auch zum Einbinden eines Produktes verwendet wird. In diesem Fall wird $position allerdings nicht nur verwendet, sondern neu bestimmt. In dem Code oben erhält es den Namen Samsung (position = Samsung), dadurch würden jetzt bei einem Mouse-Klick auf dieses Elements des Menüs überall, wo ihr das Prdoukt einbindet, die Informationen des Samsung Galaxy erscheinen. Wie ihr also seht könnt ihr über das Menü dafür sorgen, dass $position geändert wird und somit auch das Produkt, das ausgegeben wird. Zugehörige Dateien: superfish.js, hoverintent.js, supersubs.js, jquery*.js, superfish.css Diashow oder sich wechselnde Werbung Die Diashow ermöglicht euch eine Reihe von Bildern nacheinander anzeigen zu lassen. Die Funktion benötigt drei Sachen: Die ID des Bildelements, eine Liste mit euren Bildern und zuletzt eine Zeit, nach der ein Bild gewechselt werden soll. diashow(id, url, verzögerung) <body onload ="diashow(img1,['images/erstesbild.jpg','images/zweitesbild.jpg'],2000)"> <img id="img1" src="images/beliebigesbild.jpg"> Die Funktion muss in den body-tag eingebaut werden. Die ID muss immer die ID eines imgElements sein. Die Liste fängt mit einer eckigen Klammer an und hört auch mit einer solchen auf. Innerhalb der Liste stehen die Pfade zu den Bildern. Die Zeit ist in Millisekunden, 2000 entspricht also 2Sekunden. Zugehörige Dateien: general.js 5 Schülerlabor Informatik Webshop & Co. V4 Codebausteine-Handout Andere Seite einbinden (include) <!— include für Webshop --> <?php if ($position == 'home') include("home.php"); else include("product.php"); ?> <!— include generell --> <?php if ($position != ' ') include($position.".php“); else include("home.php"); ?> <!— Link zu Position --> <a href=""index.php?position=Boot""> zum Boot</a> Durch den Befehl „include“ könnt ihr andere Seiten in eure Hauptseite einbinden. Das könntet ihr zum Beispiel dafür nutzen, um in dem Hauptteil eurer Seite, einen Willkommenstext anzeigen zu lassen und wenn man dann auf ein Produkt klickt, verschwindet dieser und die Informationen zum Produkt erscheinen. In dem Fall muss natürlich der Code, der das Produkt einbindet in die „product.php“. Im Menü ist $position erklärt, so könnt ihr z.B. mit dem angegebenen Link eine beliebige Seite einbinden. Zugehörige Dateien: - 6 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle css Grundbefehle Befehl Beschreibung Werte background Hintergrund background-color background-image background-repeat backgroundattachment background-position backgroundattachment Hintergrundgrafik feststellen oder scroll rollbar machen fixed background-color Hintergrundfarbe color-rgb color-hex color-name transparent backgroundimage Hintergrundbild url none backgroundposition Position eines Hintergrundbildes top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos backgroundrepeat Wiederholung eines Hintergrundbildes repeat repeat-x repeat-y no-repeat Rahmen Befehl Beschreibung Wert border Rahmen border-width border-style 1 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle border-color border-bottom Rahmen unten border-bottom-width border-style border-color border-bottom-color Rahmenfarbe unten border-color border-bottom-style Art des Rahmens border-style border-bottom-width Rahmenbreite unten thin medium thick länge border-color Rahmenfarbe color border-left Rahmen links border-left-width border-style border-color border-left-color Rahmenfarbe links border-color border-left-style Rahmenart links border-style border-left-width Rahmenbreite links thin medium thick length border-right Rahmen rechts border-right-width border-style border-color border-right-color Rahmenfarbe rechts border-color border-right-style Rahmenart rechts border-style border-right-width Rahmenbreite rechts thin medium thick länge border-style Rahmenart none hidden dotted dashed solid double groove ridge inset outset 2 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle border-top Rahmen oben border-top-width border-style border-color border-top-color Rahmenfarbe oben border-color border-top-style Rahmenart oben border-style border-top-width Rahmenbreite oben thin medium thick länge border-width Rahmenbreite thin medium thick länge Klassifizierung Befehl Beschreibung clear Wert left right both none cursor Mauszeiger url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help display Anzeige none inline block 3 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption float Position gegen ein anderes Element left right none position Art der Positionierung static relative absolute fixed visibility Sichtbarkeit visible hidden collapse Abmessungen Befehl Beschreibung Wert height Höhe auto länge % line-height Zeilenabstand normal länge % max-height Maximun Höhe none länge % max-width Maximun Breite none länge % min-height Minimum Höhe länge 4 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle % min-width Minimum Breite länge % width Breite auto % länge Schrift Befehl Beschreibung Wert font Schrift font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar font-family Schriftart family font-size Schriftgröße xx-small x-small small medium large x-large xx-large smaller larger länge % font-size-adjust font-stretch none zahl Schriftbreite normal wider narrower ultra-condensed extra-condensed condensed 5 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle semi-condensed semi-expanded expanded extra-expanded ultra-expanded font-style Schriftstil normal italic oblique font-variant Buchstabenart normal small-caps font-weight Schriftdicke normal bold bolder lighter 100 200 300 400 500 600 700 800 900 Listen Befehl Beschreibung Wert list-style Listenart list-style-type list-style-position list-style-image list-style-image Bild als Listenzeichen none url list-style-position Position des Listenzeichens inside outside list-style-type Listentyp none disc circle square decimal decimal-leading-zero lower-roman 6 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha marker-offset auto länge Abstand Befehl Beschreibung Wert margin Abstand margin-top margin-right margin-bottom margin-left margin-bottom Abstand nach unten auto länge % margin-left Abstand nach links auto länge % margin-right Abstand nach rechts auto länge % margin-top Abstand nach oben auto länge % Outlines Befehl Beschreibung Wert 7 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle outline outline outline-color outline-style outline-width outline-color Outlinefarbe color invert outline-style Outlineart none dotted dashed solid double groove ridge inset outset outline-width Outlinedicke thin medium thick length Randabstände Befehl Beschreibung Wert padding Randabstand padding-top padding-right padding-bottom padding-left padding-bottom Abstand nach unten länge % padding-left Abstand nach links länge % padding-right Abstand nach rechts länge % padding-top Abstand nach oben länge % Positionierung Befehl Beschreibung Wert bottom Abstand nach unten auto 8 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle % länge clip Ausschnitt shape auto left Abstand nach links auto % länge overflow oberflow visible hidden scroll auto right Abstand nach rechts auto % länge top Abstand nach oben auto % länge vertical-align Vertikale Ausrichtung baseline sub super top text-top middle bottom text-bottom länge % z-index Stapelreihenfolge auto zahl Tabellen Befehl Beschreibung Wert border-collapse Rahmenmodell collapse separate border-spacing Rahmenabstand länge caption-side Position der Überschrift top bottom left right 9 Schülerlabor Informatik Webshop und Co. V5 Css-Grundbefehle empty-cells Behandlung von leeren Zellen show hide table-layout Tabellenstruktur auto fixed Inhalte und Zähler Befehl Beschreibung before Inhalt einfügen after Inhalt einfügen content Inhalt einfügen counter Zähler counter-increment Zähler counter-reset Zähler 10 Wert URL Schülerlabor Informatik Webshop und Co. V6 HTML-Grundbefehle HTML Grundbefehle Standart Bezeichnung HTML Tag Anmerkung Haupt Tags, die jedes Dokument beinhalten muss Dokument Typ <HTML></HTML> Anfang und Ende der Datei Titel <TITLE></TITLE> muss im Header stehen Kopf der Datei <HEAD></HEAD> Allgemeine Infos zum Dokument Körper der Datei <BODY></BODY> Der Rest der Datei Strukturelle Definitionen (kontrolliert durch die Browser Einstellungen) Überschrift Statt ? Zahlen von 1-6 <H?></H?> Ausrichtung <H? ALIGN=LEFT|CENTER|RIGHT></H?> der Überschriften Division <DIV></DIV> Ausrichtung einer Division <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> Block Quote <BLOCKQUOTE></BLOCKQUOTE> Betonung <EM></EM> Normalerweise kursiv Starke Betonung <STRONG></STRONG> Normalerweise fett Zitat <CITE></CITE> Normalerweise kursiv Quellcode <CODE></CODE> Einfache Ausgabe <SAMP></SAMP> Tastatur Eingabe <KBD></KBD> Variable <VAR></VAR> Definition <DFN></DFN> Selten verwendet Adresse des <ADDRESS></ADDRESS> Autors 1 Schülerlabor Informatik Webshop und Co. V6 HTML-Grundbefehle Grosse Schrift <BIG></BIG> Kleine Schrift <SMALL></SMALL> Formate, die der Autor bestimmen kann Fett <B></B> Kursiv <I></I> Unterstrichen <U></U> Selten benutzt Durchgestrichen <S></S> Selten benutzt Unterscript <SUB></SUB> Superscript <SUP></SUP> Schreibmaschine <TT></TT> Vorformatiert <PRE></PRE> Breite <PRE WIDTH=?></PRE> ? in Pixel oder Prozent Zentriert <CENTER></CENTER> Für Text und Bilder Blinkend <BLINK></BLINK> Schriftgrösse <FONT SIZE=?></FONT> ? von 1-7 Schriftgrössenänderung <FONT SIZE=+|-?></FONT> Standard Schriftgrösse <BASEFONT SIZE=?> ? von 1-7 ; Standard ist 3 <FONT COLOR="#$$$$$$"></FONT> Schriftfarbe Links und Grafiken Link zu einer Datei Link zu einem Ziel Ziel Fenster <A HREF="URL"></A> <A HREF="URL#***"></A> falls Ziel in einem anderen Dokument ist <A HREF="#***"></A> Im gerade geöffneten Dokument <A HREF="URL" TARGET="***"></A> Ziel Definieren <A NAME="***"></A> Grafik anzeigen <IMG SRC="URL"> Ausrichtung <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE> Ausrichtung <IMG SRC="URL" ALIGN=LEFT|RIGHT|TEXTTOP| ABSMIDDLE|BASELINE|ABSBOTTOM> 2 Schülerlabor Informatik Webshop und Co. V6 HTML-Grundbefehle Alternative Bezeichnung <IMG SRC="URL" ALT="***"> Wenn kein Bild angezeigt wird Imagemap <IMG SRC="URL" ISMAP> Benötigt ein Script Imagemap <IMG SRC="URL" USEMAP="URL"> Map <MAP NAME="***"></MAP> Beschreibt das Map Sektion <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF> Dimensionen <IMG SRC="URL" WIDTH="?" HEIGHT="?"> in Pixel Rahmen <IMG SRC="URL" BORDER=?> in Pixel Platz rund um <IMG SRC="URL" HSPACE=? die Grafik VSPACE=?> Low-Res Proxy <IMG SRC="URL" LOWSRC="URL"> Client Pull <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL"> Eingebettetes <EMBED SRC="URL"> Objekt Objekt Grösse in Pixel fügt ein Objekt in die Seite ein <EMBED SRC="URL" WIDTH="?" HEIGHT="?"> Zeilen- und Abschnittsteiler ; Zeilenumbruch erzwingen Paragraph <P> Normalerweise als doppelt Teiler Paragraph <P></P> Neu definiert als Container Tag Text Ausrichtung <P ALIGN=LEFT|CENTER|RIGHT></P> Einfacher Zeilenumbruch Zeilenumbruch <BR> Textwrap löschen <BR CLEAR=LEFT|RIGHT|ALL> Horizontaler Teiler <HR> Ausrichtung <HR ALIGN=LEFT|RIGHT|CENTER> Dicke <HR SIZE=?> in Pixel Breite <HR WIDTH=?> In Pixel Breite in Prozent <HR WIDTH=%> als % Angabe auf Fenster bezogen Solide Linie <HR NOSHADE> Ohne den 3D look Ohne <NOBR></NOBR> 3 Schülerlabor Informatik Webshop und Co. V6 HTML-Grundbefehle Zeilenumbruch Zeilenumbruch <WBR> wenn nötig Listen und Aufzählungen Nichtgeordnete <UL><LI></UL> Liste Bullet Typ <UL TYPE=DISC|CIRCLE|SQUARE> <LI TYPE=DISC|CIRCLE|SQUARE> Geordnete Liste <OL><LI></OL> Nummer Typ Start Nummer <LI> vor jedem Unterpunkt für die ganze Liste) für dieses Segment <LI> vor jedem Unterpunkt <OL TYPE=A|a|I|i|1> für die ganze Liste <LI TYPE=A|a|I|i|1> in diesem Untersegment <OL VALUE=?> für die ganze Liste <LI VALUE=?> Dieses Untersegment Definierte Liste <DL><DT><DD></DL> <DT>=term, <DD>=defination Menu Liste <MENU><LI></MENU> <LI> vor jedem Unterpunkt Verzeichnis Liste <DIR><LI></DIR> <LI> vor jedem Unterpunkt Hintergrundbilder und -farben Hintergrundbild <BODY BACKGROUND="URL"> Hintergrundfarbe <BODY BGCOLOR="#$$$$$$"> Text Farbe <BODY TEXT="#$$$$$$"> Link Farbe <BODY LINK="#$$$$$$"> Besuchter Link <BODY VLINK="#$$$$$$"> Aktiver Link <BODY ALINK="#$$$$$$"> HTML-Befehle für Formulare Formular definieren <FORM ACTION="URL" METHOD=GET|POST></FORM> Datei Upload <FORM ENCTYPE="multipart/formdata></FORM> Eingabe Feld <INPUT TYPE="TEXT|PASSWORD|CHECKBOX| RADIO|IMAGE|HIDDEN|SUBMIT|RESET"> Feld Name <INPUT NAME="***"> Feld Wert <INPUT VALUE="***"> Checked? <INPUT CHECKED> Checkbox und Radiobox Feld Größe <INPUT SIZE=?> In Pixel 4 Schülerlabor Informatik Webshop und Co. V6 HTML-Grundbefehle Max Länge <INPUT MAXLENGTH=?> Auswahlliste <SELECT></SELECT> Name der Liste <SELECT NAME="***"></SELECT> Anzahl der Optionen <SELECT SIZE=?></SELECT> Auswahlfeld In Pixel mehr als eine Auswahl ist möglich <SELECT MULTIPLE> Punkte, die selektiert werden können Optionen <OPTION> Standard Option <OPTION SELECTED> Eingabe Box Größe <TEXTAREA ROWS=? COLS=?></TEXTAREA> Name der Box <TEXTAREA NAME="***"></TEXTAREA> Zusammenhängender <TEXTAREA Text WRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA> HTML-Befehle für Tabellen Tabelle definieren <TABLE></TABLE> Rahmen <TABLE BORDER></TABLE> an oder aus Rahmen <TABLE BORDER=?></TABLE> mit ? 1-12 Cell Spacing <TABLE CELLSPACING=?> Cell Padding <TABLE CELLPADDING=?> Bestimmte Breite <TABLE WIDTH=?> in Pixel Breite in Prozent <TABLE WIDTH=%> Prozent der Seite Tabellen Zeile <TR></TR> Ausrichtung <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> Tabellen Zellel <TD></TD> Ausrichtung <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> Kein Zeilenumbruch <TD NOWRAP> Nur innerhalb von Tabellenzeilen Spaltenübergereifend <TD COLSPAN=?> Zeilenübergreifend <TD ROWSPAN=?> 5 Schülerlabor Informatik Webshop und Co. V6 HTML-Grundbefehle Bestimmt Grösse <TD WIDTH=?> in Pixel Breite in Prozent <TD WIDTH=%> Prozent der Seite Tabellen Überschrift <TH></TH> Ausrichtung <TH ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> Kein Umruch <TH NOWRAP> Spaltenübergreifend <TH COLSPAN=?> Zeilenübergreifend <TH ROWSPAN=?> Bestimmte Grösse <TH WIDTH=?> in Pixel Grösse in Prozent <TH WIDTH=%> Auf Tabelle bezogen Tabellen Name <CAPTION></CAPTION> Ausrichtung <CAPTION ALIGN=TOP|BOTTOM> Über oder unter der Tabelle HTML-Befehle für Frames Frame Dokument <FRAMESET></FRAMESET> Anstatt Body Zeilen Höhen <FRAMESET ROWS=,,,></FRAMESET> Pixel oder % Zeilen Höhen <FRAMESET ROWS=*></FRAMESET> * = relative Grösse Spalten Breite <FRAMESET COLS=,,,></FRAMESET> Pixel oder % Spalten Breite <FRAMESET COLS=*></FRAMESET> * = ralative Grösse Frame Definieren <FRAME> Dokument anzeigen <FRAME SRC="URL"> Frame Name <FRAME NAME="***"|_blank|_self|_parent|_top> Abstand Breite <FRAME MARGINWIDTH=?> linke und rechte Abstände Abstand Höhe <FRAME MARGINHEIGHT=?> Ober und Unterabstand Scrollbar? <FRAME SCROLLING="YES|NO|AUTO"> Nicht <FRAME NORESIZE> vergrösserbar Für Browser <NOFRAMES></NOFRAMES> ohne Frames 6 ANHANG TEIL 3: MATERIALIEN UND LÖSUNGEN Magnetpuzzleteile In ein Magnetset gehören folgende Puzzleteile: - Allgemeine Teile (38) o 1x < img src= A o 2x align="Left" C o 4x > 2 o 4x < div style=“ E o je 2x font-size:xx-large; font-size:x-large; F o 2x M text-align:right; G o je 2x color:red; color:blue; H o je 2x N margin-right:20px; margin-top:20px; margin-left:20px; I o 2x margin-top:100px; P o 1x margin-top:220px; S o 4x "> 1 o 4x </div> L J T - Die 3 Produkte mit je vier Teilen o iPhone 499€ Das iPhone ist zwar nett, aber total überteuert. "images/iphone.jpg" O o K R B Kochbuch des Todes 14€ Das Kochbuch des Todes mit vielen tollen Gerichten. V U W "images/kochbuchdestodes.jpg" Q o Samsung Galaxy 380€ Das Galaxy ist mehr als nur ein Smartphone. Y X "images/samsunggalaxy.jpg" 3 Z Schülerlabor Informatik Webshop und Co. Merkblatt Webtechnologien Merkblatt - Webtechnologien  In diesem Modul beschäftigen wir uns mit Webtechnologien.  Das Client-Server Prinzip ist das grundlegende Modell in unserem Modul. Es dient beispielsweise zum besseren Verständnis einer Produktanfrage. Eine erfolgreiche Produktbestellung läuft wie folgt ab:  Der Webbrowser ist eine Software, um Webseiten des World Wide Web und allgemein Dokumente und Daten darzustellen.  Neben HTML Dokumenten kann der Browser untere anderem auch Bilder oder pdf -Dateien visualisieren.  Der Browser befindet sich im Client-Server Modell auf der Clientseite.  Vom Browser werden http Anfragen gesendet.  Damit nun der Inhalt einer bestimmten Internetseite, definiert durch ihre Webadresse im Browser dargestellt werden kann, kommuniziert dieser mit dem Server.  Beim Server unterscheidet man zwischen Hardware und Software.  Aus Hardwaresicht ist ein Server ein Computer, auf dem ein oder mehrere Server (Software) laufen.  Ein Server aus Softwaresicht ist ein Programm, das einen Dienst (Service) anbietet.  Im Rahmen des Client-Server-Modells kann ein anderes Programm, der Client, diesen Dienst nutzen.  Der Server ist in Bereitschaft, um jederzeit auf die Kontaktaufnahme eines Clients reagieren zu können.  Die Regeln für die Kommunikation (z.B. Format) nennt man Protokolle und sind eindeutig festgelegt. 1 Schülerlabor Informatik Webshop und Co. Merkblatt Webtechnologien  Es können mehrere verschiedene Server-Programme auf einem Rechner laufen.  Die Datenbank dient zur geordneten Speicherung von Daten und liegt auf dem Server.  Die Verarbeitung von Daten erfolgt in der Regel mit Hilfe von SQL.  Um die vom Client geforderten Daten aus der Datenbank auszulesen, wird eine SQL Anfrage gestellt.  Mit Hilfe des HTML Builders werden die Informationen zusammengesetzt und dann vom Server zurück zum Client geschickt, der die gewünschte Internetseite bzw. das Produkt im Browser angezeigt bekommt. Fazit: Der Client sendet eine Anfrage an den Server. Dieser startet eine SQL Anfrage an die Datenbank, um die vom Client geforderten Daten aus der Datenbank zu holen. Mittels des HTML Builders werden die Codeschnipsel zusammengepuzzelt und vom Server wieder an den Client gesendet. 2 Lösungen für die Browseranwendung Im Browsergame müssen auf zwei Seiten Lösungen eingegeben werden. Zum Einen bei der Datenbank die SQL-Anfrage: select * from products where price='14' select * from products where name='kochbuch des todes' (Der Name ist je nach Produkt anders. 'samsung galaxy', 'iphone') Zum Anderen bei der Überprüfung der zusammen gesetzten Seite beim HTML-Builder: iPhone: A*B*C*2*E*F*G*H*I*J*1*K*L*E*M*N*G*P*I*1*O*L*E*S*T*1*R*L* KochbuchDesTodes : A*Q*C*2*E*F*G*H*I*J*1*U*L*E*M*N*G*P*I*1*O*L*E*S*T*1*W*L* Samsung Galaxy: A*3*C*2*E*F*G*H*I*J*1*X*L*E*M*N*G*P*I*1*Y*L*E*S*T*1*Z*L* Lösungen für das Puzzle iPhone: < img src= "images/iphone.jpg" align="Left" A B C > 2 < div style=“ font-size:xx-large; text-align:right; color:red; margin-right:20px; margin-top:20px; E F 499€ </div> K L G H I J < div style=“ font-size:x-large; color:blue; text-align:right; margin-top:100px; margin-right:20px; E M iPhone </div> O L N G < div style=“ margin-top:220px; margin-left:20px; E S T P "> 1 Das iPhone ist zwar nett, aber total überteuert. </div> R L Lösungswort: A*B*C*2*E*F*G*H*I*J*1*K*L*E*M*N*G*P*I*1*O*L*E*S*T*1*R*L* I "> 1 "> 1 Kochbuch des Todes: < div style=“ font-size:x-large; color:blue; text-align:right; margin-top:100px; margin-right:20px; " > E M Kochbuch des Todes N </div> V L G P I 1 < div style=“ font-size:xx-large; text-align:right; color:red; margin-right:20px; margin-top:20px; " > E F 14€ </div> U L G H < img src= "images/kochbuchdestodes.jpg" align="Left" A Q C I > 2 < div style=“ margin-top:220px; margin-left:20px; " > E S T 1 Das Kochbuch des Todes mit vielen tollen Gerichten. </div> W L Lösungswort: A*Q*C*2*E*F*G*H*I*J*1*U*L*E*M*N*G*P*I*1*O*L*E*S*T*1*W*L* J 1 Samsung Galaxy: < div style=“ font-size:x-large; color:blue; text-align:right; margin-top:100px; margin-right:20px; " > E M N Samsung Galaxy </div> Y L G P I 1 < div style=“ font-size:xx-large; text-align:right; color:red; margin-right:20px; margin-top:20px; " > E F 380€ </div> X L G H I < img src= "images/samsunggalaxy.jpg" align="Left" > A 3 C 2 < div style=“ margin-top:220px; margin-left:20px; " > E S T 1 Das Galaxy ist mehr als nur ein Smartphone. </div> Z L Lösungswort: A*3*C*2*E*F*G*H*I*J*1*X*L*E*M*N*G*P*I*1*Y*L*E*S*T*1*Z*L* J 1