Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung
16-10-2013 13-34-24

Mehr Möglichkeiten im Responsive Webdesign durch Intention.js

Responsive Design ist nicht mehr wegzudenken und jetzt gibt es intention.js, eine HTML-Transformation für die verschiedensten Ausgabegeräte. Das nächste Level wurde damit eingeläutet.

Neuerungen durch intention.js

Grundlegend geht es bei intention.js um eine Vereinfachung HTML für unterschiedliche Geräte aufbauen und neu strukturieren zu können. Außerdem können nun verschiedene Darstellungen besser und vor allem leichter umgesetzt werden. Auf unterschiedlichen Geräten kann dadurch auf dem jeweiligen Gerät alles so angezeigt werden, wie gewünscht. Dabei kann am Desktop eine andere Darstellung als beispielsweise am Smartphone erreicht werden. Egal welches Gerät alles wird so angezeigt, wie gewünscht und auf Wunsch immer unterschiedlich. Ob Kacheln und am anderen Gerät Full-Screen, alles ist machbar. Umsetzbar ist dies durch die Neuerung, in der mittels HTML angegeben werden kann, wie sich die DOM auf den unterschiedlichen Ausgabegeräten verändert und aufbaut.

Wie funktioniert das Ganze?

Ganz einfach erklärt besteht intention.js aus zwei aufeinander basierenden und mit einander arbeitenden Systemen. Das erste ist für die Definierung des Kontext verantwortlich und gibt beispielsweise an wie breit der Viewport sein soll oder ob eine Touch-Funktion oder ähnliches benötigt wird. Die entscheidende Funktion ist zweite des Systems. Hier geht es um die Manipulation und Änderung der HTML-Attribute. Bei dieser Anwendung kann zwischen drei Varianten gewählt werden. Diese stellen wir Euch hier kurz vor:

Die einfachste Funktion ist die Manipulation der CSS-Klasse.

Beispiel:

<img intent in-orientation: src=“a.jpg“ />

ändert sich wie folgt:

<!-- In portrait orientation -->
<img class=“portrait“ src=a.jpg“ />
<!-- In landscape orientation -->
<img class=”landscape” src=a.jpg” />

Manipulation der HTML-Attribute

Hierbei wird ein Basiswert definiert, der dann individuell an den jeweiligen Fall angepasst werden kann. Der anfangs-Snippet sieht wie folgt aus:

<img intent
in-base-src=“reg_img.png“
in-highres-src=big_img.png“ />

Neben Retina-Auflösungen kann dies auch auf andere angewendet werden:

<img src=“reg_img.png“ />

Für Retina sieht das dann so aus:

<img src=“big_img.png“ />

Die dritte und wohl herausragendste Funktion ist die Manipulation der Dokumentenstruktur (DOM)

Hierbei ist es möglich DOM neu zu strukturieren und dies auch noch auf verschiedene Ausgangsgeräte anzupassen. Mit nur drei Zeilen zusätzlichem Code kann die Dokumentenstruktur völlig neu angeordnet werden. Bei Smartphones befindet die Navigation über dem Footer. Bei Tablets ist die Navigation unter der Section zu finden. Bei allen anderen unter Header.

<header>
<nav intent
in-mobile-prepend=“footer“
in-tablet-append=”section”
in-standard-append=”header”>
</nav>
<section>…</section>
<footer>…</footer>
</header>

Intention.js unterstützt alle modernen und gängigen Browser und setzt dabei neben Underscore.js auch auf jQuery.

Gut ist auch die Möglichkeit, dass href Attribute auf links angesprochen werden können. Auf einem iPhone 5 sieht das dann so aus:

<header>
<img src=“retina.png“/>
</header>
<div id=“content“ class=“mobile portrait“>
<nav class=”swipeDrawer”>
<a href=”faq”>FAQ</a>
<a href=”about.html”>About</a>
</nav>
</div>

Wie zu sehen, ist die Umsetzung sehr einfach.
Eine besonders interessante Anwendung ist die Navigation für Touch-Funktionen. Auch dies ist mit einer einzigen Zeile Code machbar. Intention.js ermöglicht es mit kleinen Schritten große Wirkungen zu erreichen. Ein bisschen mehr HTML-Markup und es kann mit unterschiedlichen Ausgabegeräten gearbeitet werden.

Anwendung und Aufbau eines Kontext und „Custom Axis“

Als besonders erwähnenswert ist die Variante des selbst vorgegebenen und definierten Kontext. Intention.js reagiert auf alle und vor allem auf unterschiedlich vorgegebene Kontexte. Damit lassen sich alle gewünschten Funktionen aktuell anpassen.
Prinzipiell ist eine – Axis – eine Ansammlung von unterschiedlichen Informationen, welche durch die Kontext-Gruppe eine Einheit bilden. Die Struktur setzt sich, neben den Eigenschaften, aus zwei Funktionen zusammen.

Struktur:

var axis = intent.responsive({
ID: `axisID`,
contexts: [
{name:`ctx1`, val:´3´},
{name:´ctx2`, val:`2`},
{name:`ctx3`, val:`1`}
],
matcher: function(measure, context) {
return measure >= context.val;
},
measure: function(){
return someMeasurement;
});

Intention.js stellt besonders für große Projekte eine wesentliche Erleichtung und Erweiterung der Möglichkeiten dar. Wir hoffen das Vorangehende konnte Euch einen Überblick über die Neuerung und Erweiterungen von intention.js liefern. Bei Fragen oder Anregungen hinterlasst uns einen Kommentar.