Tag "Technik"
medani web & design wien bietet moderne Technik am Puls der Zeit. Ob individuelle Programmierungen mit PHP und MySQL, Content Management Systeme (CMS) wie WordPress oder Joomla oder auch Online Shops. Alle von medani web & design produzierten Lösungen setzen auf neueste Standards in der Webentwicklung und bieten Ihnen einen großen Komfort in der Bedienung
Suchmaschinenoptimierung – Tool (Advanced Web Ranking)
Suchmaschinenoptimierung und Arbeiten an der Webseite sind Grundvoraussetzung, um in Suchmaschinen gefunden zu werden und das Ranking zu verbessern. Bevor allerdings mit den Arbeiten zur Suchmaschinenoptimierung (SEO = Search Engine Optimization) begonnen werden kann, muss die zu optimierende Seite analysiert werden.
Im Artikel “Seotool” hat medani web & design eine OpenSource Analytics-Lösung vorgestellt.
Google Analytics und andere Tools überwachen dabei den direkten Trafic auf der Webseite. Wenn man von einer Seite zusätzlich das Ranking in Suchmaschinen wissen möchte, kann man entweder direkt über Google suchen um den aktuellen Rang und alle zusätzlichen Infos die man benötigt, festzustellen. Oder man benutzt ein professionelles Tool, über das die Webseite mit fix vergebenen Keywords überprüft werden kann. Täglich werden dann die neuen Daten von Google geholt und das aktuelle Ranking festgestellt.
Eine Möglichkeit zur laufenden Überwachung und Analyse des Ranking von Webseiten ist die kostenpflichtige Software Advanced Web-Ranking. Mit diesem Tool ist es möglich beliebig viele Webseiten mit beliebig vielen Keywords zu überwachen und auszuwerten. Das Keyword research Tool bietet dabei die Möglichkeit weitere relevante Keywords zu finden. Nebenbei kann man auch verschiedene Auswertungen über frei zu wählende Zeiträume ansehen.
Ein großer Pluspunkt der SEO Software ist die Ansicht von einzelnen Keywords. Die gewählten Keywords werden nicht nur mit dem aktuellen Rang in der Suchmaschine gezeigt. Standardmäßig werden neben “Position” (site ranking), Vorher, Bester Rang, Änderung etc. auch die jeweiligen Seiten gelistet.
Die Ergebnisse der Software können sehr übersichtlich verglichen und analysiert werden. Dank der Sichtbarkeit der Änderungen in Plus- und Minuswerten kann zusätzlich ein Trend herausgelesen werden, was die weitere Suchmaschinenoptimierung beeinflusst. Um die Keywords leichter aufzufinden, können diese in Kategorien gelegt werden.
Selbstverständlich bietet das Tool neben dieser noch sehr einfachen Analyse noch viele weitere Funktionen.
Verschiedene Suchmaschinen inklusive Google.com, Google.at, Google Adwords, Bing, Yahoo, Alexa und andere können für die Analyse für jedes einzelne Projekt frei konfiguriert werden. Um wichtige Keywords besser hervorzuheben und leichter zu finden können diese farblich verändert werden.
Um die Daten übersichtlich für Präsentationen oder zu weiteren Analysezwecken darzustellen, können verschiedene Berichte generiert und exportiert werden. Das Layout des Reports kann dabei über die Einstellungen verändert und angepasst werden. Neben FTP-Profilen können ebenfalls Kundendaten in einem integrierten Adressbuch verwaltet werden.
Unter den Einstellungen können auch verschiedene Browser eingestellt und verwaltet werden. Über diese Browser wird die Suchmaschinenanalyse durchgeführt.
Eine Diagrammansicht, als auch ein direkter Konkurrenzvergleich sind ebenfalls in das Tool integriert.
Eine der interessantesten Analysemöglichkeiten ist die “Suchbegriff-Analyse”. Über diese können einzelne Suchbegriffe auf Vorkommen, Dichte und Prominenz untersucht werden. Ausgelesen werden dabei Titel, Links, Alt-Attribute von Bildern, Meta Keywords, Meta Description und natürlich der Header. Allgemeine Informationen wie die URL, Domain, IP-Adresse, Google Page Rank, Alexa Traffic Rang und die Seitengröße werden dabei ebenfalls ausgelesen.
Natürlich können Daten bei Bedarf auch außerhalb der frei zu wählenden Zeitpläne manuell upgedatet und neu geladen werden. Die Einstellung hier läuft von der Aktualisierung einer einzelnen Webseite über mehrere Webseiten bis hin zu alle Webseiten aktualisieren. Das Aktualisieren aller verwalteten Projekte und Webseiten dauert natürlich je nach Aufwand mehr oder weniger lang.
Advanced Webranking ist eine interessante Software und bietet große Funktionalität für die Analyse von Webseiten. Für professionelle SEO-Agenturen ein absolut starkes Tool, das die Analyse und Überwachung des Google Rankings deutlich vereinfacht. Dank Advanced Webranking können Entscheidungen und die Kontrolle der Erfolge noch effizienter durchgeführt werden. Daher verwendet medani web & design Advanced Web Ranking seit vielen Jahren, um seinen Kunden gute Ergebnisse liefern zu können.
Kommentare deaktiviert
Fachartikel | medani web & design | News | SEO | Suchmaschinen Marketing | Suchmaschinen Optimierung | Suchmaschinenoptimierung | Technik mobile Webseiten – Subdomain mit Redirect
Viele Webseiten bieten nicht nur die Möglichkeit mit mobilen Geräten auf sie zuzugreifen, sondern erkennen automatisch mobile Geräte und schalten auf das mobile Design um.
Bei manchen Seiten findet man sogar einen Schalter zum “Switchen” (Hin- und Herschalten) zwischen den Ansichten.
Dabei gibt es drei Möglichkeiten um Webseiten für mobile Geräte und Smartphones fit zu machen.
Möglichkeit 1:
Die Erstellung und Einbindung einer eigenen CSS Datei für mobile Geräte. Dabei werden meist große Bilder und Teilbereiche der Webseite einfach ausgeblendet, sowie die Größe und das Layout angepasst, um eine verbesserte Darstellung auf mobilen Geräten zu erreichen. Gerade bei umfangreichen Webseiten kann das Styling sehr aufwändig sein. Da die Seite nur generell für mobile Endgeräte und Smartphones optimiert wird, kann es mit verschiedenen Geräten, den verschiedenen (mobilen) Browsern und natürlich durch die unterschiedlichen Auflösungen der Displays immer wieder zu Problemen in der Darstellung kommen.
Das Hauptproblem bei Smartphones, Tablets und mobilen Geräten: Jede Menge verschiedene Auflösungen, verschiedene Browser und Smartphone Betriebssysteme (IE Mobile, Firefox Mobile, iPhone, iPad, Android Systeme, Blackberry, Windows Phone 7, …). Eine Mischung aus diesen Komponenten macht es fast unmöglich eine Webseite für alle Geräte zu optimieren.
Möglichkeit 2:
Die 2te Möglichkeit um etwas ideal auf dem Handy oder Smartphone darzustellen sind Apps. Diese sind nicht unbedingt etwas Neues, da Linux User schon seit Jahren Anwendungen über das Internet installieren. Richtig durchsetzen konnten sich die Apps aber erst richtig mit dem iPhone von Apple. Mittlerweile bieten fast alle Hersteller die Möglichkeit Apps herunterzuladen, zu kaufen und zu installieren.
Die Apps wirken aufgeräumt, sind auf das Wesentliche reduziert und einfach zu bedienen. Daher auch der große Erfolg. Großer Nachteil von Apps: Sie sind nicht anpassungsfähig und können meist nur unter großem Aufwand für ein anderes System verfügbar gemacht werden. iPhone Apps bleiben somit auf dem iPhone, Android Apps bleiben auf Android und Windows Phone Apps bleiben auf dem Windows Phone Betriebssystem. Für spezielle Anwendungen können Apps durchaus Vorteile bieten. Bei Webseiten sind sie aber nicht ideal, da sie nicht auf allen Geräten laufen.
Beide Varianten bieten einige Vor- und Nachteile. Ein eigenes Stylesheet und die Seite bleibt Plattformunabhängig. Jedoch wird die Seite oft nicht ideal dargestellt. Bei Apps erhält man zwar eine ideale Darstellung des Inhalts, allerdings ist man nicht Plattformunabhängig und muss die App extra auf dem Telefon installieren.
Genau an diesem Punkt setzt Möglichkeit 3 an:
Stichwort: mobiles Webdesign und Webapps (Webapplikationen)
Viele große Webseiten wie zum Beispiel Google oder Facebook machen es uns vor. Unter einer Subdomain kann man eine mobile Version der Webseite aufrufen. Idealerweise muss diese nicht extra geklickt werden denn mobile Geräte, Smartphones, Tablets und mobile Browser können automatisiert ausgelesen und erkannt werden. Danach ist eine automatische Weiterleitung auf die mobile Version möglich. So können Sie einfach mit Ihrem Smartphone, iPhone, Tablet, iPad etc. die normale Webseite öffnen und werden auf eine mobile Version geleitet. Ein Umschalter, um auch die Originalversion zu sehen, ist natürlich ebenfalls einfach zu realisieren. Die mobile Version kann dabei flexibel wie eine App gestaltet werden und ist im Layout für mobile Endgeräte optimiert. Durch die Realisierung im Web entfällt dabei allerdings eine lokale Installation und die Seite ist somit Plattformunabhängig und kann auf jedem Gerät betrachtet werden.
Die automatische Weiterleitung funktioniert übrigens nicht nur auf iPhone, iPad und Android Systemen. medani web & design inkludiert und unterstützt dabei ebenfalls Blackberry, Nokia, Symbian, Windows Mobile, Opera Mini, Mozilla Firefox Mobile (Fennec) und die meisten anderen Systeme. Selbstverständlich kann diese auch in bestehende WordPress Systeme, sowie in Webapplikationen integriert werden.
Lesen Sie mehr über mobiles Webdesign.
Lesen Sie mehr über Webapplikationen.
Kommentare deaktiviert
Fachartikel | medani web & design | mobiles webdesign | News | Programmierung | Technik | Webapplikationen | Webdesign Wien | webprogrammierung Mitarbeiter Datenbank
medani web & design hat für on tour Marketing eine neue Mitarbeiter Datenbank programmiert!
In dieser Datenbank sollen Mitarbeiter nicht nur angelegt und bearbeitet werden können, sondern auch zu Projekten zugeordnet werden können.
Facts zum Tool:
- User anlegen / bearbeiten
- verschiedene Zugangsberechtigungen
- Mitarbeiter anlegen / bearbeiten
- Dateiupload zu Mitarbeitern (Bild, PDF, Word, Excel…)
- Projekte anlegen / bearbeiten
- Projektzeiträume festlegen
- Bewertung von Mitarbeitern (Star-Rating mit jQuery) zu einzelnen Projekten
- Secure Login (sicheres Einloggen) durch zusätzliche Sicherheitsmaßnahmen
Ziel des sehr speziellen Mini-CRM (Customer Relationship Management) ist sowohl die Verwaltung der Mitarbeiter, als auch der Projekte. Mitarbeiter können dabei zu Projekten zugeordnet werden. Nach Ablauf des Projekts können Mitarbeiter bewertet werden und auch Anmerkungen zur Arbeit des Mitarbeiters eingetragen werden. In der Ausbaustufe soll so eine objektive Bewertung von Mitarbeitern erfolgen, um für neue Projekte die besten Mitarbeiter auswählen zu können.
Administratoren dürfen natürlich alle Daten einsehen und ändern. Ebenso dürfen Administratoren nicht nur Mitarbeiter, sondern auch neue Systemuser generieren.
Sachbearbeiter hingegen haben keinen Zugriff auf die Systemuser und dürfen nur Mitarbeiter und Projekte verwalten.
Als zusätzliches Feature wurde ein eigenes klickbares Captcha entwickelt, dass die Sicherheit beim Login weiter steigern soll. Passwörter werden selbstverständlich verschlüsselt und das Tool wurde ebenso gegen SQL-Injection abgesichert.
Weiters soll das Tool in Zukunft eine Schnittstelle zu den anderen Tools von on tour Marketing bieten. Dadurch sollen Mitarbeiter nicht mehr in jedes Tool eingepflegt werden müssen, sondern die Mitarbeiterdaten und Passwörter kommen direkt aus der Mitarbeiterdatenbank und werden automatisiert in Reporting- und Promotiontools eingespeist. Dadurch können Mitarbeiter zentral an einer Stelle bearbeitet und verwaltet werden und die anderen Tools werden dadurch einfacher und schneller wartbar.
Kommentare deaktiviert
jQuery | Leistungen | medani web & design | Programmierung | Technik | Webapplikationen | webprogrammierung Webdesign Trends 2011
Gerade im Webdesign gibt es immer wieder Tendenzen zu Neuerungen in Technik und Design. Webseiten von Heute können mit dem Design, das vor 3-5 Jahren modern war eigentlich gar nicht mehr verglichen werden. Neue Begriffe, Ideen und Techniken prägen das Web und heben einerseits die Vernetzung und Kommunikation auf eine andere Stufe. Andererseits werden Designer und Programmierer dabei vor ständig neue Herausforderungen gestellt. Dabei immer die richtigen Trends zu erkennen, ist nicht einfach aber wichtig. Wichtig deshalb, da man nicht viel Energie in neue Technologien stecken möchte, die sich vielleicht nie durchsetzen. Auf den großen Mainstream zu warten ist dabei aber die falsche Methode, da man sonst schnell wieder technisch veraltet ist. medani web & design erkennt Trends frühzeitig und setzt diese erfolgreich bei seinen Kunden ein. Eine kleine Prognose zu den Webdesign-Trends 2011:
Funktionalität:
2011 wird eindeutig kein Schönheitswettbewerb. Verschnörkelte und extrem verschachtelte Webseiten sind out. Stattdessen wird jetzt wieder mehr Wert auf Funktionalität, Usability und klare Struktur gelegt. Grund dafür sind vor allem die Entwicklungen im mobilen Bereich. Außerdem wollen die User finden wonach gesucht wird. Schwer übersichtliche Seiten werden daher sicher leiden.
Content & Social Web:
Ebenso wird der deutschsprachige Raum mit Content überflutet werden. 100e neue Blogs und Seiten sorgen für viel Diskussionsstoff und viele Meinungen. Dank Facebook weiß jeder über Alles Bescheid. Dabei haben im letzten Jahr auch die Webseiten Facebook für sich entdeckt und viele haben bereits einen eigenen Facebook-Like Button auf der Seite installiert. Die große Frage bei Social Web ist allerdings: Wann und ob ein ernstzunehmender Facebook-Konkurrent ins Rennen geschickt wird. Ein Ansatz dafür wäre zumindest Diaspora. Leider befindet sich das aussichtsreiche Projekt noch im Alpha Stadium. Ein offizieller Release und wann es fehlerfrei funktioniert, ist leider noch nicht ersichtlich. Für Experten mittlerweile ein alter Hut, wird Social Web 2011 jedoch sicher in Unternehmen diskutiert werden und auch hier breitere Unterstützung finden.
HTML5 & CSS3:
Bereits letztes Jahr haben sich einige Techniken aus CSS3 und HTML5 im Webdesign etabliert. Größte Errungenschaften sind dabei sicher Webfonts, Schatten, Transparenzen und Video. Dank Internet Explorer 9 und den neueren Versionen von Firefox, Opera, Safari, Chrome und Co. werden die beiden Techniken sich sicher noch breiter durchsetzen und auf vielen neuen Seiten zum Einsatz kommen. Bereits jetzt gibt es eine große Fülle an Beispielen.
Mobile Webseiten:
Einer der größten Trends für Webdesign, Webapplikationen und Webprogrammierung ist sicher die mobile Verfügbarkeit von Seiten. Smartphones und Co. haben sich 2010 endgültig durchgesetzt. Neu dazugekommen sind Tablets. Diese beiden Geräteklassen machen das Web immer und überall verfügbar. Wir gehen nicht mehr ins Internet, sondern haben es immer griffbereit dabei. Dementsprechend müssen auch Webseiten fähig sein diese Geräte abzudecken und das Design sollte für Touchscreens ausgerichtet sein.
Große Hintergrundbilder:
Dank steigender Übertragungsraten ist auch die Darstellung von großen Hintergrundbildern kein Problem mehr. Dementsprechend werden diese auch im Jahr 2011 verstärkt eingesetzt werden. Slideshows und Animationen mit jQuery gehören hier ebenfalls dazu.
QR – Quick Response:
Wir alle kennen Sie und eigentlich sind sie nichts Neues. Große quadratische Barcodes. Fast auf jeder Eintrittskarte und/oder Bahnticket finden wir einen dieser Codes. Dank mobilen Geräten erhält dieser Code jetzt aber eine neue Bedeutung. Denn Smartphones (egal ob iPhone, Android oder WindowsPhone7 Geräte) können diese Codes mit der Kamera erkennen. Dadurch kann automatisch zum Beispiel ein Produkt erkannt werden, als auch auf Visitenkarten ein passender Link zur Webseite zur Verfügung gestellt werden. Man muss nur auf dem Handy die Kamera aktivieren, auf den Code halten und die Webseite öffnet sich prompt. Eine praktische Sache also!
Thumbnail Browsing
Eine große Freude haben Webdesign-Agenturen mit dem neuen Google-Feature “thumbnail browsing”. Dabei wird in der Google Suche bereits eine Vorschau auf die Seite angeboten. Unübersichtliche Seiten oder Seiten mit schlechtem Design werden von Kunden dabei eher ausgelassen. Flash-Seiten werden in dieser thumbnail-browsing Funktion übrigens nicht angezeigt. Google arbeitet aber angeblich bereits mit Hochdruck daran. Thumbnail Browsing wird sich auch auf das Suchmaschinenranking einiger Seiten auswirken. Welche anderen SEO-Neuheiten uns Google und Co. dieses Jahr noch bescheren wird, bleibt abzuwarten. medani web & design wird jedenfalls über Neuerungen berichten.
– Gerhard Waschier, dipl. Mediendesigner (Anfrage)
jQuery mit anderen Bibliotheken nutzen
Immer wieder gibt es Probleme, wenn man mehrere JavaScript Bibliotheken gleichzeitig in einem Projekt benutzt. Daher sollte man sich Grundsätzlich auf eine Bibliothek beschränken. Leider ist das nicht immer möglich, da die verwendete Bibliothek eine benötigte Funktion vielleicht eben mal nicht zur Verfügung stellt und daher zusätzlich eine weitere Bibliothek eingebunden wird.
Doch gerade das führt zu Überschneidungen und sorgt dafür, dass benötigte JavaScript Funktionen oft nicht mehr richtig funktionieren oder für schwere Fehler auf der Seite sorgen.
Grund dafür ist, dass sowohl jQuery als auch andere Bibliotheken wie Prototype, script.aculo.us, Motools und andere bekannte Bibliotheken für Funktionen das $ Zeichen benützen.
Was also tun, wenn man jQuery mit anderen Libraries nutzen möchte ohne dass sich die Skripten gegenseitig behindern?
Die Lösung des Problems ist der in jQuery integrierte non conflict Modus.
jQuery bietet diesen Modus um eben solche Probleme zu vermeiden. Anstelle von $ werden Funktionen von jQuery nach Aufrufen dieses Moduses mit jQuery aufgerufen.
Hier ein Beispiel um jQuery mit Prototype gleichzeitig zu verwenden:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script> jQuery.noConflict();
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){ jQuery("div").hide(); });
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body>
Irgend ein Inhalt
</body>
</html>
- Gerhard Waschier, dipl. Mediendesigner (Anfrage)
Kommentare deaktiviert
Fachartikel | jQuery | medani web & design | Programmierung | Technik | Webdesign Wien | webprogrammierung Webapplikationen
Webapplikationen (manchmal auch als Webanwendung bezeichnet) sind Programme, die auf einem Webserver ausgeführt werden. Aufgerufen werden diese Programme im Normalfall über einen Browser. Der Webserver kann entweder intern im Intranet oder extern im Internet verfügbar sein. Prinzipiell spielt dabei die räumliche Entfernung zum Client (Benutzer der Webapplikation) keine Rolle.
Der Client ruft dabei die URL der Applikation auf und der Server übernimmt die Anfrage und generiert oder lädt den ausführbaren Code. Die dabei generierte Webseite ist die Benutzeroberfläche der Webanwendung. Dabei muss nicht immer unbedingt HTML und CSS zum Einsatz kommen. Manche Webapplikationen setzen auf Flash oder Silverlight. Eine weitere Möglichkeit um Webanwendungen zu realisieren sind JAVA Programme.
Flash, Silverlight und Java bieten die Möglichkeit moderne, mit grafischen Effekten und Videosequenzen aufgepeppte, Applikationen zu entwickeln. Allerdings benötigt der Client zusätzliche Plugins, um ein Programm aufrufen zu können.
HTML & JavaScript funktionieren jedoch auf allen gängigen Browsern standardmäßig. Mit Hilfe von AJAX (jQuery) können zum Beispiel Effekte und eine bessere Usability ebenfalls sehr gut umgesetzt werden.
Grundsätzlich unterscheiden wir zwischen 2 Arten von Webapplikationen:
- RIA(Rich Internet Application):
Echte Webapplikationen, die mit Hilfe von AJAX, Flash, Java, etc. Programmlogiken teilweise auf dem Client berechnen. - Webservices:
ein Webserver stellt Daten in strukturierter Form zur Verfügung (zum Beispiel als XML, RSS…). Primär sind Webservices nicht zur direkten Ansicht gedacht, sondern sollen die Daten nur zur Weiterverarbeitung zur Verfügung stellen. Eine direkte Interaktion des Benutzers ist dabei nicht zwingend notwendig.
Vorteile von Webapplikationen:
Webanwendungen setzen keine spezielle Software voraus. Mit Hilfe eines einfachen Webbrowsers ist die Applikation ortsunabhängig verfügbar. Zusätzlich wird dabei eine große Plattformunabhängigkeit erreicht. Bei Änderungen am Programm muss nicht jeder Programmnutzer ein Update oder gar die neue Applikation installieren, da Änderungen zentral am Server vorgenommen werden. Zusätzlich kann eine mobile Version der Anwendung erstellt werden, um Daten auch auf iPads, Handys, iPhones und anderen Smartphones zur Verfügung stellen zu können.
Nachteile von Webapplikationen:
Für die Nutzung von Webanwendungen wird generell die Verbindung zum Webserver benötigt. Die Datenrate der Verbindung sollte die Anforderungen der Webanwendungen erfüllen können, wobei die Verbindungsgeschwindigkeit mittlerweile keine echte Hürde mehr darstellt. Außerdem können je nach Art der Applikation Sicherheit und Skalierbarkeit des Systems eine große Rolle spielen.
- Gerhard Waschier, dipl. Mediendesigner (Anfrage)
Kommentare deaktiviert
Fachartikel | jQuery | Leistungen | medani web & design | Programmierung | Technik | Webapplikationen | webprogrammierung Was ist jQuery?
Oft hört man im Web die Begriffe AJAX und jQuery. medani web & design versucht eine Erklärung der beiden Begriffe in verständlichen Worten.
AJAX
Ajax bedeutet nichts anderes als “Asynchronous JavaScript and XML”. Dabei handelt es sich um ein Konzept, um Daten asynchron zwischen dem Browser und dem Server zu übertragen. Dadurch können Teile der Internetseite geändert werden ohne die komplette Seite neu zu laden. Ziel ist es ein desktopähnliches Verhalten zu erzielen. Die wohl bekannteste Anwendung dabei ist die Google Suche. Ist Ihnen schon einmal aufgefallen, dass Ihnen beim Tippen automatisch Suchvorschläge gebracht werden, die sich mit jedem weiteren Buchstaben verändern und genauer werden? Das ist die Google-Suggest oder auch Autocomplete-Funktion genannt und funktioniert über AJAX.
Außerdem werden mit AJAX weitere Effekte wie Drag & Drop, sortierbare Tabellen, Animationen ohne Flash, Accordion und viele andere Effekte ermöglicht.
jQuery
jQuery ist eine JavaScript-Bibliothek, welche die Entwicklung von AJAX-Funktionen erleichtert und beschleunigt. So müssen viele Funktionen nicht immer neu programmiert werden, sondern können einfach und komfortabel in den Quellcode eingebunden werden. Die Bibliothek besteht dabei aus einer JavaScript-Datei, die die grundlegenden Ajax-Funktionen und gängigen Effekte enthält.
jQuery ist nicht die einzige JavaScript Bibliothek, aber auf jeden Fall eine der umfangreichsten und verbreitetsten. Zusätzlich zu den Standardfunktionen kann jQuery mit Plugins erweitert werden. Durch eine starke Community im Hintergrund wird jQuery laufend weiterentwickelt. Ein weiterer Versuch die Entwicklung mit jQuery noch weiter zu beschleunigen und noch komfortabler zu gestalten ist jQueryUI. Dabei werden die wichtigsten und meist benutzten Funktionen wie zum Beispiel Datepicker, Calendar, Autocomplete Funktion etc. zusammengefasst und können noch einfacher eingebunden werden.
- Gerhard Waschier, dipl. Mediendesigner (Anfrage)
1 Kommentar
Fachartikel | jQuery | News | Programmierung | Technik | Webdesign Wien | webprogrammierung Firefox 4 Beta 8
Lange ist das aktuelle Update für den Firefox 3.6 noch nicht gestartet. Doch schon scharrt eine neue Browser-Generation von Mozilla in den Startlöchern. Firefox 4 wird vermutlich schon Anfang 2011 offiziell veröffentlicht. Und da hat sich einiges getan. medani web & design hat den Browser in der aktuellen Beta-Version heruntergeladen und vorab getestet.
Die Installation erfolgt wie bereits bei den vorherigen Versionen äußerst schnell und einfach. Nach öffnen des Browsers bietet sich einem dann ein neues Bild. Firefox wurde grafisch abgespeckt. Die Tabs befinden sich jetzt oberhalb der Adressleiste und auch das Menü wurde auf einen einzigen Firefox Button zusammengezogen. Bei Bedarf kann allerdings die normale Menüleiste wieder aktiviert werden. Auch die Plugins und Addons werden jetzt nicht mehr in einem neuen Fenster geöffnet, sondern übersichtlich in einem Tab dargestellt. Die Buttons sehen noch schicker aus und alles in allem sieht die grafische Überarbeitung mehr als nur gelungen aus.
Doch die grafischen Änderungen sind nicht die Einzigen. Auch unter der Haube hat sich bei Firefox einiges getan. So werden Seiten jetzt noch schneller geladen und auch JavaScript wird dank der neuen Rendering Engine “Jägermonkey” deutlich beschleunigt. Insgesamt reagiert der neue Firefox sehr schnell auf Eingaben.
Leider waren in der aktuellen Beta-Version viele Plugins noch nicht kompatibel. Sicher ändert sich das aber wieder schnell, so wie wir das von Mozilla Produkten gewohnt sind.
Fazit:
Dank der verbesserten Engine, der neuen JavaScript-Engine Jägermonkey werden Seiten deutlich schneller geladen und aufgebaut. Das neue Gewand in dem der Browser kommt ist nicht nur nett anzusehen, sondern auch deutlich übersichtlicher. Ebenso bekommen Webseiten durch das neue Styling deutlich mehr Platz. Der Browser wirkt stabiler und aufgeräumter. medani web & design freut sich bereits jetzt auf den neuen Firefox.
Reporting Tool – Webprogrammierung
medani web & design hat ein neues Reporting-Tool für den Kunden on tour Marketing online gebracht!
Das Tool ermöglicht österreichweit getätigte Arbeiten zu erfassen und zentral auszuwerten.
Facts zum Tool:
- Erfassen von Trafiken
- Erfassen von Mitarbeitern
- Mitarbeiter zu Trafiken zuordnen
- Verschiedene Zugangsberechtigungen
- Multi Bildupload
- Zahlreiche Statistikauswertungen
- Statistiken als Excel downloaden
Ziel des Reportingtools ist eine Aufzeichnung der getätigten Arbeiten eines Mitarbeiters. Dadurch kann nachvollzogen werden, welcher Mitarbeiter wo und wann welche Arbeiten getätigt hat. Um die Dekotour des Mitarbeiters nicht nur in Zahlen sichtbar zu machen, wurde eigens für den Kunden ein Multiuploader in das Tool programmiert, um bequem mehrere Bilder gleichzeitig hochladen zu können.
Die knapp 5.000 Trafiken wurden dabei mittels eines eigenen Importers in das System importiert und die jeweiligen Mitarbeiter fast vollständig automatisiert den einzelnen Trafiken zugeordnet.
Der Admin hat natürlich Kontrolle über alle Mitarbeiter, Trafiken und Auswertungen und kann bei Bedarf Mitarbeiter neu anlegen und zuweisen.
Ebenfalls können die Arbeiten zusätzlich dokumentiert werden. Die Bilder selbst werden in einer Lightbox vergrößert dargestellt.
Tobaccoland hat als Auftraggeber Einsicht in die Statistiken und kann Trafiken einzeln einsehen, oder auch eine Gesamtstatistik als Excel-Datei downloaden. Dadurch werden verschiedene Auswertungen ermöglicht.
Kommentare deaktiviert
jQuery | Kunden | medani web & design | Programmierung | Technik | Webapplikationen | Webdesign Wien | webprogrammierung WordPress 3.1 – Aussicht
Weihnachten steht vor der Tür? Viel wichtiger für unsere Kunden: WordPress3.1 steht vor der Tür!
Bereits am 15.Dezember soll der neue Kandidat offiziell laut Plan ins Rennen starten. medani web & design hat die neue Version natürlich vorab getestet und einige Neuerungen festgestellt.
Dabei sticht sofort die noch klarer strukturierte Benutzeroberfläche ins Auge. Außerdem wurde der Code aufgeräumt, um die Performance weiter zu verbessern. Die browserübergreifende Darstellung wurde vor allem hinsichtlich des bald erscheinenden Internet Explorer 9 verbessert und optimiert. Neue Funktionen selbst wurden dabei kaum implementiert.
Das Hauptaugenmerk des neuen WordPress liegt eindeutig auf der Verbesserung der aktuellen Funktionen und der Usability. Das Backend wurde stark überarbeitet. Dabei sind die Spalten jetzt mit modernem AJAX sortierbar (nach Titel, Datum, Kategorie, etc.), um einzelne Artikel noch schneller zu finden. Auch die Pagination wurde verbessert. So können jetzt wie gewohnt aus einem PDF-Dokument einzelne Seiten direkt angewählt werden und man muss sich nicht mehr durch alle Seiten durchklicken. Ein eindeutiger Pluspunkt für die Usability!
Ebenfalls neu in der neuen WordPress-Version sind Artikelvorlagen. Dadurch können verschiedenen Artikeln verschiedene Layouts zugewiesen werden. Die Formatierung der einzelnen Seiten wird dadurch voll automatisiert weiter differenziert und individualisiert. Allerdings muss ein Theme / Template dieses Feature unterstützen.
Ein weiterer großer Pluspunkt ist die verbesserte interne Verlinkung. Wir kennen alle das Problem auf einen internen Artikel auf der Seite verweisen zu wollen und diesen erst mühselig suchen zu müssen. Die neue Funktion für interne Verlinkungen stellt jetzt eine integrierte Suchfunktion zur Verfügung, über die Seiten und Artikel einfach gefunden und verlinkt werden können.
Neu im Frontend ist die Admin-Bar. Diese ermöglicht es eingeloggten Usern direkt vom Frontend auf wichtige Seiten im Backend zuzugreifen und vereinfacht damit die Verwaltung der Webseite.
Fazit:
WordPress 3.1 bietet kaum wirkliche neue Features. Die Usability selbst und die Verwaltung des Systems wurden aber deutlich verbessert. Die Verwaltung der eigenen Webseite wird in Zukunft mit WordPress noch einfacher und intuitiver. Wir freuen uns schon auf den 15.Dezember und sind weiter gespannt, welche Neuerungen und Entwicklungen uns WordPress noch mit den zukünftigen Versionen bieten wird.
2 Kommentare
CMS | Content Management System | News | Technik | webdesign Vorschau | Webdesign Wien | WordPress Mozilla Prism
Mozilla Prism heißt das interessanteste neue Produkt aus dem Hause Mozilla. Wie bereits Adobe Air oder Microsoft Silverlight schickt damit Mozilla ein Programm ins Rennen, das es ermöglicht Applikationen aus dem Web direkt auf den Desktop zu bringen.
Größter Vortei gegenüber den Konkurrenten dürfte dabei die einfache Nutzung des Tools sein. Im Gegensatz zu Adobe Air oder Microsoft Silverlight muss keine eigene Applikation geschrieben werden um Prism einzusetzen, da Prism im Prinzip eine abggespeckte Form des Firefox ist. Webseiten können so direkt über Prism als Symbol am Desktop aufgerufen werden. Valides HTML wird dabei genauso unterstützt, wie Javascript, AJAX-Applikationen oder auch moderne Effekte von aktuellen CSS3 Stylesheets wie zum Beispiel rounded-corners oder box-shadow. Dadurch können bei der Entwicklung von neuen Webtools und Webapplikationen die neuesten Features und Ideen zu Usability und Design eingesetzt werden.
Sie können zum Beispiel Ihre Google-Analyitcs, Piwik-Analytics, Facebook, GoogleMail oder auch moderne Webapplikationen bequem über Prism aufrufen ohne zuvor eine URL einzugeben oder Ihren Browser zusätzlich zu belasten.
Nach einem Test hat medani web & design den Mozilla Prism bereits erfolgreich im Einsatz. Unsere neuen Produkte aus der Webprogrammierung werden bereits so entwickelt, dass Tools nicht nur im Internet Explorer, Safari, Firefox & Co. laufen, sondern auch in Mozilla Prism einwandfrei funktionieren. Gerade für die Webprogrammierung bietet Mozilla Prism eine interessante Möglichkeit moderne Webapplikationen auf den Desktop zu bringen ohne großen zusätzlichen Entwicklungsaufwand.
Fazit:
Mozilla Prism birgt großes Potential und ist ein großer Schritt in Richtung mobiler Desktop. Vor allem für die Entwicklung solcher Applikationen ist es besser als Adobe Air oder Microsoft Silverlight, da Produkte für das Web in klassischem XHTML, HTML und Stylesheets entwickelt werden können. Ebenfalls die Unterstützung von Javascript und die damit verbundene Möglichkeit jQuery oder andere JavaScript-Bibliotheken einzubinden machen das Tool zu einem interessanten und vielseitig einsetzbaren Programm.
Promotiontool – Webprogrammierung
medani web & design hat ein neues Tool zur Überwachung von laufenden Promotions online gebracht!
Facts zum Tool:
- Erfassen von Shops
- Erfassen von Mitarbeitern
- Promotoren zu Shops zuordnen
- Verschiedene Zugangsberechtigungen
- Zahlreiche Statistikauswertungen
Ziel des Projekts ist es die volle Kontrolle über aktuelle Promotions zu erhalten. Dabei werden alle Shops im System erfasst und es können Supervisoren, Personaldienstleister und Promotoren zugeordnet werden.
Die Supervisoren können dabei die gesammelten Daten direkt im System eingeben. Nach Eingabe der Daten steht dem Kunden live eine Auswertung und Statistik zur Verfügung. Als Auftraggeber sehen Sie auf einen Blick wie viele Abschlüsse in Summe gemacht wurden und in welchen Shops und/oder zu welchen Uhrzeiten die Abschlüsse gemacht wurden.
Zusätzlich kann man täglich zu jedem Shop und zu jedem Promotor einen Kommentar hinterlassen, um wichtige Vorkommnisse zu dokumentieren.
Kommentare deaktiviert
jQuery | News | Programmierung | Technik | Webapplikationen | webprogrammierung CSS3 – Neuheiten
Neuigkeiten gibt es aus dem Bereich der Stylesheets. Seit mittlerweile fast 10 Jahre entwickelt das W3C die neuen Spezifikationen für CSS3 in enger Zusammenarbeit mit den Browserherstellern. Mittlerweile gilt ca. 1/4 der Spezifikation als “Stabil”.
Viele der neuen Selektoren werden bereits von den verschiedenen Browsern umgesetzt und richtig interpretiert. Auch können die neuen Selektoren gefahrlos in Webdesigns umgesetzt werden, da unbekannte CSS-Anweisungen und Selektoren von den Browsern einfach ignoriert werden.
CSS3 baut vor allem die Pseudoklassen deutlich aus. Eine wichtige Pseudoklasse wird dabei :nth-of-type().
So kann man zum Beispiel Tabellen ganz einfach mit tr:nth-of-type(2n){style-anweisung} jeder zweiten Tabellenzeile eine andere Farbe zuweisen.
Das vermutlich spektakulärste Feature von CSS3 ist die Unterstützung von Webfonts – also herunterladbare Schriftarten. Das ermöglicht Werbeagenturen neue Schriftarten einzusetzen. Überlange Texte, die über das Webdesign Layout hinaus gehen würden, können zusätzlich mit der neuen CSS-Eigenschaft break-word formatiert werden.
Weitere interessante CSS-Eigenschaften sind vor allem Transparenzen und runde Ecken.
Aktuell werden transparenzen und runde Ecken hauptsächlich über komplizierte Verschachtelungen oder Grafiken realisiert.
Runde Ecken werden ab CSS3 einfach mit dem Attribut border-radius zugewiesen, während Transparenz mit dem Attribut opacity gesteuert wird.
Neu ist auch die CSS-Eigenschaft background-size.
Mit ihr ist es möglich für Hintergrundbilder Größen anzugeben. Angenommen werden von background-size Pixel und Prozentwerte.
Abschließend kann man sagen, dass noch viele neue Selektoren und Eigenschaften bis zur offiziellen Freigabe von CSS3 in die Spezifikation einfließen werden. Vieles davon ist durchaus praktisch und wird im Webdesign sehr schnell umgesetzt werden.
HTML 5 – Vorschau
Der neue Webstandard HTML5 wird einige interessante Neuerungen bringen.
Das im Web oft verwendete <embed>-Tag wird jetzt endlich als HTML-Standard angesehen.
Interessant dürften vor allem auch einige neue Tags sein, die den Aufbau einer Webseite von Grund auf verändern könnten.
So gibt es bei HTML5 die Tags <footer>,<header> ,<nav> .
Weiters kann man bei HTML5 den Tag <article> verwenden. Ein Artikel kann mit <section> dann weiter unterteilt werden.
Diese semantische Strukturierung der Webseite bringt nicht nur eine bessere Übersicht und bessere Steuerbarkeit für den User, sondern auch schlankeren Code, was die Performance einer Webseite steigern kann.
Vermutlich wird Google diese neuen Tags nutzen um eine Seite noch besser indiziieren zu können.
Dadurch wird auch die Suchmaschinenoptimierung in eine vollkommen neue Richtung gehen.Neu ist auch die direkte Einbindung von Videos und Audiodateien mit dem <video> und <audio> -Tag. Diese sollen die Einbindung von Silverlight oder Flash Applikationen um wesentliches vereinfachen und ebenfalls den Code reduzieren.
Einige Spezifikationen aus HTML5 sind allerdings noch nicht endgültig fixiert.
Viele der fixen Spezifikationen werden bereits jetzt von den Browsern Internet Explorer 8, Firefox 3.6, Opera 10.5, Safari5 und Chrome5 umgesetzt.
Eine direkte Verwendung von HTML5 ist daher theoretisch möglich.
Allerdings ist die Verwendung von HTML5 gerade mit älteren Browsern (IE6, IE7) problematisch und sollte daher noch vermieden werden.
medani mobile solutions
Wussten Sie, dass 11% der deutschen Bevölkerung im Besitz eines SmartPhones ist (Quelle: Otto Group – GO SMART 2012: Always in touch)?
Das sind, beruft man sich auf die Zählung vom November 2009 (Quelle: WikiPedia) rund 9.000.000 mobile Endgeräte, diese Zahl soll sich binnen 2 Jahren verdoppeln. Laut einer aktuellen Studie von Arthur D. Little und der Exane BNP Paribas (Quelle: PTA) zufolge soll sich dieser Trend auch in Österreich bemerkbar machen. Bereits 2015 heißt es, sollen 60% aller Mobilkunden ein SmartPhone besitzen (Quelle: PTA).
Das damit verbundene Potenzial des mobilen Internets muss nicht extra erläutert werden (europaweites Umsatzpotenzial von 27 Mrd. Euro, Quelle: PTA).
Um diesem technologischen Fortschritt gerecht zu werden, sind wir stolz darauf, unser Webdesign-Produktportfolio erweitern, und unseren Kunden eine noch größere Produktpalette anbieten zu können. Per Juli 2010 können Sie optional eine SmartPhone-Optimierung bestellen; medani mobile solutions. Weitere Infos zum Thema mobiles webdesign finden sie hier….
Wir optimieren Ihre Webseite auf Desktop und mobiles Internet, speziell für die Anzeige auf SmartPhone-Screens und iPhone. Wählen Sie, welche Inhalte Sie anzeigen möchten, ob sie ein spezielles Design für SmartPhones wünschen oder SmartPhone-Dienste, die wir für Sie entwickeln.
jQuery Akkordeon
Um Ihnen einen Einblick in ein weit verbreitetes JavaScript – Framework zu geben, möchte ich Ihnen jQuery vorstellen, welches von John Resig entwickelt wurde. Unter einem Framework können Sie sich ein Gerüst vorstellen, ähnlich wie es beim Bau von Gebäuden zum Einsatz kommt. In der Programmierung dient ein solches zur Festlegung der Architektur, in der ein Programm oder eine Funktionalität erstellt wird. Den Einsatz und die Möglichkeiten, die sich beim Einsatz von jQuery für Ihren Webauftritt bieten, möchte ich Ihnen in einer dreiteiligen Demonstration näherbringen.
Im ersten Teil wird die Installation von jQuery demonstriert, sowie wertvolle Tips & Tricks für die ersten Schritte erläutert. Sie können sich anhand hiervon überzeugen, dass wir stets mit dem “Puls der Technik” schreiten, um Ihnen als Kunden aktuellste Technologie und Know-How anbieten zu können.
In weiterer Folge erstellen wir ein aufklappbares Akkordeon, dass beispielsweise bei einer Ihrer Produktseiten zum Einsatz kommen kann. Ich möchte Ihnen zunächst das Endergebnis zeigen, damit Sie sich ein Bild machen können, welches Ziel diese Demonstration verfolgt.
Wenn Sie hier auf “jQuery”, “PHP” oder “CSS” klicken sehen Sie, dass sich der jeweilige Bereich erweitert und Ihnen zuvor “versteckten” Inhalt anzeigt.
Ich werde Ihnen nun Schritt für Schritt zeigen, wie die Erstellung eines solchen aufklappbaren Menüs aussieht.
Schritt 1 – das Grundgerüst
Um mit jQuery arbeiten zu können, benötigen Sie ein HTML (Hypertext Markup Language; Wikipedia) Grundgerüst. Dieses könnte folgendermaßen aussehen:
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>jQuery Demonstration - Teil I</title><br /> <head><br /> </head><br /> <body><br /> </body><br /> </html>
Speichern Sie dieses in ein Verzeichnis Ihrer Wahl ab (Bsp.: jQuery/index.html).
Schritt 2 – das Einbinden von jQuery / jQuery UI
Um auf Ihrer Webseite DOM (Document Object Model; Wikipedia) – Manipulationen durchführen zu können, muss im zweiten Schritt jQuery eingebunden werden. Hierzu werden im HEAD – Bereich Ihres HTML – Grundgerüsts aus “Schritt 1″ die notwendigen JS (JavaScript; Wikipedia) Dateien angegeben, die inkludiert werden sollen.
Dies kann auf 2 Arten geschehen:
- per Google APIs (klicken Sie bitte hier)
- per “Eigenhosting”
Die Einbindung via Google APIs bringt einige Vorteile mit sich:
- durch das sogenannte “Caching” (Zwischenspeichern, um bei einem erneuten Aufruf Inhalte schneller zur Verfügung zu stellen) sparen Sie sich Bandbreite – das Laden der Seite geht etwas schneller vonstatten.
- Sie müssen sich nicht um Updates der jQuery Library kümmern, Google übernimmt das für Sie
Sollten Sie sich dazu entscheiden, Google APIs zu verwenden, so müssen Sie einen Google API Key registrieren, damit die Einbindung auf Ihrer Webseite funktioniert. Dieser eindeutige Key wird mit der URL (Uniform Resource Locator; Wikipedia) Ihrer Webseite verknüpft, Sie können also beispielsweise den hier verwendeten nicht benutzen!
“Eigenhosting” bedeutet, dass Sie ein Kopie von jQuery auf Ihrem Server hosten und sich daher selbst um Updates kümmern müssen.
Für meine Demonstration verwende ich Variante I und erweitere den HEAD – Bereich wie folgt:
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script><br />
</head>
Wie Sie sehen können, beziehen wir neben jQuery (i.d.a.F 1.4.2) auch jQuery UI (i.d.a.F. 1.7.2), um auf vordefinierte Widgets (ein in der IT gebräuchliches Wort für “graphisches Element” oder “graphisches Fenster”) zurückgreifen zu können. jQuery UI baut auf jQuery auf, daher ist es unbedingt notwendig, jQuery vor(!!) jQuery UI einzubinden !
Schritt 3 – das Styling
jQuery UI bietet komfortable Möglichkeiten, Styles (Informationen und Vorgaben zur Anzeige) aus einer Vielzahl von bereits vordefinierten Themen auszuwählen und einzubinden. Sie finden eine Übersicht aller Standard – jQuery UI – Styles im dazugehörigen Theme Roller.
Laden Sie sich ein Theme auf Ihren PC, extrahieren Sie die heruntergeladene (gepackte) .ZIP – Datei und navigieren Sie in den Unterordner /css. Dort befindet sich ein Unterordner mit dem Namen des von Ihnen gewählten Themes, welcher eine CSS (Cascading Style Sheet; Wikipedia) und einen Ordner /images beinhaltet. Kopieren Sie den Ordner /css in jenes Verzeichnis, in dem sich auch die HTML – Datei befindet, die Ihr HTML – Grundgerüst befindet (jQuery/).
Öffnen Sie nun wieder die HTML – Datei mit Ihrem HTML – Grundgerüst (jQuery/index.html) und erweitern den HEAD – Bereich wie folgt:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script></p>
<p><script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<link href="css/jquery-ui-1.8rc2.custom.css" rel="stylesheet" type="text/css" />
</head><br />
Hierdurch binden Sie das CSS in ihre Webseite ein.
Schritt 4 – Die DIV Struktur des Inhaltes
Im vierten Schritt möchte ich Ihnen zeigen, wie ein möglicher DIV Aufbau aussehen könnte, um mit jQuery erfolgreich darauf zugreifen zu können. Hierzu erweitern wir den BODY – Bereich des HTML – Grundgerüsts (jQuery/index.html) wie folgt:
<br /> <body></p> <div class="jQuery_demo_container" style="width: 400px; height: auto;"> <div id="jQuery_demo"> <h3><a href="#">jQuery</a></h3> <div>Ein JavaScript - FrameWork.</div> <h3><a href="#">PHP</a></h3> <div>Eine serverseitige Programmiersprache.</div> <h3><a href="#">CSS</a></h3> <div>Zur Trennung von Code und Design.</div> </div> </div> <p></body><br />
Das DIV “jQuery_demo_container” umschließt das DIV “jQuery_demo” und definiert Styling Informationen zur Breite (400 Pixel) und Höhe (automatisch).
Schritt 5 – Erzeugen des Akkordeons
Um nun per jQuery / jQuery UI das DOM manipulieren zu können, bedarf es nun nur noch einer kleinen Erweiterung des HEAD – Bereichs des HTML – Grundgerüsts:
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$("#jQuery_demo").accordion();
});
</script></p>
<p></head>
Sie beauftragen jQuery der ID “jQuery_demo” (nach dessen Initialisierung) ein Akkordeon anzufügen und damit den oben gezeigten Effekt zu erzielen.
Komplett
<br />
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>jQuery Demonstration - Teil I</title><br />
<script src="http://www.google.com/jsapi?key=IHR-GOOGLE-API-KEY" type="text/javascript"></script><br />
<script language="Javascript" type="text/javascript">
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.7.2");
</script></p>
<p><script type=”text/javascript”>
$(document).ready(function() {
$("#jQuery_demo").accordion();
});
</script><br />
</head><br />
<body></p>
<div class="jQuery_demo_container" style="width: 400px; height: auto;">
<div id="jQuery_demo">
<h3><a href="#">jQuery</a></h3>
<div>Ein JavaScript - FrameWork.</div>
<h3><a href="#">PHP</a></h3>
<div>Eine serverseitige Programmiersprache.</div>
<h3><a href="#">CSS</a></h3>
<div>Zur Trennung von Code und Design.</div>
</div>
</div>
<p></body><br />
</html></p>
<p>
Damit möchte ich den ersten Teil der jQuery Demonstration abschließen. Im nächsten Teil werde ich Ihnen zeigen, wie Sie Ihr erstelltes Akkordeon individualisieren können!
- Christian Singer, BSc ( Anfrage )
- Staedtler: „Die Firma medani hat unsere Vorstellungen immer perfekt technisch umgesetzt.“ Stefan Stiglbauer, Geschäftsführer STAEDTLER Österreich
