WordPress Themes entwickeln – nützliche Links

Funktions Referenz
Codex offizielle Funktions Referenz von WordPress

Basis Template für den Aufbau eines eigenen Themes
HTML5 Blank WordPress Theme

Anleitung wie man ein sogenannten „Child Theme“ anlegt, also ein eigenes Theme auf Grundlage eines bestehenden Themes, welches weiterhin uneingeschränkt updatefähig bleiben soll.
Die Netzialisten – Anleitung Childtheme anlegen (Update) (11. JUNI 2015)

responsive Raster Layouts mit Scripten umsetzen

Zur Umsetzung komplexer, verschachtelter Layouts, die auf allen Geräten und in allen Auflösungen funktionieren sollen empfiehlt es sich auf JavaScript-basierte Lösungen zurückzugreifen.

Mit folgenden Lösungen habe ich bereits gearbeitet, je nach Layout-Anforderungen ist ein anderes Script zu wählen:

  1. CrazySquirrel CSTiles (sehr umfangreich, für starre Rasterlayouts mit einem festen Seitenverhältnis, Raster-Elemente sind also voneinander abhängig damit sie korrekt dargestellt werden können in Anordnung/Größe)
  2. Masonry (weit verbreitete Lösung, allerdings nur für gewollt chaotisch angeordnete Elemente mit unterschiedlichen Seitenverhältnissen einsetzbar, die nicht exakt aneinander ausgerichtet werden müssen und somit keine festen Seitenverhältnisse haben müssen)
  3. masonJS (für starre Rasterlayouts mit einem festen Seitenverhältnis)

 

Als Grundlage können u.a. auch diverse CSS-Frameworks dienen: http://t3n.de/news/7-grid-systeme-webworkern-leben-437929/

Guidelines für sauberen Code und strukturelle, effiziente Arbeitsweise

Don’t be a dictator
A styleguide is a good starting point and a good tool. But it’s important to also give some freedom to your team. It’s your job to find the right balance!

(CLÉMENCE DEBAIG von shakeupid.com – A STYLE GUIDE IS A POWERFUL MANAGEMENT TOOL)

Frontend Dev Workflow Schritte

