Technikwürze

Wer suchet, der findet!

Reguläre Folge, Download (MP3, 13 MB)

Transkript der Folge

  1. David

    Technikwürze Nummer neunzig. Heute ist der siebzehnte September 2007. Mein Name ist David Maciejewski und ich heiße herzlich willkommen in der Sendung den Eric Eggert aus Österreich.

  2. Eric

    Hallo.

  3. David

    XHTML und CSS. Genau um XHTML und CSS soll es heute in dieser Sendung gehen, denn Erik und ich unterhalten uns über die CSS Grid Positioning Module oder beziehungsweise das Modul, was gerade rausgekommen ist. Aber kurz mal zu dir, Erik. Sag doch denen, die nicht mehr ganz wissen, wer du bist, wer du bist.

  4. Eric

    Ja, ich bin, Student hier in Wien und, Medieninformatikstudent und ich, mach in meiner Freizeit mehr oder weniger was mit HTML und CSS und bin, HTML fünf Working Group und, ja, arbeite bei den Webkrauts mit.

  5. David

    Sehr schön. Also bei den Webkrauts sehr aktiv und natürlich auch bei diversen Barcamps. Wir unterhalten uns heute über das Grid Positioning Module. Was steckt eigentlich dahinter?

  6. Eric

    Ja, also, Grids kennt man, hauptsächlich aus dem, aus dem Printbereich und da geht's halt hauptsächlich um diese, Aufteilung von Seiten und, mit diesem Grid Positioning Modul oder einfach CSS drei Grid geht das, auch irgendwann mit CSS und auf Webseiten und das soll eben die, visuelle Aufteilung irgendwie unterstützen.

  7. David

    Also die ganze Sendung hab ich ja untertitelt „Die Rückge-- die Rückkehr der Tabellenlayouts". Heißt, dass wir in Zukunft mit CSS, wenn das mal irgendwann durchkommen sollte, doch wie im Print irgendwie unsere Ta--, unsere Webseiten, Tabellen, sage ich schon, unsere Webseiten layouten können. Hat mit Tabellen wenig zu tun, aber erinnert so ein bisschen da dran.

    Es gibt nämlich auch andere Module, das CSS Multicolumn, was hier so 'n bisschen reinspielt und vor allen Dingen das CSS Advanced Layout Module. Und das sind auch solche Geschichten, womit ich eigentlich fast wie im Print arbeiten kann, ne? So man sollte sich das so vorstellen, dass ich, wenn ich mir jetzt 'ne Zeitung aufschlage und ich hab da mehrere Spalten und, mehrere Columns und Rows, dann kann ich das zukünftig mit CSS genauso machen.

    Also ähnlich, wie wir das damals mit Tabellen gemacht haben, nur flugs natürlich ohne Tabellen und viel, viel smarter.

  8. Eric

    Ja genau, also darum geht's eigentlich. CSS drei besteht ja aus mehreren, Modulen und, eins davon ist auch das Page Media Modul zum Beispiel. Und das, das spielt im Prinzip da rein. Das heißt, wir können wirklich dann mit CSS, zum Beispiel Print Style Sheets, genau dieselben Sachen verwenden, wie wir das im Moment, oder, oder wie das im Moment nur mit Print Sachen geht, also wirklich mit, mit Software, die dafür ausgelegt ist.

    Und, wie gesagt, das Multicolumn Modul grade z-zur Erklärung, das hat eben zu tun mit, mit Text, der über verschiedene Spalten geht. Das heißt, man kann das wirklich so machen wie in, wie in der Zeitung, dass man so dreispaltigen Text hat und dann Image so rein, reinfloaten lässt, das dann auch zwei Spalten zum Beispiel, oder über zwei Spalten geht.

    Und das Advanced Layout Modul, das ist noch mal 'ne, 'ne, 'ne kompliziertere Sache, aber lässt, Raum für viele komplexe Layout-Spielereien, sag ich mal.

  9. David

    Also grad das Grid Positioning Modul, CSS Grid nennen wir das heute mal, ist vielleicht 'n bisschen was einfacher. Geht ja auch mehr so in die Richtung von dem, was einige Webdesigner mit ihren Layouts derzeit auf den Webseiten machen, nämlich dass sie das alles so in Spalten unterteilen. Nur 'n bisschen kom-- Also derzeit ist es recht kompliziert, dass ich meine visuellen Spalten mir quasi aufmale und entlang dessen irgendwie meine Diffs positioniere.

    Mit den Grid Layouts, mit den CSS Grids soll das dann so ablaufen, dass ich sage: „Pass auf, ich hab hier 'ne Seite und ich mach jetzt per CSS meine Eigenschaften. Ich habe fünf Spalten, sechs Spalten mit Abstand XYZ", und da fließt der Text dann automatisch rein. So ungefähr kann man sich das vorstellen, ne?

  10. Eric

    Genau so kann man sich das vorstellen. Und das, Besondere ist eben, dass ich keine, keine speziellen Klassen brauche. Das heißt, wenn ich jetzt so 'n, so 'n Grid Modul hab oder so 'n Grid, so 'ne Grid Vorlage wie Blueprint oder, ich sag mal, Yahoo Grids, dann hat man das Problem, dass man sich wirklich Diffs anlegen muss mit, mit, Breite und Klassennamen, die dann die Breite wiederum von den, von diesen Diffs und von den Spalten, ja definieren.

    Und, hier kann man einfach das über eine, eine CSS Eigenschaft festlegen und alles, was dann in diesem Container ist, kann dann entsprechend an diesem Multicolumn Layout ausgerichtet werden. Und ich glaub, das ist die große Vereinfachung da.

  11. David

    Also derzeit kann man, Teile, also des CSS drei Multicolumns Layouts auch testen in seinem eigenen Browser, zumindest wenn man Mozilla, Safari oder Opera, hab ich mir noch aufgeschrieben, hat hat. Die sind aber nur experimentell drin. Also man sollte sie produktiv nicht einsetzen, aber man könnte zumindest schon mal spielen und sich das anschauen, wie ungefähr das aussehen könnte, richtig?

  12. Eric

    Ja, also der große Vorteil ist eben, dass das, im Moment, zwar experimentell drin ist. Opera kann's noch nicht, hab ich, herausgefunden. Soll aber kommen, bei neun fünf. Also Opera neun fünf soll es dann können, dieses Multicolumn Layout. Und, das ist, man kann damit schon spielen. Es passiert im Prinzip nichts, wenn man, we-wenn's der Browser nicht kann. Also Internet Explorer zeigt dann eben den Text nur in einer Spalte an statt in drei oder so, wie man das definiert.

    Das ist also 'n F-Fallback-Mechanismus, der da ganz, ganz gut wirkt, schätze ich.

  13. David

    Es gibt bei den, Grid-Layouts zwei unterschiedliche Arten. Es gibt dieses implizites Grid und das explizites Grid. Sagst du uns mal kurz, was dahinter steckt?

  14. Eric

    Ja, also implizit, ist quasi, alles, was man bekommt, was man gratis geliefert bekommt. Also wenn ich jetzt wirklich das Multi-Column-Layout benutz, also dieses andere Modul, und sage, ich hab hier drei Spalten und die sind, keine Ahnung, vier em breit und, und, und haben einen Abstand von, von zwei em und dann wird das auch automatisch quasi als, als, als Grid, entsprechend, ja, umgesetzt und man kann dann diese ganzen Grid-Sachen benutzen.

    Also man kann zum Beispiel sagen, das Image ist jetzt zwei Grids breit oder drei Grids breit und dann kann man es, eben reinpassen in das Grid, ohne dass man wirklich 'n Grid definiert.

    Und 'n explizites Grid, da muss man dann wirklich die Eigenschaft "grid columns" und "grid rows" aufrufen und kann dadurch dann entsprechend seine, seine Seiten ganz, explizit sagen: „Hier, ich hab, alle zum Beispiel, diese eine Text, dieses eine Textgrid sind, ist aufgeteilt noch mal in zwei unterschiedliche Grids. Also das Prinzip ist im Augen.

  15. David

    Das, was man per CSS dann auch machen könnte. Ich mein, wir dürfen nicht vergessen, das Ganze ist noch ein Arbeitsentwurf. Also da wird sich noch viel ändern, erfahrungsgemäß.

  16. Eric

    Ja, wird sich noch viel ändern.

  17. David

    Und das wird wahrscheinlich auch noch zehn bis zwanzig Jahre dauern, bis wir das vielleicht mal produktiv irgendwann einsetzen können. Aber schöne Sachen sind dabei, dass man zum Beispiel sagt: „Ich habe jetzt eine Spalte, mit einem Zwischenabstand von soundsoviel" und ich kann das multiplizieren per CSS, indem ich ganz einfach die, zu wiederholenden Objekte in eine Klammer setze und, in eckigen Klammern dahinter zum Beispiel setze, wie viel Mal das Ganze wiederholt wird.

  18. Eric

    Richtig, das ist also, es ist also sehr smart gedacht, weil man dann, sich eben die, keine Ahnung, die, die, die Wiederholungen einfach sparen kann und muss es nicht irgendwie bis ins Unendliche definieren. Und was auch geht, ist, dass man, überhaupt ka, gar nicht angibt, wie, wie oft sich das multiplizieren soll und dann wird's einfach bis so, so viel Platz wie da ist, multipliziert.

  19. David

    Das heißt, ich haue einfach die Sachen, die ich haben will, in eine Klammer, ohne in eckigen Klammern dahinter die, die Zahl, wie ich das oft haben will, und dann wird das unendlich viel quasi, wiederholt.

  20. Eric

    Genau, also wenn, wenn ich jetzt zum Beispiel sage, ich hab 'n vier, vier em breite Grid und ich will das immer weiter wiederholen, bis ich am rechten Bildschirmrand bin und dann schreibe ich einfach vier em und das in Klammern und dann wird es wiederholt bis, bis zur Unendlichkeit. Also dadurch wird dann der Text auch zum Beispiel auf breiteren oder größeren Bildschirmen entsprechend, ansehnlich.

  21. David

    Der Vorteil ist grade: Wenn ich mir heute 'ne Grid, also 'ne, eine Webseite mache, die das Grid-Layout, also das, was, in den Designerkreisen irgendwie bekannt ist, umsetzen möchte, dann mache ich mir vorher 'n Plan, guck, wie breit soll meine Seite werden, berechne irgendwie die, d, Zwischenabstände und male mir das sozusagen visuell auf und mach mir dann Gedanken, welche Div-Elemente kommen irgendwo hin, damit ich das denn umsetzen kann.

    Und wenn ich jetzt 'n Div haben will, was über zwei Spalten geht, dann muss ich das dementsprechend mit einer CSS-Klasse oder was auch immer, denn umsetzen.

    Und jetzt mit diesem Grid-Layout sage ich ganz einfach im Kopf innerhalb von fünf Sekunden oder drei Sekunden, je nachdem, wie schnell ich tippen kann: „Mach mir doch mal Spalten unbegrenzt mit jeweils einer Breite von X." Und das Schöne bei meinen Elementen ist, dass ich denen sage: „Du gehst über zwei Spalten, du gehst über drei Spalten", oder was auch immer. Also super smart eigentlich, ne?

  22. Eric

    Ja, ist 'n sehr intelligente, 'ne sehr intelligente Sache und, ich glaub auch, das, das hat so das Zeug irgendwie, das ganze, Layouten von Webseiten zu revolutionieren. Also wenn das mal flächendeckend umgesetzt ist, ich hoffe ja auf den Internet Explorer acht in dem Fall, dann, d-dann wird es richtig groß und dann funktioniert das also auch, auch irgendwie verschiedene, 'ne Seite zu haben mit verschiedenen Artworks und, und, und Spalten, die total irgendwie variabel sind.

    Und das wird dann alles total einfach, weil du kannst es dann einfach in deinem, in deinem CS, in deinem CMS kannst du das einstellen. Und dann wird einfach deinem, deiner Seite ein anderes, eine andere Klasse zugewiesen und die hat dann wieder ein anderes Grid und damit hast du, hast du 'ne total variable Webseite.

  23. David

    Webseite dann. Ich mein, die Chancen, dass das irgendwann im Internet Explorer kommen sollte, stehen ja eigentlich nicht schlecht, denn die Autoren, dieses ersten Working Draftes, des W3C sind Alex – ich hoffe, ich spreche das richtig aus –, Mugilwesky oder was auch immer und der Markus Mielke. Und die beiden, sind Angestellte in dem Softwarehaus in Redmond, also von Microsoft. Also Microsoft arbeitet da wirklich explizit mit und, versucht, das Ganze mit zu formen.

    Das heißt, wenn die schon eigentlich mit drinstecken, dann stehen die Wahrscheinlichkeiten, dass es im IE mal irgendwann kommen sollte, im Achter, im Neuner, im Zehner, wir wissen das gar nicht, stehen ja eigentlich gar nicht so schlecht. Denn machen wir uns nichts vor: Also Microsoft ist und bleibt wahrscheinlich noch 'ne ganze Zeit lang Marktführer. Also von daher ist es doch ein gutes Zeichen, wenn die sich jetzt wirklich aktiv beteiligen an den neuen CSS-Richtlinien, ne.

  24. Eric

    Ja, auf jeden Fall. Also man darf ja nicht vergessen, CSS selbst ist ja eine Erfindung von Microsoft, oder, oder sehr, sehr stark von Microsoft gefördert. Und, grade das wird, wird wohl ausschlaggebend sein. Und auch jetzt, zum Beispiel der Chair von HTML5 ist auch, 'n Microsoft-Mitarbeiter, aber ich hab den Namen grad vergessen.

  25. David

    Ist egal.

  26. Eric

    Und, das heißt, die, die, die, Microsoft ist da schon dabei und wird, wird da mitreden wollen in Zukunft.

  27. David

    Was natürlich nicht schlecht ist. Ich mein, die anderen Browser bieten's ja teilweise jetzt schon experimentell an, aber ich mein, inwiefern ist das denn realistisch, dass wir das in den nächsten fünf oder zehn Jahren sehen? Zehn Jahren vielleicht schon eher, aber fünf Jahren, das wird schon knapp, oder beim W3C?

  28. Eric

    Ja, ja, es ist immer schwierig, weil das W3C macht eben nur, macht keine Beta-Version. Die bringen zwar diese, diese Working Drafts raus, aber die sind eben so: „Ha, benutzt sie doch lieber noch nicht.

    Das, das ist alles noch nicht so toll. Wartet mal noch 'n bisschen." Und erst wenn es dann Last Call Working Draft ist oder so, dann sagen sie: „Ja, jetzt könnt man's auch mal implementieren." Und das ist natürlich viel zu spät. Also wenn ich sehe, dass das Multicolumn Layout, dass der erste Working Draft ist wirklich vom 22.06.1999. Das ist, schon ewig her und mittlerweile ist es so 'n bisschen in Beta-Version von Browsern angelangt. Das ist natürlich, also da-

  29. David

    Schon arg, schon arg traurig, ja. Ja, was meinst du denn? Du sagtest vorhin, diese, na ja, diese neuen Layoutpositionierungsmöglichkeiten, die wir in Zukunft haben könnten, das Webdesign revolutionieren. Wenn ich mir 'n Bildschirm betrachte, könnte ich mir vorstellen, dass das Multicolumn Layout, absolut was bringen würde, denn der Trend geht ja dazu hin, immer größere, günstigere TFT oder Plasma-Monitore, immer breit. Die ganzen Monitore werden als Wi-Widescreen hergestellt.

    Es gibt quasi fast keine vier zu drei Monitore mehr, es sei denn als Sonderangebot bei MediaMarkt. Von daher könnte ich mir das sehr gut vorstellen, dass wir in Zukunft vielleicht gar nicht mehr vertikal scrollen, sondern wir sehen das in mehreren Spalten auf 'm Widescreen-Monitor, ne.

  30. Eric

    Ja, also ich denk, das könnte durchaus sein, dass wir da 'ne, 'ne, 'ne, keine Ahnung, 'ne Horizontalität bekommen, mit den Webseiten. Aber letztlich ist, lesen wir halt von oben nach unten immer noch lieber als von links nach rechts. Also, ich, ich find's auch, schwierig, ob diese, diese Multicolumn-Geschichte grad, wenn die plötzlich unter diesen berühmten Fold geht, also wenn man dann runterscrollen muss, um fertig zu lesen und wieder hochscrollen.

    Also das find ich, ist, ist 'ne Schwierigkeit und deswegen, bietet sich das eigentlich auch nur für relativ kleine, kleine, kleine Bereiche auf der Seite an einfach, dass man das da benutzt. Aber ob man wirklich dann, irgendwie vertikal scrollt, ich glaub's eher nicht, weil das ist doch, das, das, das ist schwierig. Das müssten auch die User erst wieder lernen. Also...

  31. David

    Ich wollt grade fragen: Müssen wir uns eventuell anlernen, anders zu lesen? Oder die zweite Frage, die sich da mir bestellt, : Gibt es in den Zeitungslayout diese Multicolumn, also die Mehrspaltigkeit aufgrund dessen nur, dass wir in der Zeitung nicht scrollen können, dass wir so wenig Platz haben?

  32. Eric

    Ja, also dass, dass, Berichte über mehrere Spalten geht, das liegt auf jeden Fall daran, dass wir keine, keinen unendlichen Platz haben bei, bei Zeitungen. Und das, und dann sind die Blätter ja relativ groß. Das heißt, wenn man da dann eine Spalte hätte und dann, wären die Zeile viel zu breit und, deswegen hat man sich da irgendwie auf, auf diese, diese Darstellung dann geeinigt irgendwo oder hat herausgefunden, dass das das Beste ist.

    Und wenn die Monitore jetzt größer werden und dann, hat man natürlich das auch bei diesen, bei den Webseiten layouts, weil man dann plötzlich ganz viel Whitespace hat- -und, da natürlich dann den Platz auch irgendwo ausnutzen will und muss.

  33. David

    Das wird ja immer das zunehmende Problem bei diesen Widescreens, dass, wir waren am Überlegen, also vor 'n paar Jahren war's vielleicht achtundacht mal sechshundert, dass wir unsere Webseiten auf diese Breite angepasst haben, unendlich tief nach unten scrollen. Inzwischen sind wir so weit, dass wir sagen, okay, Standard, Größe Minimum ist tausendvierundzwanzig siebenundachtundsechzig, also optimieren wir da drauf.

    Die nächste Überlegung wär, mutmaßen zu können, flexible Layouts mal nebenhergeschoben, aber wenn ich jetzt 'n festes Layout haben sollte, ich meine, wenn ich mir die Webseiten jetzt heute anschaue auf 'm vierundzwanzig Zoll, oder was auch immer, mit dem ich in Köln gearbeitet habe, dann ist es so, dass ich, die Spiegelseite zum Beispiel ganz, ganz links in der Ecke irgendwo habe und rechts superviel Whitespace.

    Ich mein, ich könnt die Webseite mittig setzen, aber trotzdem nutzt sie ja nicht den Monitor aus. Und das wäre ein Ansatz für die, für die Mehrspaltigkeit, eventuell das aufzubrechen. Aber wie du schon sagst, müsste man echt gezielt überlegen: Macht das Sinn? Begreifen die Leute das? Oder wie sieht's aus, wenn ich tatsächlich scrollen muss dann, ne?

  34. Eric

    Ja, also es gibt ja schon diese Ansätze mit JavaScript, dass man sagt, wenn, wenn der Bildschirm oder die, die Auflösung des Browserfensters so breit ist, dass, dass noch Platz ist und dann werden plötzlich noch andere Zusatzsachen eingeblendet auf der Website und beziehungsweise ausgeblendet, wenn's dann weniger wird. Außerdem glaub ich, dass, dass auch das Multitasking irgendwie zunimmt, je mehr, Platz man hat auf 'm Bildschirm.

    Also hat man noch 'n Instant Messenger offen oder Skype oder was weiß ich noch was und, und hat, und nutzt da den Platz und hat das Fenster, ja, meistens nicht im Fullscreen.

  35. David

    Gar nicht mehr so groß auf, ne. Ja.

  36. Eric

    Genau. Deswegen brauchen wir eben die Lösungen, die sich anpassen, weil es gibt verschiedene Nutzer, die, das Internet und den Browser verschieden nutzen und da brauchen wir dann CSS auch, das sich am besten an die, an die Sachen anpasst.

  37. David

    Was ich, was ich jetzt natürlich noch nicht nachgelesen habe, ist, die, die Möglichkeit, wenn ich jetzt 'n, 'n Grid-Layout von, was weiß ich, zwölf Spalten habe, wie sieht's denn aus, wenn ich das ganz eng zusammenschiebe? Wahrscheinlich werden die nicht umgebrochen, sondern sind dann wahrscheinlich ganz klein, ne. Da hast du auch noch keine Info drüber, ne, wie sich das verhalten könnte?

  38. Eric

    Das kommt drauf an, wie du's definierst. Also du kannst es auf fixed width definieren, also mit, mit Pixeln oder EM. Du kannst aber auch Prozent benutzen, dann schieben die sich zusammen natürlich. Du kannst, du kannst aber zum Beispiel auch, festlegen, dass es, da, da, dass eben, mehr Spalten eingeblendet werden oder weniger Spalten eingeblendet werden.

    Das heißt, wenn du es zusammenschiebst, hast du plötzlich 'ne Spalte weniger, noch 'ne Spalte weniger, noch 'ne Spalte weniger und hat, und kannst dann, entsprechend vertikal scrollen.

  39. David

    Also flexibel bin ich dann schon. Auf jeden Fall wird das doch, also-- Sollten wir uns an die Lesegewohnheiten ändern? Ich meine, in Zukunft wird man echt überlegen müssen: Nutze ich diese Multicolumn-Layouts oder nutze ich sie nicht? Hängt auch von der Textlänge ab. Aber ich denke, wenn wir uns darauf einschießen sollten und das wirklich nutzen in Zukunft, wird die Erstellung der Webseiten diesbezüglich wesentlich einfacher sein, als es heute noch der Fall ist, ne.

  40. Eric

    Ja, also davon gehe ich auf jeden Fall aus, weil, man hat eben nicht mehr Tausende von, von CSS-Klassen und, und, dann, muss man, muss man jedem, jedem Inhalt, den man irgendwo haben will, irgendwie eine Klasse auch noch zuweisen und, muss auch viel im HTML machen, was eigentlich ins CSS gehört irgendwo. Sondern bekommt da eine viel, viel stringentere Trennung dann, auch hin.

  41. David

    Was tatsächlich nicht schlecht ist. Was würdest du den, Zuhörern raten? Schon mal einlesen, begreifen, mitverfolgen oder erst mal wieder vergessen, beziehungsweise jetzt schon mal testen und drauf einstellen, oder?

  42. Eric

    Ja, also das ist schwierig. Also das Multicolumn-Layout kann man auf jeden Fall sich schon mal anschauen. Das ist jetzt im vierten Working Draft irgendwie und, wird, wird, wie wir schon gesagt haben, ja auch schon von, von einigen Browsern umgesetzt. Das Grid jetzt so, als, ich sage mal, Designrichtlinie irgendwie kann man sich, kann man sich damit schon mal vertraut machen. Das ist sicherlich nicht das Schlechteste, aber zum praktischen Anwendung, Anwenden ist noch viel zu früh.

  43. David

    Ja. Also da wird es die Zeit zeigen. Du hast, ein kleines Dokument vorbereitet in Backpack. Das verlinken wir auf diese Sendung noch mal, also im, in der Niederschrift von Technikwürze.de. Dann können sich alle noch mal anschauen, was genau dahinter steckt, beziehungsweise hast du dann auch verlinkt die, Stellen beim W3C, wo das Ganze dokumentiert ist, ne?

  44. Eric

    Genau, habe ich gemacht.

  45. David

    Dann sind wir eigentlich mit dem Thema so weit durch, ne? Oder haben wir noch irgendwas vergessen, was ganz, ganz wichtig ist?

  46. Eric

    Ja, vielleicht, sollte man noch erwähnen, dass es eine neue Einheit gibt. Also das, -

  47. David

    Richtig, genau.

  48. Eric

    Das Grid, das Grid-Einheit. Das heißt, man kann sagen, das ist ein Grid breit, zwei Grid breit, drei Grid breit und kann damit eben dann auch, sehr explizit auf, auf die, auf das Grid eingehen noch mal. Also das ist noch sehr interessant daran.

  49. David

    Also die Abkürzung für die Grid Unit, so heißt es ja im Englischen, ist GR. Und mit GR ist es tatsächlich dann so spannend, gerade, wir haben am Anfang von einem Bild erzählt, was man, auf mehrere Spalten aufteilen kann.

    Ich kann ja einem Bild sagen: „Du gehst über eine Spalte, zwei Spalten“, oder das Interessante ist, dass ich mit dem Floating das so setze, dass es in der, genauso wie im Zeitungslayout, in der Mitte von einer Spalte anfängt und in der anderen Mitte der anderen Spalte, aufhört, also quasi über, also zwischen diesen beiden Spalten irgendwie liegt. Also sehr interessant, die Geschichte, ne?

  50. Eric

    Ja, und Float wird dafür erweitert und, es wird alles ein bisschen komplizierter, aber auch viel flexibler und, und es ist spannend, also das zu sehen, auch die Beispiele. Das ist mir übrigens sehr, sehr positiv aufgefallen. Es sind viele Beispiele in diesem, Working Draft drin und, da kann man richtig was mit anfangen. Das finde ich-

  51. David

    Viel Visuelles auch, dass man zumindest erst mal auf den ersten Blick sieht, wie das aussehen könnte, ohne dass man sich jetzt in die Struktur explizit einarbeitet und nicht die Testmöglichkeiten hat, das nachzubilden. Sehr interessant auf jeden Fall, die Geschichte. Linktipps. So, dann hab ich noch, wir hatten ja letzte Woche versucht zu verlosen, eine Flash, Blödsinn, eine Karte, für die Flash Forum Konferenz. Die findet ja am 25. und 26., 26. September, meine Güte, in Köln statt.

    Aufgrund zahlreicher, wir haben 130.000 Millionen Trilliarden Anrufe bekommen. Es hat Tomas Caspers gewonnen. Thomas, werter Kollege. Jetzt sage ich auch gerade, warum er gewonnen hat. Da muss ich noch mal auf Technikwürze.de gehen. Er hat nämlich was ganz Interessantes geschrieben und ich hoffe, dass ich jetzt den Namen einer Webseite richtig eintippen kann. Ja, ich kann es noch.

    So, Thomas hat geschrieben: „Ich finde, ich habe eine Karte verdient, weil A, ich mich drüben bei Manuela vertan habe und weil ich mit Aran Balken noch mal eine Runde Werewolf spielen will und weil ich mit Chris Heilmann unbedingt noch einmal ein paar Cood-Schnipsel unterhalten muss, über ein paar Cood-Schnipsel unterhalten muss, die wir heute ausgetauscht haben. Also ich glaube, Tomas Caspers hat's verdient, auch wenn er ein guter Kollege von uns ist, ne?

  52. Eric

    Ja, das ist auf jeden Fall eine gute Argumentation und, und, es ist, s-sowieso so, dass, dass diese Flash Forum Konferenz sich ganz spannend anhört, auch, mit Chris Heilmann noch dabei. Also auf jeden Fall hat er's verdient.

  53. David

    Also Karte im Wert von dreihundert Euro geht nach Köln. Du musst ja dann nicht weit reisen, Thomas. Ist ja quasi so in deiner Nachbarschaft. Wir wünschen viel Spaß. Dann habe ich noch zwei News. Und zwar ist jetzt die jQuery eins zwei Version erschienen, mit ganz, ganz vielen neuen tollen Sachen und vieles soll vereinfacht sein. Ich habe es mir im Detail noch nicht angeschaut. Den Link dann auf Technikwürze. So, noch eine Sache dazwischen gehakt.

    Der Sean Edman hat beschrieben, wie man CS, wie man die Upload Buttons, mit CSS und dem DOM und ein bisschen JavaScript gestalten kann. Das sind diese hässlichen Dinger, wo man draufdrückt, und eine Datei hochladen kann beziehungsweise auswählen kann. Die konnte man bisher eigentlich nicht gestalten. Er schreibt, wie es möglich ist, das Ganze, den Link dann auf Technikwürze.de. Ulrich, dich findet man auf yatil.de.

  54. Eric

    Genau, yatil.de.

  55. David

    Warum gibt es eigentlich noch kein yatil.at?

  56. Eric

    Gute Frage..

    Ich hab's nicht für nötig gehalten, weil das ist ja ein deutschsprachiges Angebot und da ist de dann schon richtig.

  57. David

    Aber auch unsere Schweizer Zuhörer und unsere österreichischen Zuhörer, die gehen ja auch auf DE. Also, ich war auch am Überlegen, ob ich jetzt Technikwürze.ch und Technikwürze.at mir registrieren lasse, aber ich denke, da ne-- Also die Österreicher sind da weit.

  58. Eric

    Österreicher-Dialekt dann, vortragen. Das ist ja

  59. David

    Da könntest du mir eventuell als dort Beheimater im Moment ja ein bisschen entgegenkommen und helfen.

  60. Eric

    Ah, das ist schwierig.

  61. David

    Aber ich denke, die, die, beiden Länder, sind sowieso ein bisschen was weltoffener als die Deutschen. Die Deutschen gucken ja doch meistens nur auf DEs und nicht mal auf die AT angrenzenden, Webseiten.

  62. Eric

    Ja, wobei ich-

  63. David

    Egal. Ja?

  64. Eric

    Im Webmontag so meine Erfahrungen gemacht hab. Also es, es war tatsächlich, so, dass, d-dass extra ein Webmontag AT eingerichtet wurde, weil sich die Österreicher da nicht so, dann, wie soll ich das sagen, repräsentiert fühlten und, dann, statt auf webmontag.de lieber auf webmontag.at dann noch einen Blog gemacht haben und so.

  65. David

    So Erik, zum Schluss der Sendung: Dein Fazit, mit den neuen Modulen, die uns der W3C präsentiert hat.

  66. Eric

    Ja, also ich find, die neuen Module, eröffnen uns 'ne ganz neue Welt von, v-von Layoutmöglichkeiten und, also grade was auch Advanced-Layout-Modul angeht, das wird alles ganz spannend und, wir sollten uns auf die Zukunft freuen und, vielleicht einfach mal darauf warten, was die vom W3C denn so machen und nicht erst alles sofort in der Luft zerreißen.

  67. David

    Ja. Also mein Fazit für diese Geschichte ist, ich freue mich immer noch über meinen Beruf. Freue mich auch, dass ich komme ja eigentlich ursprünglich aus dem Printzeug, doch hab das vor zehn Jahren hauptberuflich gemacht. V-von daher freue ich mich, dass ich, Elemente wieder in meiner Arbeit jetzt entdecken kann, wieder benutzen kann, grade aus dem Printbereich, wo ich gedacht hab: „Mensch, das ging doch damals in Print eigentlich viel einfacher", was in Zukunft wieder möglich ist.

    Also spannend wird's bleiben beruflicher Sicht. Ich muss natürlich vieles da neu hin zulernen, was natürlich auch positiv ist. Ich möchte aber warnen davor, dass man sie wieder nicht übertreibt, ob der neuen Möglichkeiten. Man kann sehr viel machen und sehr viel tun, aber man sollte es nicht übertreiben, sondern mit einem Argusauge draufgucken und überlegen: Macht das an dieser Stelle wirklich Sinn oder macht es keinen Sinn?

  68. Eric

    Ja klar, also das, das wird sich nicht ändern, dass man da, immer noch gesunden Menschenverstand irgendwie für seine Layouts einsetzt und halt dann keine Spalten hat, die irgendwie nur so einen Buchstabe oder so breit sind, weil man's kann.

  69. David

    Ja. Interessante Sendung. Wir haben diesmal einen kleinen Ausblick gegeben auf CSS3. Das ist wirklich noch Zukunftsmusik, aber zumindest sollte man mal drüber gesprochen haben. Vielen Dank, Erik, aus Österreich, dass du dich eingeschaltet hast.

  70. Eric

    Vielen Dank, dass ich dabei sein durfte.

  71. David

    Und ich hoffe, ihr schaltet nächste Woche Montag wieder ein. Wenn ihr Kommentare habt, gern auch als Video auf Technikwürze.de. Ich hab die Funktion wieder freigeschaltet. Oder auch das, was ihr nicht macht. Ihr seid nämlich zu faul zum Anrufen. Telefonnummer null fünf elf in Hannover, einundzwanzig siebenundzwanzig dreihundert. Ansonsten www.Technikwürze.de oder Echo technikwürze.de. Und ansonsten, wie gesagt, nächste Woche Montag. Vielen Dank.

