Denn letzten Sonntag hab ich das Gröbste für einen Kundenauftrag erledigt und widme mich seitdem auch einem neuen Layout/Theme für Macnotes. Natürlich mache ich damit auf den ersten Blick tolle Fortschritte. Denn man hat „schnell mal“ was zusammengeschustert. Mir kommt es aber auch aufs Detail an und es gibt genügend Fallstricke, die über Wohl und Wehe entscheiden können.

Ich bin jedenfalls froh, dass ich Euch aktuell zeigen kann, was ich in der kurzen Zeit seit vergangenen Sonntag auf die Beine gestellt habe.

Neues Design in mehreren Phasen

Entsprechend werde ich aber trotzdem die Kirche zunächst im Dorf lassen und versuchen die Funktionalität von Macnotes jetzt nachzubauen, und aber den Schnickschnack für später übrig zu lassen. Beispielsweise möchte ich mittels Javascript Inhaltsverzeichnisse implementieren, wo dies angebracht erscheint, oder aber auch eine eigene Bildergalerie und womöglich auch ein Glossar etablieren. Das muss aber noch ein wenig warten.

Die neue Startseite

Stand heute habe ich die neue Startseite bereits „fertig“. Es fehlen dort im Prinzip Änderungen im Detail.

Die neue Startseite wird allerdings ein wenig von allem enthalten. Also aus bestimmten Kategorien die Inhalte bereitstellen. Sie erhält dafür keine Seiten-Navigation zum Blättern. Denn meines Erachtens ist sie dafür nicht gedacht.

Sehr wohl möchte ich aber mittelfristig auch die Usability erhöhen und habe damit bereits begonnen. Denn jeder Abschnitt der Startseite enthält eine Navigation, über die man zu den Abschnitten springen kann. Ein kleines Detail ist, dass das Pfeil-Symbol immer auch in die Richtung zeigt, in der sich der Bereich befindet (und selbstredend ist der sichtbare Bereich nicht gleichzeitig Teil der Navigation).

Sieht man mal vom Bild ab, das in meiner Entwicklungsumgebung fehlt, bin ich derzeit damit ganz zufrieden.

Die neue Artikelseite

Die neue Artikelseite zeigt, dass man ein Design nicht einfach so aus der Taufe heben kann. Sie gefällt mir noch nicht (ganz). Abstände und Details passen irgendwie noch nicht zusammen und wirken noch unrund. Aber zumindest kann sie sich trotzdem sehen lassen.

In der Seitenleiste gibt es zugehörige Firmen, Events, Plattformen, Personen und Produkte, wenn denn welche ausgewählt sind. Die Event-Seiten beispielsweise enthalten ihrerseits Links zu Nachrichten über das Event. So könnt Ihr dann bei der kommenden WWDC 2021 schon alle Meldungen an einer Stelle abrufen.

Am unteren Ende gibt es eine Vor- und Zurück-Navigation und außerdem „ähnliche Nachrichten“. Diese sind „hausgemacht“. Denn ich habe für WordPress und auch auf Macnotes schon vor Jahren eine zusätzliche Taxonomie eingerichtet, die jedoch unsichtbar ist. Ich frage dann Beiträge ab, die über gleiche „Keywords“ verfügen und gebe sie aber außerdem per Zufall wieder. Auf diese Weise möchte ich sowohl die Themenzugehörigkeit sicherstellen als auch die Neugier von Euch befriedigen. Denn vielleicht gibt es ja noch etwas zu lesen, das Ihr noch nicht kennt. Und also werden bei einem Seitenabruf regelmäßig neue ähnliche Beiträge angezeigt. Wie ich das technisch umgesetzt habe, darüber werde ich Euch auch „später“ (alias irgendwann und nicht heute) noch informieren, sodass Ihr das auf Euren Webseiten womöglich nachmachen könnt.

Auch hier fehlen bei meiner lokalen Installation einige Bilder, aber das soll Euch nicht weiter stören, weil es, wenn das neue Design live geht, anders sein wird.

Das neue Archiv

Auch für das/die Archiv(e) habe ich bereits angefangen ein neues Design anzulegen. Natürlich bekommen außerdem die Archive eine Seitennavigation. Denn dort macht sie Sinn.

Beim Überfahren der Bilder nutze ich CSS-Effekte, die ich leider im Standbild nicht wiedergeben kann. Aber auch das ist etwas, das ich Euch „später“ noch im Detail vorstelle, damit Ihr es eventuell auf Eurer Webseite nachmachen könnt.

