Dienstag, 29. April 2008
Aufgabe 1: Umstellung auf XHTML
Andreas.Niederschick.Uni-Linz, 10:06h
Die erste Umstellung die ich machte war die Änderung des Doctypes von transitional auf strict :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dies ist zwar nicht dringend erforderlich, jedoch verwende ich den strikten Standard um sofort auf Fehler aufmerksam gemacht zu werden.
Weiters erfolgte die Änderung des tabellenbasierten Designs in ein CSS-basiertes Design. Dazu wurde der sichtbare Bereich in 3 Container unterteilt: Den Banner, das Menu sowie den Contentbereich. Diese wurden mittels einfacher CSS-Befehle richtig positioniert.
Hier der Quellcode:
/* ##### Container ##### */
#banner {
height: 100px;
width: 100%;
}
#menu {
float: left;
width: 200px;
}
#content {
/* oben - rechts - unten - links */
margin: 0 0 0 230px;
}
Eingebunden wurden diese Container in die Main Page mit dividern (zB <_div id="banner">...<_/div>). [Die Unterstriche dienen zur Darstellung der entsprechenden Tags)
Nach durchsicht der meisten "Schnipseln auf der Collaborseite wurde ersichtlich dass die meisten Teile bereits ohne Tabellendesign und semantisch korrekt vorhanden sind. Dies folgt aus der Tatsache das die meisten Schnipsel hauptsächlich Makros und wenig anderen Inhalt aufweisen.
Zu ändern war noch der Story Editor. Dieser wurde wie das Mainlayout von Tabellendesing auf CSS umgestellt. Durch die Schachtelung zweier Tabellen war dies vergleichsweise schwer erreichbar.
CSS-Quellcode:
/* ##### Story Editor ##### */
#storyEditor {
display: block;
}
#storyEditor h3 {
font-weight:normal;
}
#storyEditor .topicChooser {
margin-left:15px;
display: inline;
float: left;
}
Außerdem mussten einige Tags aus semantischen Gründen entfernt bzw. durch andere erstetzt werden. So ersetzte ich die <_span>-Tags durch <_div>-Tags da diese oftmals in <_p>-Tags vorkamen. Außerdem wurden anschließend an die spans <_br/>-Tags verwendet, welche durch den Einsatz von <_p>-Tags vermieden werden konnte. Diese Änderungen wurden auch im Comment Editor vorgenommen.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dies ist zwar nicht dringend erforderlich, jedoch verwende ich den strikten Standard um sofort auf Fehler aufmerksam gemacht zu werden.
Weiters erfolgte die Änderung des tabellenbasierten Designs in ein CSS-basiertes Design. Dazu wurde der sichtbare Bereich in 3 Container unterteilt: Den Banner, das Menu sowie den Contentbereich. Diese wurden mittels einfacher CSS-Befehle richtig positioniert.
Hier der Quellcode:
/* ##### Container ##### */
#banner {
height: 100px;
width: 100%;
}
#menu {
float: left;
width: 200px;
}
#content {
/* oben - rechts - unten - links */
margin: 0 0 0 230px;
}
Eingebunden wurden diese Container in die Main Page mit dividern (zB <_div id="banner">...<_/div>). [Die Unterstriche dienen zur Darstellung der entsprechenden Tags)
Nach durchsicht der meisten "Schnipseln auf der Collaborseite wurde ersichtlich dass die meisten Teile bereits ohne Tabellendesign und semantisch korrekt vorhanden sind. Dies folgt aus der Tatsache das die meisten Schnipsel hauptsächlich Makros und wenig anderen Inhalt aufweisen.
Zu ändern war noch der Story Editor. Dieser wurde wie das Mainlayout von Tabellendesing auf CSS umgestellt. Durch die Schachtelung zweier Tabellen war dies vergleichsweise schwer erreichbar.
CSS-Quellcode:
/* ##### Story Editor ##### */
#storyEditor {
display: block;
}
#storyEditor h3 {
font-weight:normal;
}
#storyEditor .topicChooser {
margin-left:15px;
display: inline;
float: left;
}
Außerdem mussten einige Tags aus semantischen Gründen entfernt bzw. durch andere erstetzt werden. So ersetzte ich die <_span>-Tags durch <_div>-Tags da diese oftmals in <_p>-Tags vorkamen. Außerdem wurden anschließend an die spans <_br/>-Tags verwendet, welche durch den Einsatz von <_p>-Tags vermieden werden konnte. Diese Änderungen wurden auch im Comment Editor vorgenommen.
... link (0 comments) ... comment
Mittwoch, 19. März 2008
Anforderungen an einen Lernblog
Andreas.Niederschick.Uni-Linz, 11:22h
Ein Lernblog soll insbesondere das Erlenen neuer Themengebiete dynamisch gestalten. Es gilt statische Vorträge in Vorlesungen durch eigene Recherchen und Publikationen zu ergänzen bzw. zu vertiefen. Weiters bringt die Vernetzung der Teilnehmer einer Lehrveranstaltungen durch Links zu anderen Lernblogs bzw. durch Kommentare zu einzelnen Topics einen Mehrwert der online gestellten Informationen.
Daher sollte im Lernblog jedenfalls ein Modul eingeblendet sein welches Links zu den Weblogs anderer Kursteilnehmer bietet. Dadurch können andere Abhandlungen über ähnliche Themen nicht nur rasch gefunden werden, sondern der eigene Weblog kann durch eine Rückvernetzung leichter kommentiert werden. Ebenfalls sollte ein Modul eingebaut werden welches alle Referenzen auf den eigenen Blog, auch von nicht Kursteilnehmern, sichtbar macht.
Grundsätzlich sollte das Design klassisch ausfallen. D.h. am linken Rand die Module mit den Menüs bzw. Makros, breit rechts daneben der eigentliche textuelle (multimediale) Inhalt und an der Spitze der Seite ein Header als Erkennungselement aller Topics und Stories am Weblog.
Das Makro < imagelist > könnte für den einen oder anderen Einsatz sehr brauchbar sein. Bei Themengebieten die viele Bilder zur Visualisierung benötigen wird die angebotene Funktion die Bilder als Thumbnails gesammelt darzustellen sehr brauchbar sein. Jedoch wird dieses Makro nur fallweise interessant, zu Beginn eines Lernblogs meiner Meinung nach jedenfalls noch nicht.
< site.history > sollte in jedem Fall eingesetzt werden. Hierduch werden aktuelle Änderungen sofort abrufbar, was den Mitlernenden einen sofortigen Überblick über neu hinzugefügte Informationen oder Editionen dieser verschafft.
Natürlich sollte bei Lernblogs auf der Startseite auch der name des Bloggers zur Verfügung stehen. Dies erleichtert es den Kursteilnehmern Referenzen von den Blogs zu den Erstellern zu bilden. Würde kein persönliche Kontakt während der Lehrveranstaltungseinheiten bzw. zur Übugnsbearbeitung vorliegen, so würde ein Alias genügen.
Am Ende jeder Story sollten die Quellen für die Bearbeitung in Form von Links angegeben werden. Dies werden vorrangig Webseiten mit dediziertem Inhalt sein (etwa ein spezieller Eintrag in Wikipedia zum Thema), jedoch können auch andere Bloggs mit ähnlichem Themengebiet referenziert werden.
Folgender Link zeigt meine hardgecodede Designpage zum Lernblog:
Lernblog Design
Daher sollte im Lernblog jedenfalls ein Modul eingeblendet sein welches Links zu den Weblogs anderer Kursteilnehmer bietet. Dadurch können andere Abhandlungen über ähnliche Themen nicht nur rasch gefunden werden, sondern der eigene Weblog kann durch eine Rückvernetzung leichter kommentiert werden. Ebenfalls sollte ein Modul eingebaut werden welches alle Referenzen auf den eigenen Blog, auch von nicht Kursteilnehmern, sichtbar macht.
Grundsätzlich sollte das Design klassisch ausfallen. D.h. am linken Rand die Module mit den Menüs bzw. Makros, breit rechts daneben der eigentliche textuelle (multimediale) Inhalt und an der Spitze der Seite ein Header als Erkennungselement aller Topics und Stories am Weblog.
Das Makro < imagelist > könnte für den einen oder anderen Einsatz sehr brauchbar sein. Bei Themengebieten die viele Bilder zur Visualisierung benötigen wird die angebotene Funktion die Bilder als Thumbnails gesammelt darzustellen sehr brauchbar sein. Jedoch wird dieses Makro nur fallweise interessant, zu Beginn eines Lernblogs meiner Meinung nach jedenfalls noch nicht.
< site.history > sollte in jedem Fall eingesetzt werden. Hierduch werden aktuelle Änderungen sofort abrufbar, was den Mitlernenden einen sofortigen Überblick über neu hinzugefügte Informationen oder Editionen dieser verschafft.
Natürlich sollte bei Lernblogs auf der Startseite auch der name des Bloggers zur Verfügung stehen. Dies erleichtert es den Kursteilnehmern Referenzen von den Blogs zu den Erstellern zu bilden. Würde kein persönliche Kontakt während der Lehrveranstaltungseinheiten bzw. zur Übugnsbearbeitung vorliegen, so würde ein Alias genügen.
Am Ende jeder Story sollten die Quellen für die Bearbeitung in Form von Links angegeben werden. Dies werden vorrangig Webseiten mit dediziertem Inhalt sein (etwa ein spezieller Eintrag in Wikipedia zum Thema), jedoch können auch andere Bloggs mit ähnlichem Themengebiet referenziert werden.
Folgender Link zeigt meine hardgecodede Designpage zum Lernblog:
Lernblog Design
... link (0 comments) ... comment