Grid Layouts mit CSS 3

CSS3/Grid bzw. offiziell CSS Grid Positioning Module Level 3 ist ein Standard um aus dem Printbereich bekannte Spaltenlayouts in CSS einfach umzusetzen. Diese werden beispielsweise zur visuellen Aufteilung einer Seite genutzt.

Zusammenhang mit anderen CSS-Modulen

CSS3/Grid ist einer von drei Vorstößen des W3C um flexiblere Layouts zu ermöglichen. Das sind neben CSS3/Grid noch CSS3/Multi-Column (CSS3 module: Multi-column layout) und CSS3/Advanced Layout (CSS Advanced Layout Module).

CSS3/Multi-Column:

Sorgt für Text, der sich über mehrere Spalten verteilt (implementiert in Mozilla / Safari)

CSS3/Advanced Layout:

Erreicht eine direkte Layout-/Contentzuordnung

Status der Entwürfe

CSS3/Grid: 1. WD 05.09.2007
CSS3/Advanced Layout: 2. WD 09.08.2007 (1. WD 15.12.2005)
CSS3/Multicolumn: 4. WD 06.06.2007 (1. WD 22.06.1999)

Implizites und explizites Grid

Ein implizites Grid bekommt man, wenn man per Multicolumn-Modul einen mehrspaltigen Text erstellt (Eigenschaften columns und column-gap).
Ein explizites Grid wird über die Eigenschaften grid-columns und grid-rows definiert. Explizit definierte Grids sind immer spezifischer als implizit definierte.