Wenn ich allerdings „Effekte“ benutze oder Funktionen umsetze, dann möchte ich diese mit möglichst wenig Ressourcen am Browser einrichten. Umso dankbarer bin ich, dass es mittlerweile auch CSS-Effekte und -Animationen gibt. Also ich mit dem Web Ende der 1990er anfing lauteten die HTML-Befehle noch ganz anders und steckte Javascript noch in den Kinderschuhen. Heute ist vieles wesentlich eingängiger als damals. Doch meine Devise lautet: Ich werde keine Javascript-Bibliothek installieren, nur weil es womöglich einfacher ist. Sieht man davon ab, dass WordPress von Haus aus JQuery lädt, nutze ich für meinen Alltag sogenanntes „Vanilla Javascript“, für das man keine zusätzlichen Dinge laden muss.

Was noch fehlt

Hier und da muss ich auf jeden Fall noch am Kontrast schrauben. Ich bin selbst rot-grün-fehlsichtig. Entsprechend sind mir manche Farbkombinationen leider ein Dorn im Auge und muss ich entsprechend nachbessern. Es ist auch nicht ausgeschlossen, dass ich im Zuge der Arbeiten die Schriftarten noch auswechsle.

In jedem Fall werden ich versuchen sie lokal auf dem Webserver abzulegen, damit auch in diesem Fall keine Kommunikation mit fremden Server stattfinden muss.

Macnotes hab ich im November 2019 gekauft, wie ich es vorgefunden habe. Entsprechend gibt es noch super viel zu tun. Aber es kommt jetzt wieder ein wenig mehr Fahrt in die ganze Geschichte, selbst wenn es „noch“ nicht danach ausschaut.

Was schon da ist: Responsivität

Ja und in einer Angelegenheit habe ich aber auf ein Framework gesetzt, und zwar ein CSS-Framework. Dabei wollte ich vor allem eines, das nicht zu viele Features bietet und von Haus aus eher einen kleinen „Fußabdruck“ hinterlässt. Mit Bulma denke ich, hab ich eine gute Alternative gefunden. Denn ich habe in der Vergangenheit auch mit anderen, deutlich größeren Frameworks gearbeitet, wie beispielsweise Bootstrap, Foundation oder Materialize. Ausprobieren möchte ich irgendwann auch noch Tailwind. Aber wenn man Fortschritte erzielen möchte, dann muss man Entscheidungen treffen, und also fiel die Wahl auf Bulma, weil es mir nicht ganz fremd war und ich die überschaubare Größe schätze.

In jedem Fall habe ich auch die „Responsivität“ im Blick. Ein Thema in diesem Zusammenhang sind natürlich auch die Überschriften oder Typographie im Allgemeinen. Denn es gibt zwar Lösungen, aber die sind entweder sehr komplex oder eben begrenzt einsatzfähig. Wie ich dieses Problem gelöst habe, werde ich auch an anderer Stelle explizit breittreten. ;)

So in etwa sieht dann das neue Macnotes auf dem iPhone aus: Also zumindest, wenn Google Euch keine AMP-Version liefert.

Mittelfristig möchten wir auch dafür eine eigenständige Lösung anbieten. Aber vermutlich macht es da mehr Sinn, gleich ein eigenes CMS zu programmieren, was durchaus auf unserem Schmierzettel als Idee vermerkt ist.

Falls Euch das Thema langweilt, habt Ihr hoffentlich nicht zu viel von dem Beitrag gelesen. Ansonsten sind wir auch gerne offen für Feedback schon zu diesem frühen Zeitpunkt, damit wir das neue Macnotes schon in der Entwicklungsphase optimieren können. Das ist auch der Grund, warum ich diesen Wasserstand loswerden wollte.

Der Beitrag Wasserstand #16: Es geht wieder weiter erschien zuerst auf Macnotes.de.

APIs von Internet-Angeboten gibt es wie Sand am Meer. Fast jede Plattform, die was auf sich hält, bietet eine an. Man kann die Inhalte, die über die API zur Verfügung gestellt werden, über sehr viele verschiedene Wege, oder besser, sehr viele verschiedene Programmier- und Scriptsprachen abrufen. Eine davon, mit der viele Webworker häufig zuerst in Kontakt kommen, ist JavaScript.

Gerade aber bei der Kommunikation mit APIs mit Javascript lauert meines Erachtens nach eine Art „Fallstrick“, der allen Maßnahmen zur Optimierung des Internets auf Downloadgröße und Geschwindigkeit zuwider läuft.

REST before SDK

REST oder „Representational State Transfer“ ist eine Programmieridee, die nicht zu Javascript gehört, sondern dem HTTP-Protokoll zugrunde liegt und mit der alle Programmiersprachen konfrontiert werden, mit denen im Internet hantiert werden kann. Sie bedeutet, dass man in einem Moment eine Abfrage startet und im selben Atemzug „eine“ Webseite als Ergebnis erhält. Denn so funktioniert auch das HTTP-Protokol. Bei jedem Klick auf einen Link wird eine Kommunikation mit dem Server gestartet, der genau eine Webseite als Ergebnis zurückliefert. Wer keinen direkten Zugriff auf eine Datenbank im Internet hat, der ist bei der Kommunikation mit APIs auf HTTP und REST angewiesen.

