Kategorien
JavaScript & jQuery Programmierung

Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash

Flash war lange Zeit der Standard für vektorbasierte Animationen im Web. Mit dem Aufkommen mobiler Endgeräte wurde Flash immer mehr von HTML5 und CSS3 verdrängt. Dank des SVG-Formates, welches mittlerweile von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne Plug-in im Browser dargestellt werden. Mit der JavaScript-Bibliothek Snap.svg aus dem Hause Adobe ist es zudem möglich, Animationen mit SVG-Grafiken zu erstellen.

snapsvg

Bestehende SVG-Grafiken ansprechen und neue erstellen

Nachdem die JavaScript-Bibliothek von Snap.svg im HTML-Kopf eingebunden ist, können bestehende im HTML-Dokument eingebundene SVG-Grafiken angesprochen und neue erstellt werden.

var grafik1 = Snap("#grafik");
var grafik2 = Snap(300, 400);

Die erste Zeile unseres Beispiels greift auf das SVG-Element mit der ID grafik zu. Über die Variable grafik1 hat man somit Zugriff auf alle Elemente innerhalb des SVG-Elementes. Die zweite Zeile erstellt eine neue SVG-Grafik mit 300 Pixel Breite und 400 Pixel Höhe.

Nun hat man die Möglichkeit, bestehende Formen innerhalb der Grafik zu manipulieren oder neue Formen zu erstellen. Hierfür bietet die Bibliothek verschiedene Funktionen an, mit denen unter anderem Kreise und Rechtecke gezeichnet werden können.

var kreis = grafik1.circle(100, 100, 50);

kreis.attr({
  fill: "#00ffff",
  stroke: "#000000",
  strokeWidth: 3
});

Mit circle() wird ein Kreis gezeichnet. Die ersten beiden Werte geben die X- und Y-Koordinate für den Kreismittelpunkt an, der dritte Wert den Radius. Mit attr() geben Sie mehrere Werte für das Aussehen der Form an, zum Beispiel Füll- und Rahmenfarbe sowie Rahmenstärke. Hier ist die Angabe aller Attribute erlaubt, die vom jeweiligen Formelement unterstützt werden.

Bestehende SVG-Dateien können ebenfalls geladen und eingebunden werden. Hierzu dient die Methode Snap.load(). Sie lädt eine externe SVG-Datei, welche einer Funktion übergeben wird.

Snap.load("dreieck.svg", function (datei) {
  var dreieck = datei.select("polygon");
  grafik1.append(dreieck);
});

Im Beispiel wird die Datei dreieck.svg geladen und einer Funktion (über die Variable datei) übergeben. Über die Methode select() hat man nun Zugriff auf alle Elemente der SVG-Grafik. Mit select() wird das jeweils erste Element ausgewählt, welches angeben wird. Alternativ gibt selectAll() alle vorhandenen Elemente eines Typs als Array aus.

Mit append() wird die Formenauswahl letztendlich in die Grafik eingebunden. Extern eingebundene Grafiken lassen sich genau so ansprechen und verändern wie jene, die per Snap.svg selbst erstellt wurden. Per attr() ist es also möglich, das Aussehen des Dreiecks zu verändern.

SVG-Grafiken animieren

Neben der Manipulation von Grafiken gehört das Animieren zu den besonderen Möglichkeiten von Snap.svg. Mit animate() können die Eigenschaften einer SVG-Form über eine Bewegung verändert werden. Die Methode erwartet mindestens zwei Parameter. Der erste Parameter gibt über ein Objekt-Literal die Eigenschaften an, die verändert werden soll, der zweite die Animationszeit in Millisekunden.

Optional kann als vierter Parameter eine Easingmethode angegeben werden, welche beschreibt, wie die Animation beschleunigen beziehungsweise abbremsen soll. Als fünfter Parameter ist die Angabe einer Funktion möglich, die nach Ablauf der Animation aufgerufen wird.

kreis.animate({
  r: 100,
  cx: 100,
}, 1000, mina.easein);

Im Beispiel werden Radius und X-Koordinate des Kreismittelpunktes verändert. Die Dauer der Animation wird auf eine Sekunde gesetzt. Außerdem sorgt mina.easein dafür, dass die Animation zum Ende abbremst. Die Easing-Möglichkeiten ähneln denen, die man von CSS3 kennt.

