Entscheidungshilfe Unterrichtsgegenstand mit Python + HTML

Django, Flask, Bottle, WSGI, CGI…
EmaNymton
User
Beiträge: 174
Registriert: Sonntag 30. Mai 2010, 14:07

Hallo zusammen,
ich unterrichte momentan eine 9.Klasse in Differenzierungsbereich, in der die Schüler sich im Moment mit HTML-Grundlagen befassen. Da ich für den weiteren Verlauf des Schuljahres relativ frei bin, was die Wahl der Inhalte angeht und die Schüler bereits in der Klasse 8 Grundlagen in Python erworben haben, wollte ich nach den Grundlagen in HTML einfach HTML und Python kombinieren. Ich stehe jetzt vor dem Problem, dass ich interessante Ansätze für die Schüler schaffen möchte, jedoch sie auch nicht überfordern will. Ich habe mehrer Ansätze im Kopf und die letzten Tage ein wenig gesucht, jedoch nicht ausreichend Zeit jede Richtung so weit zu erforschen (bin hier teilweise ja selbst noch Anfänger auf dem Gebiet), dass ich ein sinnvolle Entscheidung treffen könnte.
Nun wollte ich eure Einschätzung hören bzw. gibt es ja vielleicht noch etwas, was ich gar nicht gedacht habe.

Hier mal meine bisherigen Ideen:
  • Websiten mit python parsen und die Informationen weiterverarbeiten.
  • cgi-Programmierung auf lokalem Web-Server mit Eingaben über HTML Forms
  • Webframe-Works a la bottle