Das Ergebnis so einer Kommunikation ist in der Regel ein JSON-Objekt oder eine XML-Seite. Darin sind dann alle Informationen gebündelt enthalten, die man wiederum weiterverarbeiten „muss“. Denn so, wie sie einem präsentiert werden, sind sie für die eigene Webseite nicht 1:1 zu gebrauchen.

Keine Angst vor Komplexität

In Javascript selbst gibt es Standardfunktionen für die Kommunikation nach dem REST-Schema. Diese wirken nur auf den ersten Blick „vermeintlich“ komplex. Aber gerade weil das so ist, bieten viele Anbieter für ihre API oft ein separates Javascript-SDK an. Das ist nur wieder eine JavaScript-Datei, die man im Kopf einer HTML-Datei lädt, bevor man damit arbeiten kann, so wie jQuery oder andere. Was dabei jedoch außer Acht gelassen wird, ist die Effizienz und Benutzerfreundlichkeit von Webseiten.

Im Fall des Streaming-Anbieters Deezer beispielsweise gibt es ein Javascript SDK, das ist fast 200 KByte groß. Angenommen jemand möchte gerne die Profilseiten seiner Nutzer mit der Möglichkeit bereichern, dass diese dort ihre eigenen musikalischen Deezer-Favoriten zeigen können. Würde man es auf die „vermeintlich“ einfachere Weise mittels SDK tun, dann verlangt man von den Besuchern der Webseite jedes Mal eine zusätzliche JS-Datei mit knapp 200 KB herunterzuladen.

Hausmittel verwenden!!!!!11111eins

Doch das muss nicht sein. Jeder moderne Browser versteht JavaScript, ohne dass man ihm großartig etwas beibringen müsste. Wenn man weiß, in welcher Form eine API seine Ergebnisse liefert (JSON oder XML), dann kann man mit Hausmitteln mit dieser API kommunizieren. Alles was man dazu wissen muss, ist, wie ein HTTP-Request ausschaut und unter welcher Adresse, mit welchen Parametern man an die Informationen der API kommen kann.

1 var xhr = new XMLHttpRequest();
2 xhr.open("GET", "URL mit der kommuniziert wird", false);
3 xhr.setRequestHeader('Content-Type', 'text/xml');
4 xhr.send();
5 xmlDocument = xhr.responseXML;
6 document.write(''+ xmlDocument.childNodes['0'].textContent +'')

Obiges Code-Beispiel zeigt ein paar Zeilen Javascript, die eine Verbindung mit einem Server aufbauen, in der freudigen Erwartung auf eine XML-Seite als Ergebnis. Dieses wird in der Variable, bzw. dem Objekt xhr gespeichert werden. Die Verbindung wird explizit über den Befehl .open() realisiert. Dieser Funktion lassen sich Parameter übergeben, von denen der erste die Art der Kommunikation beschreibt. Im Beispiel oben war es GET, doch es gibt auch POST, PUT und DELETE. In xmlDocument (Zeile 5) wird dann die Antwort gespeichert. In Zeile 6 schließlich wird das Ergebnis der ersten Ebene des XML-Objekts ausgegeben, und dort dasjenige namens textContent. Für ein JSON-Objekt funktioniert es „vergleichbar“.

Welche URL man nutzen muss, ist in der Dokumentation des API-Anbieters angegeben. Wie die einzelnen Felder der XML-Seiten oder JSON-Objekte heißen, steht ebenfalls in den Dokumentationen, könnte man zur Not aber immer am „lebenden“ Objekt erfahren, indem man es als Ergebnis ausgibt und alle Felder notiert.

Ach ja, da war doch was: Authentifizierung

Was ich an dieser Stelle bislang geschlabbert habe, ist die Tatsache, dass man, um mit einer API zu kommunizieren, sich bei der Verbindungsaufnahme „ausweisen“ respektive authentifizieren muss. Das geschieht in der Regel durch einen speziellen API-Key, den man vom Anbieter erhält und auf eine Methode, die dieser akzeptiert.

Nun wird in diesem Kontext oft OAuth als Ausweissystem genutzt. Wie man das mit Javascript gefügig macht, dazu gibt es im Web genügend Beispiele. Doch das ist nicht in jedem Fall notwendig. Twitter beispielsweise erlaubt sowohl bei der REST API als auch bei der SEARCH API eine Per-App-Authorisierung, die man über einen HTTP-Request mit Javascript-Bordmitteln realisieren kann, im direktesten Fall, indem man die Parameter für .send() manipuliert. Das ist bei anderen APIs nicht anders – und drum lautet mein Appell: Setzt euch ein bisschen mit dem Giftschrank von Javascript auseinander und schaut, was ihr ohne die Hilfe externer 200-KByte-Bibliotheken auf die Beine stellen könnt.

Der Beitrag REST before SDK: APIs per Javascript adressieren erschien zuerst auf Macnotes.de.

Fragliches Patent

