Webdesign Archive - oreillyblog

CSS Secrets 3/3: Spaltenbreiten in Tabellen zähmen

Corina Pahrmann — Fri, 05 Jan 2018 07:31:45 +0000

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir im oreillyblog. Auf Silbentrennung und Checkbox-Design folgt „Spaltenbreite in Tabellen zähmen“. Das Problem Auch wenn wir schon vor langer Zeit aufgehört haben, Tabellen für das Layout zu benutzen, haben sie auch auf modernen Websites noch ihre Berechtigung. Tabellen werden benutzt, um tabellarische Daten (Statistiken, E-Mails, Listen von Dingen mit vielen Metadaten und vieles andere) darzustellen. Außerdem können wir andere Elemente dazu bringen, sich wie Tabellenelemente zu verhalten, indem wir die tabellenspezifischen Schlüsselwörter für die Eigenschaft display verwenden. Obwohl ihre Benutzung gelegentlich sehr bequem zu sein scheint, ist das Layout von Tabellen bei dynamischen Inhalten nur schwer vorherzusagen. Der Grund ist, dass die Spaltenbreite dem vorhandenen Inhalt angepasst wird, wobei selbst explizite width-Angaben eher als eine Art Empfehlung interpretiert werden, wie in Abbildung 7.5 zu sehen ist. Aus diesem Grund benutzen wir oft andere Elemente für tabellarische Daten, oder wir finden uns damit ab, nicht alles vorhersagen zu können. …

Der Beitrag CSS Secrets 3/3: Spaltenbreiten in Tabellen zähmen erschien zuerst auf oreillyblog.

CSS Secrets 1/3: Silbentrennung

Corina Pahrmann — Fri, 17 Nov 2017 07:55:31 +0000

In ihrem Buch „CSS Secrets“ versammelte die international bekannte CSS-Spezialistin Lea Verou 47 Techniken, wie sich mit elegantem, klarem CSS-Code typische Webdesign-Probleme lösen lassen. Drei dieser Code-Schnipsel veröffentlichen wir nun im oreillyblog. Wir beginnen mit CSS Secret Nr. 20 aus dem Kapitel „Typografie“: Silbentrennung. Das Problem Designer lieben Blocksatz. Wenn Sie sich ein beliebiges, gut designtes Magazin oder Buch ansehen, ist er ständig zu sehen. Im Web wird der Blocksatz dagegen eher selten verwendet und von geschickten Designern eher noch weniger. Warum ist das so, obwohl wir doch schon seit CSS 1 text-align: justify; definieren können? Der Grund wir klar, wenn Sie sich die folgende Abbildung ansehen. Typografen sprechen hier von einem „Gießbach“ aus Leerraum, der entsteht, wenn die Wortabstände angepasst werden müssen, um den Blocksatz zu erzeugen. Das sieht nicht nur unschön aus, es behindert auch die Lesbarkeit. Im Druck geht der Blocksatz Hand in Hand mit der Silbentrennung. Durch das Fortführen eines Worts auf der folgenden Zeile muss deutlich weniger Leerraum eingefügt werden, wodurch der Text wesentlich natürlicher wirkt. Lösungen für die Silbentrennung im Web gibt es einige. Allerdings …

Der Beitrag CSS Secrets 1/3: Silbentrennung erschien zuerst auf oreillyblog.

E-Book-Deal im Oktober: CSS Secrets

Corina Pahrmann — Mon, 09 Oct 2017 10:58:44 +0000