Interaktionen wie Drag und Mouseover

Snap.svg bietet mehrere Möglichkeiten, SVG-Grafiken interaktiv zu gestalten. So ist es sehr einfach möglich, eine Form per Maus bewegbar zu machen.

kreis.drag();

Das kleine Beispiel sorgt dafür, dass der Kreis per Maus innerhalb der SVG-Fläche bewegt werden kann. Auch Mouseover-Effekte lassen sich einfach realisieren. So ist es beispielsweise möglich, eine Animation erst auszuführen, wenn man sich mit der Maus darüber bewegt.

kreis.mouseover(function() {
  kreis.animate({
    r: 100,
    cx: 50
  }, 1000);
});

Das folgende kurze Video bietet einen schnellen Überblick über die Fähigkeiten der Bibliothek und hilft bei den ersten Schritten:

Fazit

Snap.svg ist eine leistungsstarke JavaScript-Bibliothek zur Umsetzung komplexer Animationen und grafischer Anwendungen. Die JavaScript-Bibliothek ist Teil der Adobe Webplatform und steht unter einer Apache-Lizenz V2, was unter anderem garantiert, dass sie kostenlos für private und kommerzielle Zwecke genutzt werden darf. Zusätzlich zur bereits genannten Projekt-Homepage können Sie Snap.svg auch ganz klassisch via Github beziehen.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

SVG und JavaScript: Was ist möglich, was muss beachtet werden?

Das SVG-Format gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache sind Programmierungen innerhalb des Formates möglich.

svg_javascript

Per JavaScript auf SVG-Elemente zugreifen

Im Grunde unterscheidet sich der Einsatz von JavaScript in einer SVG-Datei gar nicht vom Einsatz in einer HTML-Datei. Da es in der SVG-Syntax aber weder das HEAD- noch das BODY-Element gibt, wird ein JavaScript-Bereich einfach innerhalb des SVG-Elementes ausgezeichnet. Hierbei gilt wie bei HTML auch, dass auf Elemente nur dann zugegriffen werden kann, wenn diese bereits geladen wurden. Also muss der JavaScript-Bereich entweder ans Dokumentende gesetzt oder über eine Funktion per Event-Listener „load“ aufgerufen werden. Zwingend erforderlich ist jedoch, dass der JavaScript-Quelltext innerhalb eines CDATA-Abschnittes aufgeführt wird.

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", function() { … }, false);
    ]]>
  </script>
  <rect x="50" y=50" width="0" height="25" fill="red" />
</svg>

Da man SVG-Elemente wie HTML-Elemente mit Klassen und IDs ausstatten kann, lassen sich diese mit den bekannten Methoden „getElementsByTagName()“, „getElementById()“. sowie den neueren Methoden „querySelector()“ und „querySelectorAll()“ ansprechen. Attribute werden mit „getAttribute()“ ausgelesen beziehungsweise mit „setAttribute()“ zugewiesen – also alles bekannte Methoden.

window.addEventListener("load", function() {
  document.getElementsByTagName("rect")[0].setAttribute("width", "100");
}, false);

Im Beispiel wird auf das erste RECT-Element zugegriffen, welchem das „width“-Attribut mit dem Wert „200“ zugewiesen wird. Um per JavaScript Animationen zu erstellen, die SVG-Elemente in Bewegung bringen, bietet sich die Methode „requestAnimationFrame()“ an. Diese Methode ist speziell für Animationen geeignet und sorgt – anders als als beispielsweise „setTimeout()“ – dafür, dass eine Funktion immer nur dann ausgeführt wird, wenn dies für das Fortlaufen einer Animation notwendig ist.

window.addEventListener("load", function() {
  var breite = document.getElementsByTagName("rect")[0].getAttribute("width");
  function animation() {
    if (breite < 200) {
      breite++;
      document.getElementsByTagName("rect")[0].setAttribute("width", breite);
      window.requestAnimationFrame(animation);
    }
  }
  window.requestAnimationFrame(animation);
}, false);