Spezifikation von expliziten Spalten

grid-rows: 4em (.25em 1em); → Element bekommt eine 4em-Spalte und dann 1em-Spalten im Abstand von .25em bis kein Platz mehr verfügbar ist.

grid-rows: 4em .25em 1em; → Element bekommt eine 4em-Spalte, eine mit .25em und eine mit 1em;

grid-rows: 4em (.25em 4em)[3] → Element bekommt vier Spalten mit jeweils 4em Breite und Zwischenräumen von jeweils .25em.

Neu Einheit: gr

Durch eine neu Einheit gr können Elemente über mehrere Grid-Spalten/-Zeilen definiert werden. Ein Bild mit der Eigenschaft width: 1gr; wird sich genau in eine Spalte einpassen. In welche wird mit den Eigenschaften float und float-offset festgelegt. Float wird dazu um Werte wie page, top usw. erweitert.

Der Gewinner der 300-EUR-Karte zur Flash Forum Konferenz 2007

Tomas Caspers hatte einen guten Grund 1 sich für die Karte zu bewerben - das wird belohnt. Herzlichen Glückwunsch lieber Kollege!

Die News der Sendung

  • jQuery 1.2 ist erschienen und trumpft mit vielen Verbesserungen auf. (via Ajaxian)
  • Wie man diese hässlichen Dateiupload-Inputs mit CSS und dem DOM ändern kann, erklärt Shaun Inman 1