Rücken wir doch Webdesign-Problemen mit Code zu Leibe: Lea Verou zeigt uns, wie es geht. Ihr Buch „CSS Secrets“ gibt es jetzt günstiger. Dass Lea Verou eine Virtuosin ist, haben wir hier schon erläutert. Immer wieder programmiert sie ihrem staunenden Publikum auf internationalen Web-Konferenzen etwas vor. Und in ihrem Buch „CSS Secrets“ versammelte sie 47 Techniken, wie sich mit CSS-Code Formen bauen, Text in Kreise gießen oder Bilder mit einem Milchglas-Effekt versehen lassen. Oder oder. Wir feiern das einjährige Jubiläum unserer deutschen Ausgabe – mit einem Sonderpreis für das E-Book: Nicht vergessen: Die E-Book-Aktion ist auf den Monat Oktober begrenzt, dafür könnt Ihr die E-Books aber in jedem Shop Eures Vertrauens kaufen, der Preis ist überall gleich. Unsere E-Books sind natürlich DRM-frei.

Der Beitrag E-Book-Deal im Oktober: CSS Secrets erschien zuerst auf oreillyblog.

Neuerscheinung: CSS Secrets

Corina Pahrmann — Thu, 24 Nov 2016 10:23:28 +0000

Lea Verou ist mit gerade einmal 30 Jahren bereits eine Webdev-Koryphäe und auf großen internationalen Konferenzen zuhause. Jetzt haben wir sie auch im O’Reilly-Programm – mit „CSS Secrets: Typische Webdesign-Probleme klug gelöst“. „I am Lea, and this is Mr Border-Radius“: So leitet Lea Verou ihren Talk auf der 2014er Fluent Conf ein. Und macht sich dann auf, ihr Publikum erst von der oft abgesprochenen Coolness der runden Ecken zu überzeugen. Und schließlich auch davon, dass die CSS-Auszeichnung noch viel mehr bietet als eben nur das Abrunden geometrischer Figuren. Sie zeigt beispielsweise, wie sich Ellipsen erstellen lassen. Oder halbe Ellipsen. Auch Viertel-Ellipsen. Nun könnte man diese Figuren auch mit Images einbinden. Per CSS-Code aber, erklärt Lea, lassen sie sich animieren. Dazu fügt sie ein, zwei, drei, ok… manchmal drölfzig Attribute in die CSS-Anweisungen und formt die Pixel gerade so, wie andere Vasen töpfern. Wer ihr zusieht, wundert sich nicht mehr, dass ihr bisweilen Zauberkräfte zugesprochen werden. Oder, wie „King of Web Standards“ Jeffrey Zeldman sagt: „Niemand versteht es besser, dieses neue CSS zu vermitteln, als Lea Verou; sie zählt zu …

Der Beitrag Neuerscheinung: CSS Secrets erschien zuerst auf oreillyblog.

Was ist Sass?

Alexander Plaum — Thu, 21 Jul 2016 07:28:08 +0000

Wir hatten da mal eine virtuelle Redaktionssitzung und herausgekommen ist das hier: Ein kurzer Wissensaustausch rund um das zügige modulare CSS-Basteln mit Sass. Corina Pahrmann: Du, Alex? Alexander Plaum: Jau, was gibt’s? CP: Magst du vielleicht noch mal einen Erklärbär-Post schreiben? AP: Nicht lieber was über Filme oder Games? CP: Nee, komm… ein Fachbegriff. AP: Na gut. Welcher? CP: Wie wär’s mit Sass? AP: Sass ist ziemlich cool. Und praktisch! Gibt’s jetzt schon fast zehn Jahre, kennen aber längst nicht alle. CP: Ich weiß. Deswegen solltest du ja auch erklären, was das ist. :-) AP: Äh… Der Begriff ist ein Akronym und steht für „Syntactically Awesome Stylesheets“. Es geht also um Webdesign, genauer gesagt: Um eine aufgepimpte Version von CSS. Was CSS ist, wissen aber alle, oder? CP: Klar, ich schätze schon. AP: Ok. CSS ist ja bekanntlich keine richtige Programmiersprache – und kommt eher repetitiv/unelegant daher. Und an dieser Stelle setzten Hampton Catlin und seine Mitentwickler an. CP: Und zwar wie? AP: Nun, Sass ermöglicht es, CSS mit Variablen, Funktionen, Loops und solchen Sachen zu erweitern. Es ist übrigens ein sogenannter …