Im Beispiel wird über „requestAnimationFrame()“ die Funktion „animation()“ solange aufgerufen, bis der „width“-Wert für das Rechteck „200“ ist. Dabei wird der „width“-Wert bei jedem Funktionsaufruf um 1 erhöht, was zu einer Animation des Rechteckes führt, bei dem die Breite auf 200 verändert wird. Auf diese Art und Weise lassen sich beispielsweise Diagramme über eine Animation aufbauen. Die einzelnen Diagrammwerte können per GET-Parameter an die SVG-Datei übergeben und per JavaScript ausgelesen werden.

Vorteil gegenüber Canvas

Zwar gibt es mit dem CANVAS-Element und den entsprechenden Zeichenfunktionen von JavaScript auch die Möglichkeit, ohne SVG-Format Formen zu zeichnen und auf ähnliche Weise zu animieren. Allerdings stellt das Canvas-Element nur eine pixelbasierte Zeichenfläche zur Verfügung. Wird das Browserfenster vergrößert dargestellt, wird die gerasterte Darstellung erkennbar.

Daher setzt zum Beispiel die Google-Charts-API für seine Diagramme ebenfalls auf das vektorbasierte SVG-Format anstatt auf Canvas.

Einbindung von SVG-Grafik in HTML-Dokument

Damit JavaScript innerhalb einer SVG-Grafik auch ausgeführt werden kann, ist es notwendig, die SVG-Grafik per EMBED- oder IFRAME-Element in ein HTML-Dokument einzubinden. Wird es per IMG-Element eingebunden, wird die SVG-Grafik zwar angezeigt, das JavaScript wird jedoch nicht ausgeführt.

Alternativ ist es möglich, eine SVG-Grafik komplett in ein HTML-Dokument einzubetten, indem der Quelltext einschließlich SVG-Element (aber ohne Doctype) an gewünschter Stelle innerhalb des HTML-Dokumentes platziert wird.

Dank JavaScript und den Animationsmöglichkeiten des SVG-Formates kann es sich zu einem adäquaten Ersatz zu Flash entwickeln, welches gänzlich ohne Plug-in auskommt und somit auch auf mobilen Geräten läuft.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates

Publ.com: Offline-Inhalte schnell und komfortabel im Netz veröffentlichen

Der Katalog ist fertig und liegt in der Druckerei. Wäre es jetzt nicht gut, wenn man die gleiche Datei nehmen könnte, um den Katalog auch online zugänglich zu machen? Stattdessen wird man entweder eine PDF zum Download anbieten oder den Offline-Inhalt gleich gar nicht online stellen. Publ.com kann für diesen und andere Bedarfe eine sehr gute Alternative sein, zumal das Publizieren von Offline-Inhalten wirklich extrem einfach und schnell vonstatten geht.

publcom-landingpage

Publ.com und FlippingBook in kurzen Worten

Publ.com ist ein cloud-basierter Dienst, der aus zwei wesentlichen Teilen besteht. Da ist zum einen der FlippingBook Publisher, eine Windows-Software, die lokal installiert wird und fast beliebigen auf der Festplatte bereits vorhandenen Content importieren und in ein FlippingBook umwandeln kann. Und da ist zum anderen Publ.com selber, die Cloud, in der die lokal erstellten Publikationen gehostet werden. Publ.com arbeitet mit Amazons Web Services und bietet so eine stabile, schnelle und zuverlässige Umgebung, auch für größere Projekte. Reader-Apps für Android und iOS runden das Angebot ab.

Der Produktionsprozess ist in wenigen Schritten erledigt. In unserem Katalogbeispiel aus der Einleitung würde man lediglich sämtliche zum Projekt gehörenden Druckdateien, heutzutage fast immer PDF, in den FlippingBook Publisher importieren, ein paar Parameter anpassen und das Ergebnis wieder exportieren lassen. Herauskäme ein FlippingBook, das seinen Namen dem charakterischen Pageflip-Effekt verdankt, mit dem Seiten realitätsgetreu umgeblättert werden.

publcom-complete-toolkit