Ein gewisser Samuel Lit hält ein Patent, das beim US-Patentamt unter der Nummer 8.793.330 verzeichnet ist, zugesprochen bekommen. Darin geht es um eine Diashow für das Internet, in der alle möglichen Arten von Inhalten gezeigt werden. Die einzelnen Folien rotieren nach einer gewissen Zeit – ist das System bei der letzten angekommen, geht es bei der ersten weiter. Das Ganze heißt in der Fachsprache „Carousel“ oder „Slider“.

Apple verwendet ein solches System auf seiner Webseite, allen voran auf der Startseite. Dort werden aktuelle Produkte präsentiert. Lit ist das ein Dorn im Auge, weil Apple keine Lizenz erworben hat. Deshalb hat er Klage eingereicht, wie Apple Insider berichtet. Damit soll erreicht werden, dass Apple „faire Lizenzgebühren“ inkl. Zinsen nachzahlt.

Was allerdings noch lustig werden könnte, denn es gibt so eine Klausel, die sich „Prior Art“ nennt. Etwas zu patentieren, das vorher schon existierte, ist unzulässig. Wer sich das Patent näher ansieht, stellt fest, dass der Antrag erst 2008 einging – es finden sich aber schon einige andere Slider im Internet, die länger existierten, beispielsweise jCarousel Lite, das auf jQuery basiert und bis 2007 zurückreicht.

Der Beitrag Apple-Patentklage: Diashow auf Apple-Webseite erschien zuerst auf Macnotes.de.

Es wird dringend abgeraten, das Update von Custom Content Type Manager 0.9.8.8 herunterzuladen. Der IT-Sicherheitsdienstleister Sucuri hat in der Datei „auto-update.php“ eine Hintertür gefunden, die offenbar den Admin-Login an einen Hacker sendet. Darüber hinaus gibt es die Datei „CCTM_Communicator.php“, die den Server des Hackers informiert, dass das Update ausgeführt wurde und die WordPress-Installation infiziert wurde.

Plugin-Update nach längerer Pause

Nach längerer Pause (10 Monate) erhielt das Plugin bereits am 17. Februar ein Update auf Version 0.9.8.8. Dafür verantwortlich war der Entwickler „wooranker“.

Nutzer waren ebenfalls Ungereimtheiten aufgefallen, die sie im WordPress-Forum artikulierten. Später dann veröffentlichte Sucuri eine umfassende Analyse der Sicherheitslücke.

Neben den eingangs erwähnten Dateien wurde vermeintlich eine eigene Version von jQuery geladen. Dabei handelte es sich jedoch um einen Trackercode, der dem Hacker mitteilen konnte, wie viele Besucher die infizierte Seite besucht hatten.

Hacker aus Indien?

Über die Auswertung der Kommunikation lässt sich rausfinden, dass hinter den Änderungen des Plugins vermeintlich der Freelance-Entwickler Vishnudath Mangilipudi aus Andhra Pradesh in Indien stecken soll. Zumindest kann man Hinweise auf ihn als Domain-Registrar derjenigen Server finden, mit denen das Plugin kommuniziert hat.

Ein Profil auf einer Freelancing-Plattform DesignCrowd führt ihn mit dem Spitznamen wooranker. Übrige geblieben ist lediglich eine Angebotsbeschreibung, auf der man ablesen kann, dass wooranker Grafik-Designer aus Indien sei.

Plugin wieder mit altem Autor

Der alte Plugin-Autor „fireproofsocks“ hat offenbar die Probleme behoben und mittlerweile Version 0.9.8.9 von Custom Content Type Manager veröffentlicht. Diese Version sollte nicht mehr von „wooranker“ gehackt worden sein.

Vor dem Hack hatte das WordPress-Plugin Custom Content Type Manager über 10.000 aktive Installationen, mittlerweile sind es nur noch 9.000.

DesignCrowd distanziert sich

DesignCrowd möchte nicht, dass die eigene Plattform mit jemandem in Verbindung gebracht wird, der im Verdacht steht, ein WordPress-Plugin manipuliert zu haben. Deshalb ist man an uns herangetreten, mit der Bitte, den Link zu dem Freelance-Design-Portal zu löschen. Man habe den Account bereits deaktiviert.

Wir haben deshalb den Link ersetzt mit einem validen Link zu Archive.org, wo es glücklicherweise eine Kopie mit dem Hinweis auf das Profil gibt. Auf der Einzelseite wird bestätigt, dass der vermeintliche Hacker des Plugins „vorher“ zumindest 440 US-Dollar über DesignCrowd auf ehrliche Weise verdient haben soll.

Der Beitrag Custom Content Type Manager: WordPress-Plugin stiehlt Admin-Login erschien zuerst auf Macnotes.de.

Bei StackSocial gibt es aktuell ein Paket bestehend aus 10 Videokursen, für die man so viel zahlen kann, wie man will, mindestens aber mehr als den Durchschnitt. 10 Prozent des Betragen werden zudem für der Project Hope gespendet.