Der Beitrag Was ist Sass? erschien zuerst auf oreillyblog.

Kartenverlosung zum BrainCamp#4 am 25. & 26. April in Köln

Anja Bilstein — Tue, 14 Apr 2015 13:42:58 +0000

Am 25. und 26. April findet das BrainCamp zum bereits vierten Mal statt. Wer sich für das große, weite Web und die Technologien dahinter interssiert, gerne an Digitalem bastelt oder sich für das Design begeistert, wer im Netz sein zweites Zuhause hat – der ist beim BrainCamp genau richtig. Und hier das Beste: Wir verlosen eine Karte für das BrainCamp#4! Wer das BrainCamp 2Tages Ticket gewinnen möchte, einfach hier einen Kommentar abgeben oder eine kurze Mail an verlosung@oreilly.de schicken. Teilnahmeschluss ist am Freitag, 17.04.2015, um 12 Uhr. Der Gewinner wird noch am Freitag ausgelost und benachrichtigt. Der Rechtsweg ist ausgeschlossen. Und wer auf Nummer sicher gehen wil: Ein Ticket könnte Ihr gleich hier erwerben (schnell sein lohnt sich, es sind nur noch ein paar da :) ). Auf einen Blick: Wann: 25.-26. April 2015 Wo: STARTPLATZ, Im Mediapark 5, 50670 Köln Was: Mobile, Web- und Softwareentwicklung & -Design

Der Beitrag Kartenverlosung zum BrainCamp#4 am 25. & 26. April in Köln erschien zuerst auf oreillyblog.

Responsive Webdesign von Kopf bis Fuß

Alexander Plaum — Thu, 21 Feb 2013 11:38:17 +0000

Wenn ich den Terminus „Media Queries“ in den Raum werfe, wissen wohl zunächst nur routinierte Webentwickler, was gemeint ist. Der mit diesem Konzept verbundene Überbegriff ist allerdings derzeit in aller Munde: Responsive Webdesign. Hier geht es (grob gesagt) darum, eine Website so zu bauen, dass sie auf das Gerät reagiert, mit dem sie betrachtet wird, also eine „Response“ liefert. Diese Reaktion zeigt sich vor allem daran, dass Navigationsleisten, Spalten und Textfelder immer genau die richtige Größe haben. Vorbei die Zeit, als z.B. Seiten von Nachrichtenportalen auch auf dem Mobiltelefon sture 1000 Pixel breit waren und nur per Horizontal-Scroll- und Zoomorgien gelesen werden konnten. Grundlage für das Responsive Webdesign sind die neuen Webstandards HTML5 und CSS3 (vor allem letzteres). Grundlage für den Umgang damit ist u.a. unser neuer Head-First-Titel „Mobiles Web von Kopf bis Fuß“. Das Probekapitel zu Media Queries & Co. haben wir frisch ausgekoppelt: Mobiles Web von Kopf bis Fuß from O’Reilly Verlag

Der Beitrag Responsive Webdesign von Kopf bis Fuß erschien zuerst auf oreillyblog.

I can’t believe it’s just CSS: Faszinierender Vortrag, bäriges Buch

Alexander Plaum — Mon, 14 May 2012 12:59:40 +0000