Dieses FlippingBook kann man nun auf verschiedene Weisen zugänglich machen. Entweder Sie publizieren es aus dem Publisher direkt per FTP auf Ihren Webspace oder legen es zunächst lokal in ein Verzeichnis ab. Oder Sie wollen direkt eine Publikation auf CD/DVD erstellen. FlippingBook stellt Ihnen für Windows eine .exe und für Mac eine .app zur Verfügung. Die letzte und beste Alternative stellt allerdings der Onlinedienst Publ.com selber dar. Publizieren Sie Ihren Content direkt in die Cloud, was verschiedene Vorteile hat.

Ich weiß nicht, welche Kapazität Ihr FTP-Server hat, weder was Geschwindigkeit, noch was Speicherplatz betrifft. Publizieren Sie über diesen Server nun populäre, dabei große Inhalte, kann es schnell eng werden und die Auslieferung wird zu einem zähen Unterfangen. Publ.com lebt in der Amazon-Cloud, die nach Bedarf skaliert und dabei die Inhalte stets ortsnah ausliefert. Mit Publ.com wird zudem sicher gestellt, dass nicht zunächst alle 2.500 Seiten Ihres Katalogs für Fliegenfischerzubehör heruntergeladen sein müssen, bevor der Interessent darin stöbern kann. Vielmehr erfolgen Download und Anzeige seitenweise, während im Hintergrund weiter geladen wird.

Über Publ.com gehostete Inhalte stehen außerdem über kostenfreie Apps für Android und iOS zur Verfügung. Der sog. Publ.com-Reader passt die Inhalte perfekt auf das Display der mobilen Geräte an. Auf diese Weise erreichen Ihre über Publ.com veröffentlichten Inhalte das breitest mögliche Publikum. Um es nochmal klar zu stellen. Der Publ.com-Reader ist nicht unbedingt erforderlich, da man ohne ihn direkt im Browser die HTML-Versionen verwenden kann. Wenn man aber die vollständige Desktop-Optik bevorzugt und die Publikation offline lesen möchte, dann sollte man sich die kostenlose App durchaus installieren.

publcom-android-app-01
Screenshot aus der Android-App
publcom-android-app-02
Und noch ein Screenshot aus der Android-App

FlippingBook Publisher, das Autorenwerkzeug des Bundles

FlippingBook Publisher steht in verschieden befähigten Versionen für die Windows-Plattform bereit. Wollen Sie sich ein eigenes Bild von dem Werkzeug machen, so lohnt sich der Download der 30-Tage-Testversion, die allerdings auf 10-seitige Präsentationen limitiert ist und auf jeder Seite ein FlippingBook-Branding einblendet. Dafür können Sie aber bereits den Cloud-Service mitnutzen. Das Konto erlischt automatisch nach 30 Tagen.

publcom-sample

Der Publisher ist in den verschiedenen Bezahlvarianten von Publ.com stets eingepreist, allerdings mit unterschiedlichen Fähigkeiten. Die Varianten Basic, Professional und Business unterscheiden sich dabei deutlich. Allen gemeinsam ist, dass die erzeugten Inhalte auch auf den mobilen Plattformen funktionieren, volltext-durchsuchbar, werbefrei und SEO-optimiert sind.

Will man beliebige Dateiformate importieren, Google Analytics einbinden, ein Bücherregal für die eigenen Publikationen integrieren, über HTTPS ausliefern oder den Zugriff insofern beschränken, dass nur Personen, denen man den entsprechenden Link nennt, auf die Inhalte zugreifen können, ist mindestens der FlippingBook Publisher Professional erforderlich. Mit dieser Variante lassen sich die INhalte zudem auf einer Subdomain von Publ.com hosten. Kommt noch der Bedarf an in sich mehrsprachigen Inhalten dazu oder will man seine Inhalte mit einem Passwort schützen oder einen Redaktionsworkflow mit mehreren Editoren abbilden, wird der Griff zur höchsten Version, dem FlippingBook Publisher Business erforderlich.

Ich habe mir die Testversion des Publishers herunter geladen und einen schnellen Test mit einer druckfähigen PDF-Datei gemacht. Obschon die Datei etliche Megabyte Gewicht hatte, importierte Publisher sie schnell, völlig klaglos und ohne Fehler. Über die links im Programm angeordnete Eigenschaftenleiste sind die wesentlichen Optionen schnell zurecht konfiguriert. Über verschiedene vordefinierte Skins legt man die grundlegende Optik, die durchweg ansprechend wirkt, fest.