Der Gastmoderator

Eric Eggert ist ein sehr aktives Webkrauts -Mitglied und zu erreichen unter yatil.de

Fußnoten

  1. Link entfernt, da nicht mehr erreichbar ↩ a ↩ b

Erwähnungen 1

Kommentare 15

Weitere 10 Kommentare anzeigen
  • Ach herrje. Mein Freund Marcel Schwarzenberger ermahnt mich jedes Mal, meine Artikel mal gegenzulesen. Ohne Erfolg bisher.
    Danke für den Hinweis, Link ist korrigiert.

  • Hallo,

    g nein der stimmt immer noch nicht so ganz, nun heißt er so: http://www.webkrauts.de-mitglied/ aber es muss doch wenn schon dann so heißen: http://www.webkrauts.de/mitglied/

    Gruß,
    NewMedia

  • Ein Podcast :)

    Das heißt, dass ich das frühstens in 5-10 Jahren benutzen kann :(
    Weil es leider z.B. immernoch Menschen bzw. Monster gibt, die immernoch IE 6 und sogar IE 5.5 benutzen.

    Ist genauso wie die Webform 2.0

    Ich fände es ja klasse, wenn CSS rechnen könnte Beispiel:
    div
    {
    left:50%-50px;
    }

    dadurch würden schöne Sachen möglich sein.. momentan müsste man es mit JS machen.. und deswegen macht man es nicht.

    @David Maciejewski: Ist okay, dass es Freizeit ist und deswegen natürlich nicht jedes mal das riesige Thema sein kann. Wäre allerdings nett :P Hast übrigens auf der Webseite 400€ stehen und hast 300€ gesagt

    Thomas

    P.S: Gibt ne neue Version von VS.Php

  • stimmt allgemein optimistisch. Nur die Sache mit dem IE macht mir Sorgen. Die Umsetzung kann dauern.
    Von mir auch ein Lob: So inhaltsreich mag ich Technikwürze.

  • Find ich gut und innovativ (oder smart ;-) ) wenn wenn mit CSS 3 irgendwann Grid Layouts erstellt werden können.
    Ob Widescreen Bildschirme auch zu "Widescreen Layouts bei Webseiten" führen könnten - ich denke eher nicht.

  • Ich freue mich, dass mal wieder so richtig dick in Webstandards eingestiegen wird. Ich schätze aber vor allem, dass ihr den Podcast auch macht, wenn mal nicht so viel auf dem Zettel steht. Einer reihe Podcasts sind ja schon die Themen ausgegangen.

    Liegt es nur an der Zeit? Wenn es auch an den Ideen liegt, könntest Du doch neben dem Hinweis auf die Kommentare auch einen Hinweis auf Themenwünsche bringen.

  • Es ist stets die Zeit. Jede Woche Technikwürze zu produzieren ist schon ein hartes Stück Brot.

  • Mal sone Frage: Wir groß wird Eurer Meinung nach ein Monitor in Zukunft sein? Gut 14" war ganz schön klein. 15" auch, aber werden wir tatsächlich alle in ein paar Jahren vor 35" Monitoren sitzen? Bei der Arbeit mag das ja vielleicht noch in einigen Bereichen sinnvoll sein, aber privat möchte ich eigentlich nicht so ein Ungetüm haben. Laptops werden sicher auch nicht so bald 35" haben...

    Ich denke also nicht, dass sich der Mensch ein grundsätzlich anderes Lesen angewöhnen wird. Vielmehr erreichen die Monitor langsam eine Größe, bei der es sich lohnt den Browser nicht immer in Fullscreen laufen zu lassen. Beim Mac gibt es doch schon so weit ich weiß die Funktion, dass man ein Fenster nur auf eine bestimmte Größe immer wieder maximieren kann. So kann man sich seinen Desktop viel besser einteilen.

    Bücher werden wird weiterhin in recht schmalen Spalten lesen - da entspricht die heutige Internetseite doch recht gut der Printdarstellung.

    Ich würde da vor einem Blick in das was CSS kann zuerst einen Blick in wissenschaftliche Arbeiten werfen, was denn der Mensch braucht um gut lesen zu können.

    Nur weil man im Browser ein Zeitungslayout nachstellen kann muss das nicht gut sein. Obwohl das sicher schick aussehen würde.

    100% geht bei solchen Breiten IMHO gar nicht. Eine Zeile, die 250 Wörter lang ist, will doch niemand lesen. Und ich will das auch nicht in 25 Spalten lesen.

    Ich fand es gut, dass ihr so schön deutlich beschrieben habt, was man in Zukunft machen kann und ich fand es gut, dass ihr auch darauf hingewiesen habt, dass man diese Techniken dann auf jeden Fall mit Vorsicht nutzen soll.

  • Ist ja alles in Ordnung, ich weiß ungefähr wie schwer es ist jede Woche sinnvolle, interessante Dinge zu erzählen. Immerhin habe ich selbst eine Wöchentliche zweistündige Radiosendung. Da darf ich dann aber zum glück genau so Musik spielen wie die Hörer zutexten. Sonst würde ich persönlich das gar nicht hinbekommen. Ja, die Zeit ;)
    Ich wollte niemandem zu nahe treten, sondern habe mich einfach gefreut, dass es wieder bergauf geht.
    Übrigens ist dies hier auch eine Sendung, welche lust auf mehr macht ^^

Kommentar hinterlassen

Mit dem Absenden stimmst du zu, dass deine eingegebenen Daten gespeichert und als Kommentar veröffentlicht werden dürfen (weitere Infos in der Datenschutzerklärung). Dein Beitrag spiegelt deine persönliche Meinung wider – bitte behandle andere respektvoll und halte dich an geltendes Recht. Rechtswidrige Inhalte behalten wir uns vor zu entfernen.