Wenn die Website bunt und abwechslungsreich bzw. grafik- und animationsorientiert sein soll, dann kommt man um JavaScript, WebGl oder Canvas nicht herum, oder? Stimmt gar nicht. Mit der nötigen Portion Kreativität, Bastelbereitschaft und Ehrgeiz gelingen auch mit CSS3 spektakuläre Effekte. In welche Richtung man dabei denken sollte, erklärt Webdesigner und -entwickler Chris Ruppel von Four Kitchens aus Austin in diesem Video, das Sie ausnahmsweise extern betrachtet müssen, da es hier nicht eingebettet werden kann. Besonders faszinierend finde ich die scheinbar endlosen (und ziemlich komplexen) Manipulationsmöglichkeiten beim guten, alten div-Element. In diesem Zusammenhang beachte man v.a. die im Vortrag vorgestellten 3D-Miniaturstädte, die ausschließlich mit CSS realisiert wurden. Hier ist natürlich eine Menge „Mental Origami“ vonnöten: Wer es zunächst etwas bodenständiger möchte bzw. nach praktischen Lösungen für immer wiederkehrende Design-Probleme sucht, wirft derweil einen Blick in unser Bärenbuch. Soeben ist eine neue, komplett überarbeitete Fassung erschienen: Christopher Schmitt und Jørgen W. Lang versorgen orientierungbedürftige Webdesigner darin mit 150 (!) bewährten CSS-Rezepten. Die Lektüre sorgt nicht nur für die Auffrischung von Basics und die Einführung in fortgeschrittene Techniken, …

Der Beitrag I can’t believe it’s just CSS: Faszinierender Vortrag, bäriges Buch erschien zuerst auf oreillyblog.

„Es ist nur eine Frage der Zeit, bis HTML5 von den meisten Browsern unterstützt wird.“ – Ein Interview mit Stefan Fröhlich

Viviane Kramer — Wed, 07 Sep 2011 09:50:14 +0000

HTML5 und CSS3 gewinnen in der Webprogrammierung immer mehr an Bedeutung – und das zu Recht. Denn schließlich bieten beide viele Neuerungen, die das Programmieren weiter vereinfachen werden. Doch was genau macht HTML5 und CSS3 so besonders? Zu diesem Thema hat uns Stefan Fröhlich, der Übersetzer des Buchs „HTML5 & CSS3„, Frage und Antwort gestanden. HTML5 ist in aller Munde – obwohl es noch nicht von allen Browsern unterstützt wird. Warum fasziniert es dennoch so viele Entwickler? Und warum sollte man sich gerade jetzt damit beschäftigen? Es ist nur eine Frage der Zeit, bis HTML5 von den meisten Browsern unterstützt wird. Außerdem werden viele Funktionen von HTML5 und CSS3 bereits auf unzähligen Websites verwendet. Da sich meist mit nur wenigen Zeilen Code ermitteln lässt, ob die einzelnen Features von der jeweiligen Kombination aus Betriebssystem und Browser unterstützt werden, ist es zudem auch relativ einfach, entsprechende Ausweichlösungen bereitzustellen. Auf diese Weise können Entwickler schon heute Websites mit HTML5 und CSS3 erstellen. Und können diese Hilfsmittel mit der zunehmenden Unterstützung durch die jeweiligen Browser Schritt für Schritt …

Der Beitrag „Es ist nur eine Frage der Zeit, bis HTML5 von den meisten Browsern unterstützt wird.“ – Ein Interview mit Stefan Fröhlich erschien zuerst auf oreillyblog.

Christian Crumlish kommt nach Berlin!

Barbara Müller — Tue, 12 Jan 2010 09:50:50 +0000

Christian Crumlish, Kurator der Yahoo! Design Pattern Library und Co-Autor des Buches „Designing Social Interfaces“ kommt nach Europa. Nach einem Vortrag in London, wird er am 21. Januar auch in Berlin über unterschiedliche Facetten des Social Web Design sprechen. Interaction Patterns, Design-Prinzipien und Anti-Patterns werden dort nicht zu kurz kommen. Nach dem Vortrag findet ein gemütliches Networking mit Austausch über das soeben Gehörte statt. Wir wünschen viel Spaß dabei! Berlin newthinking store GmbH Tucholskystr. 48 10117 Berlin Beginn: 19 Uhr am 21. Januar 2010 Hier können Sie sich anmelden: http://www.xing.com/events/ixda-berlin-yahoo-christian-crumlish-social-design-patterns-440319

Der Beitrag Christian Crumlish kommt nach Berlin! erschien zuerst auf oreillyblog.