Die Videokurse sind teils didaktisch so aufbereitet, dass sie Nutzer in die Thematik einführen und klassisch von einfachen Strukturen zu komplexeren Methoden führen. Einige der Kurse sind hingegen deutlich praxisorientierter, indem sie an echten Projekte exerzieren, was man zum Beispiel mit ExpressJS, MeteroJS, NodeJS oder AngularJS anstellen kann. Javascript-Frameworks sind äußerst beliebt, weil sie Entwicklern viel Arbeit abnehmen, und die Entwicklung komplexer Web-Applikation erlauben.

Alle Kurse werden auf der neuen Plattform von StackSocial, die sich StackSkills nennt, gehostet. Es ist also nicht davon auszugehen, dass der Anbieter eines Tages oder zumindest so bald die Segel streichen. Alle Kurse sind allerdings in englischer Sprache verfügbar.

Die Kurse „Learn MeteorJS By Building 10 Real World Projects“, „Projects in ExpressJS – Learn ExpressJs Building 10 Projects“ und „Learn JavaScript Server Technologies From Scratch“, sowie „Projects in JavaScript & JQuery“, „Learn NodeJS by Building 10 Projects“ und „Learn Apache Cassandra from Scratch“ von Eduonix sind „inhaltsgleich“ mit denen, die der Anbieter auf der Lernplattform Udemy anbietet. Dort haben alle diese Kurse 4 oder mehr Sterne bei einer 5-Stern-Wertung. Von Eduonix stammen außerdem die Kurse „Learn NoSQL Database Design From Scratch & With CouchDB“ und „Projects in AngularJS – Learn by Building 10 Projects“, die ebenfalls im Paket enthalten sind. Ergänzt wird dieses von Packt Publishings Kurs „Mastering D3 & Rapid D3“, der helfen soll, Daten aus Tabellenkalkulationen mit D3 im Web zu visualisieren. Zenva liefert schließlich den Kurs „3D Programming with WebGL & Babylon.js for Beginners“.

Dieser Artikel enthält Affiliate-Links.

Der Beitrag Videokurse zur Javascript-Entwicklung im Angebot erschien zuerst auf Macnotes.de.

Viele Apps, inklusive der in iOS mitgelieferten, lassen sich über ein so genanntes URI Scheme direkt ansprechen. Die Idee dahinter ist nicht neu. Der vermutlich bekannteste Vertreter ist „mailto:“, der ebenso auf Desktop-Rechnern funktioniert. iOS treibt das Ganze noch einen Schritt weiter, denn wenn eine App ein eigenes URI Scheme unterstützt, kann man sie direkt aus einer anderen aufrufen.

iOS-Apps von Social Networks mit URI Schemes

Die meisten sozialen Netzwerke wie Facebook, Twitter oder LinkedIn haben eine eigene iOS-App. Wenn auf der eigenen Webseite ein Link vorkommt, der auf ein solches Netzwerk zeigt, würde der User, der dem Link folgt, auf der Webseite landen. Aber auf mobilen Geräten sind Apps häufig besser aufbereitet und schneller als die Web-Ansicht. Dieses Problem versucht Switcher zu lösen.

jQuery-Plugin

Mithilfe des jQuery Plugins Switcher werden alle Links, die in einem benannten HTML-Element sind, auf ihr Ziel überprüft. Handelt es sich um ein unterstütztes soziales Netzwerk, schreibt Switcher die URLs so um, dass nicht die Webseite des sozialen Netzwerks, sondern die entsprechende App geöffnet wird. Ein Link, der beispielsweise zu https://twitter.com/macnotes führt, wird so umgeschrieben, dass twitter://user?screen_name=macnotes dabei herauskommt. Klickt der Anwender auf den Link, öffnet sich die Twitter-App und zeigt in dem Fall unser Profil an.

Switcher ist frei verfügbar

Switcher ist freie Software, wobei der Lizenztext keinem gängigen entspricht, etwa der GPL. Der Autor Ryan Scherf gibt an, dass er nicht alle Apps verwendet, die der App Store zu bieten hat; wer eine kennt, die noch nicht unterstützt wird, soll sich dazu berufen fühlen, sie der Code-Basis von Switcher hinzuzufügen und einen Pull-Request zu tätigen.

Der Beitrag Switcher: jQuery-Plugin schreibt Social-Network-Links für iOS um erschien zuerst auf Macnotes.de.

Für umgerechnet rund 36,26 Euro erhält man ein Bundle, das viele Grundlagen diverser Web-Technologien vermittelt. Mit dabei sind Kurse über Amazon Web Services, PHP, HTML 5 und MongoDB. Bei StackSocial ist zu lesen, dass das Paket normalerweise $668 (ca. 494,31 Euro) kostet, aktuell aber nur $49.