publ-com-publisher-screenshot

Schon während der Arbeit zeigt Publisher konsequent im WYSIWYG-Modus das spätere End-Produkt an. Sämtliche Änderungen wirken sich direkt auf die Optik des zentral angezeigten, zukünftigen Onlineinhalts aus. Rechts neben dem Inhaltsbereich finden Sie eine Möglichkeit schnell zwischen den einzelnen Seiten des Projekts zu wechseln und schnell einzelnen Seiten abweichende Optionen zu verpassen, etwa was die Hintergrundfarbe betrifft. Letzteres funktioniert natürlich nur bei ansonsten transparenten Vorlagen, also nicht bei meiner importierten PDF-Datei. Bei verschiedenen Dateiformaten, wie etwa bei dem von mir verwendeten PDF können Sie entscheiden, ob die Ursprungsdatei zusätzlich zur Publikation als FlippingBook zum Download angeboten werden soll.

Mit etwas Geduld und Spucke können Sie sich ein Dokument hinbasteln, dass sich von der visuellen Anmutung her kaum noch von einem Buch unterscheiden lässt. Skeuomorphismus hat ein Refugium gefunden, jetzt, wo Johny Ive dem Konzept den Garaus machen will. Sie können indes nicht nur Bücher mit Publisher erstellen. Der Eingangs-Bildschirm des Publisher macht Ihnen bereits einige Vorschläge.

publcom-neues-projekt

Ich entschied mich für den Typ "Katalog", der empfohlen wird, wenn man Geschäftsunterlagen, etwa Jahresberichte und anderes, sowie – natürlich – Kataloge publizieren will. Andere Projekttypen sind besser geeignet für Magazine oder Bücher. Eine Projektvorlage erlaubt die Erstellung einer Fotogalerie, bei der nicht das Risiko des Bilddiebstahls besteht…

Einige Beispiele für die unterschiedlichen Projekttypen können Sie sich direkt bei Publ.com ansehen.

FlippingBook Publisher: Wo Licht ist, …

Das Publisher-Werkzeug liegt gut in der Hand, ist schnell und zuverlässig und verhilft sehr schnell zu sehr ansprechenden Ergebnissen. Das will ich hier durchaus noch einmal vorweg schicken. Aber, auch hier ist nicht alles Gold was glänzt und so dürfen ein paar Schwächen nicht unerwähnt bleiben.

Als Wermutstropfen ist sicherlich zu bezeichnen, dass FlippingBooks auf Flash basieren. Man dachte es sich schon, als man erstmals den Pageflip-Effekt sah. Der Rechtsklick auf einer beliebigen Publikation bringt die Gewissheit. Natürlich kann nahezu jeder real installierte Browser mit dem Format umgehen. Die mobilen Plattformen werden über die dedizierte Reader-App entsprechend fit gemacht. Nur, die Zukunft gehört Flash sicherlich nicht. Da dürfte man schnell Einigkeit erzielen.

Da ist es gut, dass Publ.com automatisch auch HTML-Varianten der Inhalte erstellt. Davon kann man sich schnell überzeugen, wenn man etwa mit mobile Safari eine der Beispielpublikationen öffnet. Entsprechend fähige Browser sehen eine HTML5-Version, ältere Browser erhalten immerhin eine abgespeckte Basis-Fassung. Niemand wird demnach zurück gelassen.

Für Kunden, die ihre Publikationen kostenpflichtig an den Start bringen wollen, ihre Inhalte also verkaufen wollen, ist Publ.com ebenfalls weniger geeignet. Sicherlich, man kann in der höchsten Version einen Passwort-Schutz definieren und so steuern, wer die Inhalte lesen können darf. Kein Passwort, kein Lesen. Indes, zeitgemäß und etabliert ist die Vorgehensweise im Markt der Self-Publisher nicht. Hier müssen Inhalte direkt über die einschlägigen Plattformen, akzeptabel wären allenfalls noch App- und Play-Store, gekauft werden können.

