{"id":4596,"date":"2016-12-05T15:57:33","date_gmt":"2016-12-05T14:57:33","guid":{"rendered":"http:\/\/loewin.de\/blog\/?page_id=4596"},"modified":"2016-12-05T16:10:44","modified_gmt":"2016-12-05T15:10:44","slug":"a_beispiel","status":"publish","type":"page","link":"https:\/\/www.loewin.de\/blog\/a_beispiel\/","title":{"rendered":"A_Beispiel"},"content":{"rendered":"
\n

Anleitung f\u00fcr einen digitalen Adventskalender \u2013 Finale<\/h1>\n

Der finale Kalender. Funktioniert f\u00fcr Tastatur-Nutzer. Responsive Design.<\/p>\n

Aus rechtlichen Gr\u00fcnden gibt es hier nur das Bild einer Textur. Ihr bekommt die Illustration aus dem Beispiel (\u00bbFloral-Ribbon Christmas Tree\u00ab von fangol) kostenlos via sxc.hu<\/a>, wir k\u00f6nnen das Bild aber nicht einfach so weitergeben.<\/p>\n

Auch in diesem Jahr bieten wir euch jeden Tag Wissenswertes rund um Webstandards, Barrierefreiheit, Tools, Usability oder SEO. Neben der Kalender-Ansicht k\u00f6nnt ihr auch eine \u00bbtraditionelle\u00ab Artikel-Liste des Adventskalenders<\/a> nutzen.<\/span><\/p>\n

    \n
  1. Responsive Images
    \n

    Optimiert f\u00fcr Gro\u00df und Klein<\/h2>\n

    von Christoph Zillgens am 1.12.2012<\/p>\n

    Responsive Webdesign macht seit geraumer Zeit die Runde. W\u00e4hrend sich langsam Best Practices und sinnvolle Techniken etablieren, gibt es einen Bereich, der etwas kniffliger zu l\u00f6sen ist: Die Rede ist von Responsive Images \u2013 reaktionsf\u00e4higen Bildern, f\u00fcr die an einer HTML-Erweiterung gearbeitet wird.<\/p>\n

    1<\/span><\/div>\n<\/li>\n
  2. Adobe Brackets
    \n

    Ein Webeditor f\u00fcr Webworker?<\/h2>\n

    von Matthias Slovig am 2.12.2012<\/p>\n

    Mit Brackets geht Adobe neue Wege in Sachen Quellcodeeditoren f\u00fcrs Web. Die Live Preview macht es unn\u00f6tig, die Seite im Browser st\u00e4ndig neu zu laden. Per Quick Edit l\u00e4sst sich CSS direkt in der HTML-Datei bearbeiten. Die neuen Ans\u00e4tze k\u00f6nnten die t\u00e4gliche Arbeit eines jeden Webworkers erleichtern.<\/p>\n

    2<\/span><\/div>\n<\/li>\n
  3. Build-Tool f\u00fcr Webworker
    \n

    (Bessere) Projekt-Pakete schn\u00fcren mit Grunt<\/h2>\n

    von Frederic Hemberger am 3.12.2012<\/p>\n

    Mit Grunt gibt es ein neues Tool, das hilft, wiederkehrende Aufgaben in Frontend-Projekten zu automatisieren. Einmal konfiguriert ist das Testen und Ausliefern selbst bei umfangreichen Projekten problemlos m\u00f6glich \u2013 und eignet sich so auch f\u00fcr die gemeinsame Entwicklung in Teams.<\/p>\n

    3<\/span><\/div>\n<\/li>\n
  4. Techniken zur Schriftgl\u00e4ttung
    \n

    Vom Vektor zum Pixel: Rasterizer<\/h2>\n

    von Gerrit van Aaken am 4.12.2012<\/p>\n

    Digitale Fonts sind meist aus Vektoren aufgebaut. Um diese auf dem pixelbasierten Bildschirm darzustellen, muss sich das Betriebssystem etwas einfallen lassen. Die verschiedenen sogenannten Rasterizer von Windows, OS X und Co. setzen dabei unterschiedliche visuelle Schwerpunkte.<\/p>\n

    4<\/span><\/div>\n<\/li>\n
  5. CMS
    \n

    ProcessWire<\/h2>\n

    von Michael van Laar am 5.12.2012<\/p>\n

    Webdesigner, die m\u00f6glichst schnell vom HTML-Dummy zu einer funktionierenden Website gelangen wollen, sollten einen Blick auf das CMS ProcessWire werfen. ProcessWire ist zwar noch nicht sehr verbreitet. Doch es besticht durch seine Reduktion aufs Wesentliche und seine gro\u00dfe Flexibilit\u00e4t.<\/p>\n

    5<\/span><\/div>\n<\/li>\n
  6. Adobe Fireworks – Pl\u00e4doyer f\u00fcr den Einsatz mediengerechter Software
    \n

    Arbeiten am Rande der Effizienz<\/h2>\n

    von Olaf Gleba am 6.12.2012<\/p>\n

    Obgleich alleine der Name der Software Adobe Photoshop kaum Zweifel daran l\u00e4sst, welchen Anwendungsbereich der Hersteller f\u00fcr die Software vorsieht, wird sie von vielen Webworkern kurioserweise f\u00fcr das grafische Design von Webanwendungen eingesetzt. Auch wenn mit Fireworks vom selben Anbieter eine dezidierte Software f\u00fcr diesen Aufgabenbereich angeboten wird. Ein pointierter Einblick in den Alltag eines freiberuflichen Designers.<\/p>\n

    6<\/span><\/div>\n<\/li>\n
  7. CSS-Modularisierung mit Sass
    \n

    Komplexe Stylesheets strukturieren<\/h2>\n

    von Mathias Sch\u00e4fer am 7.12.2012<\/p>\n

    Sass ist eine Meta-Sprache, mit der sich CSS cleverer schreiben l\u00e4sst. Das neue Sass-Feature der Platzhalter-Selektoren macht insbesondere komplexes CSS wartbarer.<\/p>\n

    7<\/span><\/div>\n<\/li>\n
  8. HTML5
    \n

    Kleiner Fallstrick bei Videos<\/h2>\n

    von Jens Grochtdreis am 8.12.2012<\/p>\n

    Mit dem eigenen Video-Element sollten in HTML5 alle Probleme gel\u00f6st sein, die wir mit Flash jemals hatten. Doch so ganz stimmt das leider nicht.<\/p>\n

    8<\/span><\/div>\n<\/li>\n
  9. SEO vs. Usability
    \n

    Gemeinsam klappt es besser<\/h2>\n

    von Stefan David am 9.12.2012<\/p>\n

    Von Seiten der Webentwickler gibt es oftmals Vorbehalte gegen die Arbeit von Suchmaschinenoptimierern. Das angespannte Verh\u00e4ltnis zwischen den beiden und die ggf. unterschiedlichen Sichtweisen zeigten sich z. B. bei einem aus Usabilitysicht misslungenen Relaunch und der nachfolgenden Diskussion. Ein Pl\u00e4doyer f\u00fcr die verbesserte Zusammenarbeit \u2013 statt die Gr\u00e4ben zu vertiefen.<\/p>\n

    9<\/span><\/div>\n<\/li>\n
  10. Icon Fonts
    \n

    Visuelle Semantik neu entdecken<\/h2>\n

    von Henry Zeitler am 10.12.2012<\/p>\n

    Icons sind, wenn richtig eingesetzt, bedeutungsvoll und intuitiv. Sie f\u00fchren den Benutzer einer Website zur gew\u00fcnschten Aktion und sind somit ein wichtiger Blickfang. Heute, in Zeiten der Optimierung f\u00fcr Mobile-Devices und besonders des Responsive Webdesigns erfahren die Icons als Fonts eine Renaissance.<\/p>\n

    10<\/span><\/div>\n<\/li>\n
  11. CSS3 Flexbox
    \n

    Abl\u00f6sung f\u00fcr Float-Layouts<\/h2>\n

    von Stephan Heller am 11.12.2012<\/p>\n

    Mehrspaltige Designs setzen Webworker heutzutage mit Floats um. Das mag sich in Zukunft \u00e4ndern. Denn mit dem CSS3-Modul Flexbox steht eine n\u00fctzliche Alternative in den Startl\u00f6chern. HTML-Elemente k\u00f6nnen damit spalten- oder zeilenweise angezeigt werden, die Reihenfolge der Elemente l\u00e4sst sich steuern und Breiten oder H\u00f6hen passen sich automatisch an.<\/p>\n

    11<\/span><\/div>\n<\/li>\n
  12. Erweiterungen f\u00fcr Adobe Fireworks
    \n

    Noch schneller und effektiver designen<\/h2>\n

    von Michel Balzer am 12.12.2012<\/p>\n

    In der letzten Woche haben wir euch Fireworks f\u00fcrs Webdesign ans Herz gelegt. Heute gibt es einen Nachschlag. Es geht darum, den Funktionsumfang von Fireworks mit Erweiterungen zu verbessern.<\/p>\n

    12<\/span><\/div>\n<\/li>\n
  13. Authoring Tool Accessibility Guidelines 2.0
    \n

    Barrierefreiheit f\u00fcrs Backend<\/h2>\n

    von Kerstin Probiesch am 13.12.2012<\/p>\n

    Barrierefreiheit ist mehr als \u00e4u\u00dferliche Kosmetik. Auch die inneren Werte z\u00e4hlen \u2013 nicht nur Webseiten und Webapplikationen sollten barrierefrei sein, sondern auch die Werkzeuge und Redaktionssysteme, mit denen sie erzeugt werden. Mit der ATAG 2.0 reift daf\u00fcr eine Richtlinie heran.<\/p>\n

    13<\/span><\/div>\n<\/li>\n
  14. Frontendentwicklung
    \n

    Stets zu Diensten: Yeoman<\/h2>\n

    von Ralf Graf am 14.12.2012<\/p>\n

    Moderne Frontendentwicklung ben\u00f6tigt viele Bibliotheken und Werkzeuge. Yeoman verspricht, diese als installierbare Pakete zug\u00e4nglich zu machen und in einen einheitlichen Workflow zu packen.<\/p>\n

    14<\/span><\/div>\n<\/li>\n
  15. Sublime Text 2
    \n

    Ein Texteditor zum Verlieben<\/h2>\n

    von Matthias Mees am 15.12.2012<\/p>\n

    \u00bbAller Anfang ist schwer\u00ab \u2013 das gilt auch f\u00fcr Texteditoren. Sublime Text 2 ist grunds\u00e4tzlich einfach gehalten, aber leicht erweiterbar. Er versucht, den Einstieg mit ein paar interessanten Bedienkonzepten zu erleichtern, die das m\u00fchsame Erlernen und Verinnerlichen von Tastaturk\u00fcrzeln leichter machen sollen.<\/p>\n

    15<\/span><\/div>\n<\/li>\n
  16. Client-Server-Kommunikation mit Socket.io
    \n

    Wenn\u2019s mal wieder schneller gehen muss\u2026<\/h2>\n

    von Frederic Hemberger am 16.12.2012<\/p>\n

    Will man Informationen m\u00f6glichst in Echtzeit zwischen Client und Server austauschen, kann das Nachladen von Inhalten in Intervallen mittels Ajax zu unpraktisch sein. Eine einfache, aber vielseitig einsetzbare Methode bietet Socket.io.<\/p>\n

    16<\/span><\/div>\n<\/li>\n
  17. Meinung: Ausnahmen von Best Practices
    \n

    Darf man nicht? Darf man wohl!<\/h2>\n

    von Nicolai Schwarz am 17.12.2012<\/p>\n

    Geht nicht! Gibt\u2019s nicht! Darf man nicht! Bei bestimmten Themen wei\u00df jeder Webworker reflexartig, was sich geh\u00f6rt und wie man es richtig macht. Alles andere ist b\u00f6se! Darf das HTML oder CSS vielleicht auch mal nicht validieren? Darf ein Webworker target=“_blank“ nicht doch benutzen? Darf er nicht? Doch, darf er. Wenn er einen guten Grund daf\u00fcr vorweisen kann.<\/p>\n

    17<\/span><\/div>\n<\/li>\n
  18. Der heutige Artikel wird im Laufe des Vormittags ver\u00f6ffentlicht.\n
    18<\/span><\/div>\n
    <\/div>\n<\/li>\n
  19. Dieses T\u00fcrchen \u00f6ffnet sich erst am 19. Dezember.\n
    19<\/span><\/div>\n
    <\/div>\n<\/li>\n
  20. Dieses T\u00fcrchen \u00f6ffnet sich erst am 20. Dezember.\n
    20<\/span><\/div>\n
    <\/div>\n<\/li>\n
  21. Dieses T\u00fcrchen \u00f6ffnet sich erst am 21. Dezember.\n
    21<\/span><\/div>\n
    <\/div>\n<\/li>\n
  22. Dieses T\u00fcrchen \u00f6ffnet sich erst am 22. Dezember.\n
    22<\/span><\/div>\n
    <\/div>\n<\/li>\n
  23. Dieses T\u00fcrchen \u00f6ffnet sich erst am 23. Dezember.\n
    23<\/span><\/div>\n
    <\/div>\n<\/li>\n
  24. Dieses T\u00fcrchen \u00f6ffnet sich erst am 24. Dezember.\n
    24<\/span><\/div>\n
    <\/div>\n<\/li>\n<\/ol>\n

    Dieser Adventskalender nutzt CSS3-Transitions. Der Effekt funktioniert in allen modenen Browsern, aber \u00bbnat\u00fcrlich\u00ab nicht im Internet Explorer 8 oder 9 (dort werden aber die Titel angezeigt und die Links funktionieren auch).<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Anleitung f\u00fcr einen digitalen Adventskalender \u2013 Finale Der finale Kalender. Funktioniert f\u00fcr Tastatur-Nutzer. Responsive Design. Aus rechtlichen Gr\u00fcnden gibt es hier nur das Bild einer Textur. Ihr bekommt die Illustration aus dem Beispiel (\u00bbFloral-Ribbon Christmas Tree\u00ab von fangol) kostenlos via … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0},"_links":{"self":[{"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/pages\/4596"}],"collection":[{"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/comments?post=4596"}],"version-history":[{"count":4,"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/pages\/4596\/revisions"}],"predecessor-version":[{"id":4601,"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/pages\/4596\/revisions\/4601"}],"wp:attachment":[{"href":"https:\/\/www.loewin.de\/blog\/wp-json\/wp\/v2\/media?parent=4596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}