Bilden kann man sich darüber, wie man Amazon Web Services nutzt, sich einen Überblick über alle wichtigen Web-Technologien verschaffen, mit GitHub einsteigt, wie Python funktioniert, wie man einen Online-Marktplatz etabliert, die wichtigsten Informationen über HTML 5 zu verstehen, wie PHP und MySQL zusammenarbeiten und wie MongoDB zu verwenden ist.

Einzig muss man in Kauf nehmen, dass die Kurse überwiegend ausschließlich auf Englisch verfügbar sind. Dafür gibt es aber eine 30-Tage-Geld-zurück-Garantie. StackSocial bietet das Stack Hacker Bundle noch drei Tage lang an.

Bei einigen der Kurse erhält man beim Abschluss ein entsprechendes Zertifikat. Wer also z. B. mit einer IDE Web-Apps mit HTML5, CSS3, jQuery und PHP sowie MySQL-Anbindung produzieren mag, könnte sich dies am Ende zertifizieren lassen, oder aber, dass er mit den Amazon Web Services haushalten kann.

Diejenigen, die einen Einstieg in GitHub bislang gescheut haben, könnten einen anderen Kurs namens „GitHub Fundamentals“ in Anspruch nehmen, in dem man die Versionsverwaltung mit dem Tool näher gebracht bekommt.

Es gibt darüber hinaus noch Kurse zur Programmierung mit Python oder einen Kurs, der am Beispiel exerziert, wie man mit Python, Bootstrap und anderen Hilfsmitteln einen kompletten Handelsplatz programmiert, der von Inhalten gespeist wird, die die Nutzer selbst beitragen können.

Dieser Artikel enthält Affiliate-Links.

Der Beitrag Stack Hacker Bundle: 8 Web-Dev-Kurse für $49 erschien zuerst auf Macnotes.de.

Wir haben uns vorgenommen eine kleine Reihe von Artikeln zu veröffentlichen, die vor allem aus unserer eigenen, jüngeren Erfahrung entspringen. Wenn man Webseiten optimieren möchte, nicht unbedingt als SEO, aber vor allem der Liebe zum Leser wegen und damit Google einen trotzdem lieb hat, kann man schon im „Kopf“ der Seite anfangen.

Template-Dateien

Wer WordPress auf WordPress.com nutzt, der müsste schon ein Pro-Package erworben haben, um ähnliche Dinge anstellen zu können, wie gleich beschrieben werden. Wer allerdings sein WordPress selbst anlegt, der kann in den Template-Dateien rumfuhrwerken.

Conditional Tags

Angenommen wir wollten ein Javascript oder eine Anweisung nur je auf einem bestimmten Seitentyp laden, und alle anderen Seiten mit den Kilobyte verschonen, die dafür geladen werden müssten. Dafür hält WordPress die Conditional Tags (kurz CT) bereit. Eine komplette Darstellung, welche Conditional Tags es gibt, findet man im Codex von WordPress (engl.).

Für die Homepage beispielsweise gibt es den CT is_home(). Handelt es sich um einen einzelnen Beitrag (Post) kann man is_single() nutzen. Dieser CT bedient allerdings auch wirklich nur „Posts“. Angenommen ihr behandelt aber „Seiten“ (Pages) und „Anhänge“ (Attachments) mehr oder weniger gleichrangig, so wie wir das tun, dann könnte für euch auch der CT is_singular() interessant sein, der nämlich alle drei Typen von Dokumenten anspricht.

Beispiel: Webfont

Wer dem Trend der Typographie im Netz folgt, der wird vielleicht früher oder später auf Webfonts zurückgreifen wollen, das sind Schriftarten, die man auf unterschiedliche Arten in seine Seiten integrieren kann. Eine kostenlose Möglichkeit ist die Nutzung von Googles Sammlung an Webfonts. Derzeit (Stand: 7. Mai 2012) kann man aus einem Fundus von 501 Schriftfamilien auswählen. Google selbst hat dort aber eine Art Tachometer angebracht, einen Anzeiger, der, je mehr Schriften man hinzufügt, immer mehr in den roten Bereich wandert. Das liegt daran, dass die Schriften erst geladen werden müssen. Je mehr Schriften, desto mehr Kilobyte muss der Browser des Nutzers herunterladen, ehe er die Schrift auch anzeigt.

Da wäre es doch effizient, wenn man nur dann wirklich alle Webfonts verwendet, wenn man sie auch wirklich braucht. In unserem Fall ist es so, dass wir auf der Homepage nur den regulären Font namens Tienne benötigen, auf den Artikelseiten allerdings zusätzlich noch den Font Lekton. Das ist übrigens die Schrift art, mit der auf dieser Seite die „Code“-Schnipsel wiedergegeben werden.