Fairerweise will ich aber doch herausstellen, dass die Zielgruppe von Publ.com schon eher die Anbieter von Produktkatalogen oder sonstigen kostenlosen Publikationen sind, die möglichst schnell und möglichst breit, dabei ohne großes Gefrickel verteilt werden sollen. Und genau das leistet Publ.com uneingeschränkt.

Publ.com, die Inhalte-Cloud

In Anlehnung an die verschiedenen Versionen des FlippingBook Publisher bietet Publ.com drei verschiedene Bezahlpläne an. Im Tarif Basic kostet Publ.com inklusive FlippingBook Publisher Basic monatlich 29 Euro. Darin enthalten sind alle weiter oben beschriebenen Features der Basic-Version, 1 GB Speicherplatz und 50 GB Datenverkehr. Das Produkt darf auf einem Computer eingesetzt werden.

Für monatlich 39 Euro erhalten Sie den Tarif "Professional" mit den weiter oben beschriebenen Features, 2 GB Speicherplatz und 100 GB Traffic. Sie dürfen das Produkt dann auf zwei Arbeitsplätzen einsetzen. 69 Euro müssen Sie berappen, wenn Sie den vollen Leistungsempfang im Tarif "Business" einkaufen wollen. 5 GB Speicherplatz und 250 GB Bandbreite dürften auch für anspruchsvolle und populäre Inhalte hinreichend sein. Sie dürfen das Produkt auf drei Arbeitsplätzen und in einem fünfköpfigen Redaktionsteam mit entsprechendem Workflow zum Einsatz bringen. Alle genannten Preise gelten für eine Bindungsfrist von sechs Monaten. Buchen Sie direkt längere Zeiträume gewährt der Betreiber bis zu 25% Rabatt.

Publ.com lehnt sich auf Dienstseite direkt an das einfache Konzept seiner begleitenden Publisher-App an. Mit einem einzelnen Klick publizieren Sie das fertige Werk auf Publ.com. Der Vorgang könnte einfacher nicht sein. Damit eignet sich die Gesamtlösung auch für technisch weniger versierte Zeitgenossen.

publcom-cloud

Nicht unerwähnt bleiben sollen die umfangreichen Möglichkeiten, den Content mit anderen zu teilen. Direkt in den entsprechenden Reader-Apps finden Sie Optionen zum Teilen auf Facebook, Twitter, Google+, LinkedIn, Tumblr oder vKontakte. Finden Sie eine fremde Publikationen besonders interessant und hat der Ersteller das zugelassen, so können Sie diese per Embed-Code auf Ihrer Website einbauen und so die Verbreitung unterstützen.

Besonders für Produktkataloge interessant sind die Features zum Einbinden von Videos und Weblinks, sowie die Möglichkeit, in die Publikation direkt Warenkorb-Funktionalität zu integrieren oder einen solchen direkt von dort aus anzusprechen. Es sind gerade die letztgenannten Features, die die Zielgruppe nochmal besonders deutlich definieren.

Fazit: Mit Publ.com wird jeder zum Publisher. Das Veröffentlichen der eigenen Publikationen geht sehr einfach von der Hand und ist auch von technischen Laien schnell erlernt. Hier hilft der schlanke, fast schon stromlinienförmige Workflow des sehr guten Werkzeugs FlippingBook Publisher. Mit Flash setzt Publ.com zwar nicht unbedingt auf eine Technologie der Zukunft, dafür sorgen aber automatisch erstellte HTML-Versionen für lückenlose Unterstützung auch älterer Browser. Darum muss sich der Inhalteersteller nicht einmal ausdrücklich kümmern.

Publ.com eignet sich vornehmlich für Anwendungsfälle, in denen große Mengen Content möglichst schnell und breit gefächert verteilt werden soll. Weniger bis gar nicht eignet sich der Service für Publisher, bei denen der Inhalt der Publikation auch das Produkt ist. Das Verkaufen der erzeugten Publikationen ist in Publ.coms Genen nicht angelegt. Gehört man jedoch zur Zielgruppe, macht man keinen Fehler mit einer Entscheidung für einen der – nicht ganz billigen – Bezahlpläne…

Weitere Links zum Beitrag