Im Moment habe ich vor ein Skript für die Schüler zu erstellen, das sie durcharbeiten, es sei denn, es gibt irgendwo deutschsprachige Tutorials im Netz, die für Schüler geeignet sind. Über das Gelernte wird auch eine Arbeit geschrieben, so dass ich schon Voraussetzungen vorgeben muss und nicht die Schüler einfach mal machen lassen kann.
Die Schüler haben grundlegende Kenntnisse in Python (Datentypen, Kontrollstrukturen, keine Objektorientierung!) und in HTML (aufbauend auf dem HTML-Kurs: http://www.ralf-arndt.de/htmlkurs.html)

Ich würde mich freuen, wenn der ein oder andere hier sein Meinung schreiben würde.

Gruß EmaNymton
BlackJack

@EmaNymton: Webseiten parsen sollte kein Problem sein. Mit `lxml.html` oder `BeautifulSoup`. Bei `lxml.html` könnte man sich CSS-Selektoren anschauen — da hat man ja auch bei HTML und JavaScript etwas von.

Bei Webframeworks/CGI ist IMHO das Problem, dass die interessanten Sachen, die man nicht auch ohne Python hinbekäme Persistenz brauchen, also eine Datenbank. Da könnte man dann so etwas wie Redis oder CouchDB verwenden wenn man den Schülern nicht auch noch relationale Datenbanken antun möchte.
Benutzeravatar
noisefloor
User
Beiträge: 4180
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

Hallo,

was ein mögliches Projekt wäre, wäre ein To-Do Liste für Hausaufgaben. Und das ganzen dann Server-Client basiert. bzw. der Client wäre der Browser.

Oder einen simplen Twitter-Clone erstellen (lassen)

Aber, wie BlackJack schon sagt: man kommst da relativ schnell an den Punkt, wo man ein DB - welcher Form auch immer - einsetzen muss. Und ist u.U. der größere Teil des Codes für die Kommunikation mit der DB bestimmt und nur wenig für's Web. Gerade wenn man auf ein Framework wie Bottle, Flask u.ä. setzt.

Gruß, noiseflor
EmaNymton
User
Beiträge: 174
Registriert: Sonntag 30. Mai 2010, 14:07

Danke für die Einschätzung, ich werde mich dann erstmal aufs parsen beschränken und ggf. für stärkere Schüler so etwas wie ein To-Do-Liste im Auge behalten. Es würde ja auch erstmal reichen, die leere DB von mir vorzugeben sowie die Methoden um in die DB zu schreiben, Einträge zu löschen und ggf. simple Abfragen zu ermöglichen. Ich schlaf da noch mal ne Nacht drüber :D

Vielen Dank jedenfalls, sehe jetzt schon ein wenig klarer!
Benutzeravatar
noisefloor
User
Beiträge: 4180
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

Hallo,

was ohne Datenbank funktioniert wäre ein Web-basierter Taschenrechner. Nicht gerade eine "Killer-App", hat aber im Prinzip alles, was wichtig ist:
  • HTML Eingabeformular (z.B. zwei Text-Felder für die Zahlen und eine Auswahlliste für die Rechenoperation)
  • die Daten per POST-Request an den Server schicken
  • serverseitige Validierung der Eingabe (Zahl ja / nein?)
  • Berechnung ausführen
  • Ergebnis an den Browser schicken
Gruß, noisefloor
BlackJack

@noisefloor: So etwas könnte man natürlich machen, aber ich finde Sachen die man viel einfacher mit JavaScript auf Browserseite lösen könnte, irgendwie nicht wirklich motivierend um Python-Webanwendungen zu schreiben. Das ist irgendwie so sinnlos.
Sirius3
User
Beiträge: 18255
Registriert: Sonntag 21. Oktober 2012, 17:20

Ich hab jetzt endlich die Zeit gefunden
EmaNymton hat geschrieben:(aufbauend auf dem HTML-Kurs: http://www.ralf-arndt.de/htmlkurs.html)
anzufangen zu lesen. Ich bin nicht über die zweite Seite hinausgekommen.
Es gibt doch noch einen Unterschied zwischen kompetent, anschaulich und für Schüler verständlich
und fehlerhaft, falschen Vergleichen und irreführenden Informationen.

Zum Thema:
ich halte es für wichtig, das zum Schluß die Schüler ein Erfolgserlebnis haben, etwas eigenes geschaffen zu haben. Das geht mit einem Webserver auf bottle-Basis schon mit 5 Zeilen Code. Und es gibt genug kleine dynamische Webinhalte, die auch ohne große Datenbanken auskommen.
- Chat
- Photoalbum
- Hangman / Tictactoe
Benutzeravatar
noisefloor
User
Beiträge: 4180
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

Hallo,
BlackJack hat geschrieben:@noisefloor: So etwas könnte man natürlich machen, aber ich finde Sachen die man viel einfacher mit JavaScript auf Browserseite lösen könnte, irgendwie nicht wirklich motivierend um Python-Webanwendungen zu schreiben. Das ist irgendwie so sinnlos.
Ja, es ist kein Killer-App. Aber das Prinzip der Applikation lässt sich ja auch ohne weitere auf "große" Sachen übertragen.

Gruß, noisefloor
EmaNymton
User
Beiträge: 174
Registriert: Sonntag 30. Mai 2010, 14:07

Ich hatte gerade etwas Zeit die ersten Gehversuche mit lxml und cssselect zu unternehmen. Ich habe mir dazu einfach mal die mobile Seite von bundesliga.de genommen und wollte die Ergebnisse ausgeben. Mir ist dabei vor allem wichtig, was ich den Schülern als Grundlagen vorher noch beibringen muss, damit sie nicht überfordert sind und sich ggf. auch eigene ausgewählte Seiten "vornehmen" können.

Folgende Zwei Ansätze führen jeweils zum Ziel:

Beispiel 1:

Code: Alles auswählen

from lxml.html import parse
import urllib
http = urllib.urlopen("http://mobil.bundesliga.de/de/bl/plan/2012_22/")
root = parse(http).getroot()
matches = [div.text_content().replace('\n','') for div in root.cssselect('div.match')]
for match in matches:
    print match.strip().replace('  ',' ')
Beispiel 2

Code: Alles auswählen

from lxml.html import parse
from urllib import urlopen
http = urlopen("http://mobil.bundesliga.de/de/bl/plan/2012_22/")
root = parse(http).getroot()
heim = [div.text_content() for div in root.cssselect('div.pic25left')]
gast = [div.text_content() for div in root.cssselect('div.pic25right')]
score = [div.text_content() for div in root.cssselect('div.score')]
for match in zip(heim,score,gast):
    print ' '.join(match)
Bei Beispiel 1 parse ich mir ja quasi von jedem Spiel alle Daten, die ich dann weiterverarbeite, bei Beispiel 2 parse ich mir erst die Daten, die ich dann nachher mit zip zusammenfüge. Welche Version
ist denn besser oder kann man das so pauschal gar nicht sagen?

Auf jeden Fall sollte ich mit den Schülern das Arbeiten mit Listen und das Bearbeiten von Strings behandeln, hab ich noch was vergessen?
BlackJack

@EmaNymton: Ich würde die erste Variante bevorzugen und die Daten, die zusammengehören auch als eine Einheit parsen. Beziehungsweise könnte man dort vielleicht in einem weiteren Schritt das <div> auseinandernehmen und die einzelnen Bestandteile parsen.

In beiden Fällen solltest Du `urllopen()` weglassen können und `parse()` gleich die URL als Argument geben. Hat unter anderem den Vorteil, dass der Parser auch die HTTP-Header sieht. Da können Beispielsweise Informationen über die Kodierung der Daten enthalten sein, die der Parser auswerten kann. Ich weiss nicht, ob er das bei dem Objekt was `urlopen()` liefert, auch macht.
Sirius3
User
Beiträge: 18255
Registriert: Sonntag 21. Oktober 2012, 17:20

@EmaNymton: Weder noch. Die erste Variante benutzt String-Operationen um Spalten zu formatieren, die eigentlich getrennt gehören. Die zweite Variante nimmt implizit an, dass immer ein .pic25left, .pic25right und .score zusammengehören. Es ist eine Kombination aus beidem nötig. Erstens die div.match filtern um darauf ein cssselect nach pic25left, pic25right und score zu machen, mit entsprechender Fehlerabfrage, falls eines der Elemente fehlt.
BlackJack

Allerdings ohne explizite Fehlerbehandlung:

Code: Alles auswählen

#!/usr/bin/env python
# -*- coding: utf-8 -*-
from pprint import pprint
from lxml import html

URL_TEMPLATE = 'http://mobil.bundesliga.de/de/bl/plan/{year}_{matchday}/'


def iter_matches(year, matchday):
    root = (
        html.parse(URL_TEMPLATE.format(year=year, matchday=matchday)).getroot()
    )
    for match_node in root.cssselect('div.match'):
        names = [
            match_node.cssselect(c)[0].text_content().strip()
            for c in ['div.pic25left', 'div.pic25right']
        ]
        score = map(int, match_node.cssselect('div.score')[0].text.split(':'))
        yield tuple(map(tuple, [names, score]))


def main():
    pprint(list(iter_matches(2012, 22)))


if __name__ == '__main__':
    main()
EmaNymton
User
Beiträge: 174
Registriert: Sonntag 30. Mai 2010, 14:07

Danke BlackJack, deine Lösung ist natürlich aus Programmierersicht sicherlich die elegantere und auch allgemein verwendbare. Ich versuche aber irgendwie den Spagat hinzubekommen, dass ich die Schüler nicht überfordern möchte und auf so wenige/einfache Methoden wie möglich zurückgreifen will und spätestens bei

Code: Alles auswählen

yield tuple(map(tuple, [names, score]))
habe ich 95% der Klasse abgehängt.

Das mit urllib hatte ich noch drin, da wir in der Schule über einen Proxy mit Authentifizierung ins Netz gehen und ich hatte irgendwie im Hinterkopf, dass das wohl damit geht. In der Doku habe ich aber gefunden, dass das mit Authentifizierung nicht möglich ist, also wird es wohl darauf hinauslaufen, dass sich die Schüler die Dateien mit dem Browser herunterladen und dann die Datei einlesen.

Trotzdem danke für die Unterstützung, schön zu wissen, dass man hier kompetente Leute um Rat fragen kann!
BlackJack

@EmaNymton: Schau Dir mal das `requests`-Modul an. Damit sollte auch Authentifizierung gehen und die API ist schöner als `urllib`/`urllib2`. Damit kann man Beispielsweise auch *einfach* Seiten abfragen bei denen die Anfragevariablen nicht in der URL kodiert sind, sondern als Query- oder per POST an den Server übermittelt werden.
EmaNymton
User
Beiträge: 174
Registriert: Sonntag 30. Mai 2010, 14:07

Cool, danke, kannte ich noch gar nicht!

"Requests: HTTP for Humans" Harhar ;)
Leonidas
Python-Forum Veteran
Beiträge: 16025
Registriert: Freitag 20. Juni 2003, 16:30
Kontaktdaten:

Sirius3 hat geschrieben:Ich hab jetzt endlich die Zeit gefunden
EmaNymton hat geschrieben:(aufbauend auf dem HTML-Kurs: http://www.ralf-arndt.de/htmlkurs.html)
anzufangen zu lesen. Ich bin nicht über die zweite Seite hinausgekommen.
Es gibt doch noch einen Unterschied zwischen kompetent, anschaulich und für Schüler verständlich
und fehlerhaft, falschen Vergleichen und irreführenden Informationen.
Geht mir genauso, das ist eine grosse Sammlung von Stuss und Halbwahrheiten, schlechten Praktiken und sonstiger Planlosigkeit. Vielleicht sollte der Autor sich ja beim Galileo-Verlag bewerben.
My god, it's full of CARs! | Leonidasvoice vs (former) Modvoice
EmaNymton
User
Beiträge: 174
Registriert: Sonntag 30. Mai 2010, 14:07

Da jetzt schon eine zweite Bemerkung dieser Art kommt, würde ich mich freuen, wenn ihr mal konkreter werden könntet. Beachtet bitte, dass die Zielgruppe Kinder/Jugendliche sind und nicht wie die Bücher aus dem Galileo-Verlag für Erwachsene konzipiert sind.

Aus meiner Erfahrung kann ich nur sagen, dass die Schüler mit diesem Kurs sehr gut zurecht kommen und selbstständig eigene Ideen ausprobieren können, was für mich erstmal positiv ist. Auch dass ein Kollege hier Material kostenlos zur Verfügung stellt ist für mich lobenswert.

Vielleicht könnt ihr ihn auch mal anschreiben und ihm Vorschläge zur Verbesserung machen.

Ich will das jetzt hier gar nicht verteidigen oder als Flame ausarten lassen, jedoch finde ich solche Posts a la
das ist eine grosse Sammlung von Stuss und Halbwahrheiten, schlechten Praktiken und sonstiger Planlosigkeit.
nicht produktiv.
Sirius3
User
Beiträge: 18255
Registriert: Sonntag 21. Oktober 2012, 17:20

@EmaNymton:
http://www.ralf-arndt.de/html/html/grundlagen2.html hat geschrieben: Ein solcher Server ist nicht viel mehr als die Festplatte eines normalen Computers
das erzeugt doch ein ganz falsches Bild eines Servers. Wenn man die Funktionsweise eines Servers für zu kompliziert für Schüler hält, dann lieber sowas wie, „Der Browser stellt eine Anfrage und der Server antwortet.“
http://www.ralf-arndt.de/html/html/grundlagen2.html hat geschrieben: Sie [HTML] definiert, wie die Inhalte einer Seite dargestellt werden sollen.
Und gerade dieses „wie“ wird von HTML eben nicht festgelegt, sondern ist in CSS ausgelagert, bzw. wenn man die Ursprünge anschaut, sollte nur der Browser, der ja das Endgerät kennt, die optimale Darstellung selbst festlegen.

Das war nur der Anfang der ersten Seite. Weiter hinten wird es auch nicht besser.
BlackJack

Ich habe mal quergelesen:

Netter Unsinn gleich am Anfang: „Wenn du im Internet publizierst, dann müssen alle Dateinamen kleingeschrieben werden - gewöhne dir das am besten gleich an!”

(Normale) Frames sollten in einem HTML-Kurs heute nicht mehr vorkommen.

Die Informationen über Sonderzeichen sind falsch. HTML-Quelltext ist kein reiner ASCII-Text. Das kann man so machen wenn man will, also alles was man in anderen Kodierungen direkt schreiben kann, auch in reinem ASCII kodiert ausdrücken, aber man muss nicht. Die angenommene Kodierung von HTML-Dokumenten ist ISO 8859-1, das heisst in der Kodierung kann man durchaus Umlaute und andere im Deutschen übliche Zeichen direkt in das Dokument schreiben. Ausserdem kann man durch Metaangaben im <head> oder vom Webserver durch HTTP-Header auch beliebige andere Kodierungen angeben, die vom Browser dann verwendet werden.

Interessanterweise werden die HTML-Entities beispielsweise für Umlaute nach der Information das man die verwenden *muss*, im weiteren Verlauf des Kurses überhaupt nicht mehr verwendet, sondern die Umlaute selbst.

Heutzutage sollte man also einfach die entsprechende Meta-Angabe für UTF-8-Kodierung in den <head> setzen und die HTML-Datei ebenso kodiert speichern und man kann problemlos jedes Unicode-Zeichen direkt in den Quelltext schreiben, ohne dass man sich mit Ersatzdarstellungen der selben Zeichen herumschlagen muss. Kodierungen sind zwar ein Thema was nicht ganz so einfach zu sein scheint, aber das man einfach anschneiden *muss*, und wenn die Metaangabe mit der Kodierung der Textdatei übereinstimmt, dann ist es für die Schhüler sicher auch einfacher Sonderzeichen einzugeben — nämlich in dem man sie einfach tippt.

<font> ist schon seit Ewigkeiten „deprecated” und sollte nicht mehr verwendet werden. Schon gar nicht wenn man überhaupt nicht die Schriftart, sondern nur die Schriftfarbe beeinflussen möchte. <b> und <i> sind zwar noch in den aktuellen HTML-Sprachdefinitionen, werden aber nur noch für Anwendungen empfohlen wo die semantischen Auszeichnungen wie zum Beispiel <em> oder <strong> nicht in Frage kommen. Grundsätzlich würde ich für reine Formatierungsfragen genau wie bei der Farbe <span> mit einem entsprechenden `style`-Attribut verwenden. Beziehungsweise Anfängern erst einmal gar nicht Formatierungen sondern die semantischen Auszeichnungen beibringen und dann später wie man diese beliebig per CSS formatieren kann, wenn einem die Browservoreinstellungen nicht zusagen.

Die Warnung vor schlecht lesbarem kursivem Text stammt wohl auch noch aus Zeiten mit geringen Bildschirmauflösungen und ohne Kantenglättung bei der Schriftdarstellung.

Danach bin ich direkt zum Abschnitt über Tabellen weitergesprungen, weil ich da schlimmes vermutete. Und gefunden habe. Tabellen für das Layout von Webseiten mit absoluten Grössenangaben in Pixeln (fälschlicherweise „Punkt” genannt). Argh.

Grundsätzlich ist mir klar, dass ein Kurs für Schüler andere Anforderungen und Einschränkungen hat, als einer der sich an Erwachsene wendet, die Experten im Kursthema werden wollen, aber ich denke die Trennung von semantischer Auszeichnung von Inhalt per (aktuellem) HTML und die Formatierung per CSS kann man auch für Schüler verständlich aufbereiten.

Bei HTML denke ich, dass man auch schon auf HTML5 setzen kann, denn die Schüler sollen ja für die Zukunft lernen. Der <!DOCTYPE> wird damit zum Beispiel so einfach, dass man ihn sich sogar merken kann, was bei den HTML4.x Transitional, Strict, etc. ja nicht unbedingt der Fall ist. Also als Grundgerüst zum Beispiel so etwas hier:

Code: Alles auswählen

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Seitentitel</title>
  <link rel="stylesheet" href="style.css" />
<head>
<body>
   <!-- Hier kommt der Seiteninhalt. -->
</body>
</html>
Eine leere oder vielleicht sogar mit einigen Werten vorgefüllte ``style.css`` könnte man den Schülern zur Verfügung stellen.
Benutzeravatar
noisefloor
User
Beiträge: 4180
Registriert: Mittwoch 17. Oktober 2007, 21:40
Wohnort: WW
Kontaktdaten:

Hallo,

@EmaNymton: Ich hatte das Tuturial auch aufgehört zu lesen, nachdem ich das Jahr (2005) und das Wort "Frames" gelesen habe... BlackJack hat ja schon ausführlich erklärt, warum das Tutorial nix ist.

Grundsätzlich muss "alt" ja nicht gleich "schlecht" sein - man muss aber dann immer wissen, was sich in der Zeit zwischen dem Schreiben und jetzt getan hat.

Ein C-Einsteigerkurs aus 2005 ist heute wahrscheinlich noch durchaus brauchbar. HTML halt nicht, weil sich seitdem viel getan hat - HTML 5 (BTW: 2005 haben wir doch noch alle Seiten mit Hilfe von Tabellen layoutet, oder ;-) ).
Leonidas hat geschrieben:Vielleicht sollte der Autor sich ja beim Galileo-Verlag bewerben.
Da ist aber hart :wink: Die haben nicht nur schlechte Bücher... Gut, dummerweise ein schlechtes Python-Buch, was ja hier gerne immer wieder hervorgehoben wird. 8)

Gruß, noisefloor
Antworten