In einem ersten Schritt sollte man sich überlegen, wie man am cleversten vorgeht, um die Bedingungen zu formulieren. Dann ist es einfacher eine entsprechend Abfrage zu produzieren. „Wir“ wollen also nur in Einträgen, auf Seiten und bei Anhängen die „Code“-Schrift zusätzlich laden, auf allen anderen Seiten soll nur die normale geladen werden. Der komplette Aufruf, ohne Berücksichtigung der Seiten, würde wie folgt lauten:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tienne:400|Lekton:700" type="text/css" />

Die Zeile stünde dann in der header.php. Wir wollten aber ja diese Ausgabe nur dann haben, wenn wir auf einer einzelnen Seite sind, und ansonsten auf die „Code“-Schriftart verzichten. Entsprechend würden wir den Header so umschreiben:

<?php if(is_singular()) { ?>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tienne:400|Lekton:700" type="text/css" />
<?php } else { ?>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tienne:400" type="text/css" />
<?php } ?>

Es bietet sich übrigens für Anfänger an, auf diese Art zu klammern:

<?php x { ?> auszuführender Code <?php } ?>

Man kann es auch anders machen, aber dann müsste man eventuell noch mit dem echo-Befehl hantieren und anstelle von einfachen Anführungszeichen, Hochkommata setzen, usf.

Mit dem oben beschriebenen Code wird erreicht, dass lediglich auf den Einzelseiten zwei Schriftarten vom Google-Server geladen werden, während aber die übrigen Seiten nur die „Standard“-Schriftart erhalten.

Beispiel 2: CSS-Dateien

Während es vor Jahren schon mal latent im Webworking den Trend gab, möglichst viele verschiedene Stylesheets zu erstellen, ist man heute wohl wieder auf dem Weg in die andere Richtung. 1 einzige Datei ist besser als 2, sind besser als 3 usw. Im Einzelfall sollte man tatsächlich den Gebrauchsfall (use case) studieren, um zu ermitteln, welche Aktion häufiger vorkommt, und dann entscheiden was Sinn macht. Beispielsweise gibt es manche WordPress-Themen, die super schöne Kommentarfelder anbieten, die aber auch enorm viel CSS-Inhalt mit sich rumschleppen. Wenn man durch das Auslagern der CSS-Formate für die Kommentare ein paar Kilobyte sparen kann, sollte man es tun. Aber auch nur dann.

Kommentare

Wenn man sich nun vorstellt, man möchte den CSS-Anteil für die Kommentare nur dann laden, wenn eine Seite auch tatsächliche Kommentare erlaubt, dann hält WordPress den CT comments_open() bereit. Eine mögliche Abfrage würde wie folgt ausschauen:

<?php if(comments_open()) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/comments.css" />
<?php } ?>

Lightbox

Es gibt andererseits vielleicht auch die Situation, dass jemand eine Lightbox laden möchte, die unter Umständen auch noch jquery benötigt, mootools oder eine andere Javascript-Bibliothek. Es ist sehr wahrscheinlich, dass man so einen Effekt nicht schon auf der Homepage oder den Archivseiten anwendet, sondern nur in den einzelnen Beiträgen. Dann könnte man erneut zu is_singular() oder sogar nur is_single() greifen:

<?php if(is_single()) { ?>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery/jquery.js?ver=1.7.1"></script>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/lightbox.css" />
<?php } ?>

Google+-Box, Facebook, etc. pp

Man könnte noch viele Beispiele anführen. Eines aus unserer Praxis ist aber zum Beispiel die „Google Plus“-Box, bzw. die Facebook-Box, die wir lediglich auf der Startseite einfügen, aber ansonsten gar nicht. Entsprechend lautet unsere Abfrage dann wie folgt:

<?php if (is_home()) { ?%gt;
	<script type="text/javascript">
	window.___gcfg = {lang: 'en'};
	(function()
	{var po = document.createElement("script");
	po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
	var s = document.getElementsByTagName("script")[0];
	s.parentNode.insertBefore(po, s);
	})();</script>
<?php } ?>

Ausblick: CSS, Plugins mit Bordmitteln

Wie genau der nächste Teil ausschauen wird, haben wir uns (leider) noch nicht überlegt, aber wir wollen zumindest auch das Thema CSS noch weiter ansprechen, wenngleich die Optimierung von Stilvorlagen nicht spezifisch auf WordPress passt, sondern eigentlich jede Webseite oder jedes CMS wie bspw. Contao oder ModX betreffen. Letzteres haben wir neben WordPress auch manchmal im Einsatz.

Und in einem weiteren Schritt wollen wir thematisieren, welche Möglichkeiten man hat, auf einzelne Plugins bei WordPress zu verzichten, die man mit Bordmitteln sehr gut selbst nachbauen kann, und die einem nicht die HTML-Dateien zukleistern. Denn es gibt WordPress-Plugins, die erzeugen super viel „Overhead“. Ein schönes Beispiel hierfür wären die NextGen Gallery oder alle Plugins, die neuerdings auf die Masche gekommen sind ein „Pro“-Pack anzubieten, bei dem man dann ohne den ganzen Werbemüll auskommt, wie beispielsweise All in One SEO Pack.