…von NULL an…

 

  1. Editoren einrichten
    1. z.B Adobe Brackets (brackets.io/)
    2. oder Netbeans
    3. oder Notepad ++
    4. oder PHPStorm
  2. install node.js (nodejs.org/en/)
  3. install git (git-scm.com/)
  4. install ruby (rubyinstaller.org/)
  5. install SASS (sass-lang.com/install)
  6. WINDOWS Rechts-Klick „git bash here“
  7. install grunt
  8. install compass (compass-style.org/install/)
  9. Frontend Framework vorbereiten
    1. z.B. Bootstrap (www.npmjs.com/package/bootstrap-sass#b-compass-without-rails)
      $ compass create my-new-project -r bootstrap-sass –using bootstrap
    2. Foundation
    3. ……………oder oder (usablica.github.io/front-end-frameworks/compare.html)

Vorbilder in der Web-Branche

meine persönlichen Vorbilder in der Branche, professionell, ruhig, strukturiert, redegewandt:

  1. Jonas Hellwig
    • Firma: kulturbanause.de/ (Berlin)
    • Blog: blog.kulturbanause.de/
    • Experte im Gebiet: Responsive Design, WordPress, Photoshop und Workflow-Optimierungen im Web Design
  2. Chris Coyier
    • Firma: http://chriscoyier.net/ | Designer at CodePen | Writer at CSS-Tricks | Podcaster at ShopTalk
    • Blog: css-tricks.com
    • Experte im Gebiet: Webdesign, CSS und viiiiiiiel mehr (schreibt viel, redet viel, probiert viel aus) -> chriscoyier.net/interviews/
  3. Kore Nordmann
    • Firma: qafoo.com (Dinslaken)
    • Blog: qafoo.com/blog
    • Experte im Gebiet: professionelle Open-Source-Projekte auf Basis von PHP
  4. Peter Müller
    • Firma: pmueller.de
    • Blog: pmueller.de/blog.html, little-boxes.de/
    • Experte im Gebiet: Autor und Dozent für Webdesign und Entwicklung mit HTML/CSS/JS
  5. Dr. Florence Maurice
    • Firma: maurice-web.de/
    • Blog: maurice-web.de/blog
    • Experte im Gebiet: Trainerin/Autorin im Bereich HTML & CSS, fortgeschrittene CSS-Themen, Responsive Webdesign und PHP
  6. Peer Wandiger
    • selbständiger Webdesigner, Programmierer und langjähriger Blogger
    • Blog: selbstaendig-im-netz.de
    • Experte im Gebiet: Selbständigkeit und Existenzgründing im Internet/Online-Business, SEO, Online-Recht, uvm.

…Liste wird stetig ergänzt… 🙂

live.js – entwickeln ohne „F5“-Refresh der Seite

livejs.com

Say goodbye to Alt-Tab. Live.js makes sure you’re always looking at the latest version of the page you’re working on, whether you’re writing HTML, CSS or Javascript.

will monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server.

Quelle: http://livejs.com/ von Martin Kool

Brackets – quelloffener Code-Editor ür Web- und Frontend-Entwickler

brackets.io

Versprechen der Entwickler:

Ein moderner, quelloffener Code-Editor, der Webdesign versteht.

Mit tollen visuellen Tools und Unterstützung für Präprozessoren ist Brackets ein moderner Editor, der es dir leicht macht, im Browser zu designen. Er wurde von Vornherein für Web- und Frontend-Entwickler entwickelt.

Brackets ist ein einfacher, aber dennoch leistungsfähiger Editor. Er blendet dir hilfreiche Tools immer dann ein, wenn sie gerade passen, ohne dich jedoch von deiner kreativen Arbeit abzulenken. Du wirst es lieben, Code mit Brackets zu schreiben.

[..]Brackets ist quelloffen und wird von einer aktiven und leidenschaftlichen Community unterstützt.[..]

Quelle: http://brackets.io/

FAZIT:

Das Photoshop Plugin ist nützlich, so kann man direkt Farben, Abmaße, Schriften etc. aus der Photoshop-Datei ziehen was die Zusammenarbeit mit dem Designer sehr erleichert.
Der Editor scheint mir nur für kleine Projekte nützlich zu sein, muss man zwischen vielen Dateien hin und her wechseln wird es umständlich.
Die Einrichtung des Editors erfordert zunächst sehr viel Zeit und Recherche, da viele Standardfunktionen und fehlen und mühsam nachinstalliert werden müssen.
Für mich ist er somit leider nichts, vielleicht bin ich inzwischen auch vom Premium Editor „PHPStorm“ verwöhnt.

Logo oder Grafik scharf in allen Auflösungen und Zoom-Stufen darstellen

Wenn Sie eine Grafik (Firmenlogo, Icon oder Symbol etc.) bereits als Vektor-Grafik (aus Adobe Illustrator/InDesign o.a. Vektor-basierte Software) vorliegen haben, dann können sie die Möglichkeit in Erwägung ziehen diese Grafik als SVG in ihre Seite einzubinden, mehr über diese Technik erfahren Sie hier:

W3 Schools SVG Tutorial

SVG graphics do NOT lose any quality if they are zoomed or resized

Die Browser-Unterstützung (caniuse.com) ist mittlerweile sehr gut. Beim IE gibt es Schwierigkeiten bei der Skalierung („IE9-11 desktop & mobile don’t properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.“ (caniuse.com – Tipp).

Nützlicher weiterführender, ausführlicher Artikel: Wie Sie Ihre Website für Retina optimieren: Scharfe Bilder und trotzdem schnell (von digitalmobil.com)

 

HTML E-Mail Referenz

Bei der Umsetzung eines HTML E-Mail-Templates gibt es einiges zu beachten, denn E-Mail-Programme interpretieren den HTML-Code noch anders als dies die heutigen modernen Browser können. Bei HTML für E-Mails muss man auf alte Techniken zurückgreifen, aus Zeiten als man Webseiten auf Grundlage von Tabellen gestaltete. Für den Anfang hilft diese Seite weiter:

MailChimp – Email Design Reference