Der Beitrag WordPress optimieren Teil 1 – Der Header erschien zuerst auf Macnotes.de.

Webseiten erstellen mit Maus und Tastatur

Flux ist ganz auf HTML5 getrimmt. Was normalerweise eine intensive Beschäftigung mit Code-Elementen bedeutet, wird in Flux mit einem Zusammenspiel von Mausbedienung und Code-Optimierung erreicht. So erstellt man neue Elemente, angefangen vom einfachen „div“ über Formen bis hin zur Medien-Integration über Auswahlboxen und positioniert alle Elemente per Maus. Über einen Inspektor passt man die Werte anschließend an oder erledigt dies im Code-Editor, der auf Wunsch jederzeit bereitsteht.

Workflow

In Flux erstellt man Webseiten normalerweise von Grund auf neu und per Hand. Zwar werden auch einige, wenige Vorlagen mitgeliefert, doch tendenziell ist Handarbeit angesagt. Zunächst wird dazu ein Projekt im Seiten-Manager angelegt, standardmäßig wird diese mit einer index.html und einer dazugehörigen .css-Datei gefüllt. Hier finden sich auf später sämtliche Medien (Filme, Bilder) und auch eventuelle fremde Codeschnipsel zur Verwendung im eigenen Projekt wieder. Ein Doppelklick auf die index.html öffnet diese nebst der zugehörigen CSS-Definition im Seiten-Editor. Dort werden nun die gewünschten Elemente hinzugefügt. Links öffnet sich wahlweise eine Übersicht der verwendeten Stile oder eine Ansicht des Element-Baumes. Am unteren Rand legt man fest, welche Elemente angezeigt werden sollen und zudem kann man hier einen Text-Editor einblenden. Oberhalb des Fensters befindet sich eine Reiterleiste mit vorgefertigten Elementen, wie Containern, Formen, Medien, Texten, verschiedenen anderen Elementen und externen Scripten.

Arbeitsweise

Die Lernkurve ist bei Flux deutlich höher als bei Programmen wie Sandvox oder gar iWeb, was auch die etwas dürftige, englischsprachige Dokumentation mit verursacht. Wesentlich mehr Hilfe bieten da zahlreiche Video-Tutorials, die auf der Homepage des Herstellers verlinkt sind. Hat man sich erst einmal an die Arbeitsweise des Programms, und die nicht immer zur Verfügung stehende Rückgängig-Funktion des Programms gewöhnt, geht die Arbeit gut von der Hand. Hintergrundwissen zum Thema HTML und CSS kann dabei nicht schaden. Wenn man das Prinzip verinnerlicht hat, ist es eine sehr angenehme Angelegenheit, viele Dinge, besonders im optischen Bereich wie bei einem DTP-Programm mit der Maus zu erledigen, um dann die Feinheiten im Code selber zu justieren. Über „Actions & Widgets“ bietet Flux darüber hinaus eine ganze Reihe vorgefertigte JavaScript- und andere interaktive Code-Schnipsel, wie etwa MooTools, jQuery und ähnliche an, die weitgehend fertig konfiguriert leicht in eine Seite integriert werden.

Fazit

Anwender, die schnell und einfach zu einer eigenen Webseite kommen wollen, sind mit Programmen wie Rapid Weaver oder Sandvox sicher besser bedient. Wer jedoch elegante Webseiten mit moderner Technologie und umfassenden Konfigurationsmöglichkeiten sucht und eine etwas längere Einarbeitungszeit nicht scheut, ist bei Flux gut aufgehoben. Mit einem Preis von 89,99 Euro spielt das Programm dabei in einer ähnlichen Liga. Es wird derzeit im Übrigen häufig in Bundles angeboten, da heißt es Augen offen halten. Die Entwickler haben beim letzten Versionssprung einige neue Features hinzugefügt. Wenn die Entwicklung weiter gut voran schreitet, kann man auf einige Überraschungen bei Flux gespannt sein. Eine Testversion kann man auf der Homepage des Anbieters The Escapers herunterladen.

Der Beitrag Test: HTML5 Webseiten-Editor Flux erschien zuerst auf Macnotes.de.

Mit jQTouch können Webanwendungen Zugriff auf bestimmte Hardware-Funktionen des Gerätes bekommen, beispielsweise den Bewegungssensor oder auch Multi-Touch. jQTouch stellt die dafür nötigen Events zur Verfügung. Ebenso lassen sich zusätzliche Themes einrichten, die die Web-Apps noch stärker wie echte Applikationen aussehen lassen.

jQTouch ist Open Source, der Code findet sich bei Google.

[mn-vimeo id=“6353874″]

Der Beitrag jQTouch: jQuery-Plugin für Webapplikationen auf iPhone, G1 und Pre erschien zuerst auf Macnotes.de.