Web Lösungen mit jQuery und extJS Egal ob es sich um komplexe Business Lösungen oder einfache Formulare handelt, stehen he...
Willkommen. WLAN Passwort:  BirmensdorferStrasse1508003ZH Hashtag: #
Web-Lösungen mit jQuery und extJS
Hilfe! <ul><li>60+ Libraries!? </li></ul>
DNA Analyse. <ul><ul><li>Ajax Support </li></ul></ul><ul><ul><li>Element Selektoren </li></ul></ul><ul><ul><li>DOM Durchwa...
Unsere Top 5. jQuery ExtJS Prototype YUI MooTools UI Komponenten + jQuery UI + Script.aculo.us + Mootools More UX Verbesse...
<ul><ul><li>jQuery und Prototype zur Erweiterung von  grafischen Web-Oberflächen. </li></ul></ul><ul><ul><li>ExtJS und YUI...
Was will ich? <ul><ul><li>Animation </li></ul></ul><ul><ul><li>Emotion </li></ul></ul><ul><ul><li>Coolness </li></ul></ul>
Was will ich? <ul><ul><li>Spass </li></ul></ul><ul><ul><li>spielerisch </li></ul></ul><ul><ul><li>grafisch </li></ul></ul>...
Was will ich? <ul><ul><li>funktional </li></ul></ul><ul><ul><li>strukturiert </li></ul></ul><ul><ul><li>einfach </li></ul>...
www.blacksocks.com <ul><ul><li>Frontend mit jQuery </li></ul></ul><ul><ul><li>Backend mit extJS </li></ul></ul><ul><ul><li...
Let us code! <ul><ul><li>DOM Traversal </li></ul></ul><ul><ul><li>DOM Manipulation </li></ul></ul><ul><ul><li>Animationen ...
Get ready! <ul><ul><li>http://jquery.com/ </li></ul></ul><ul><ul><li>Tutorials </li></ul></ul><ul><ul><li>API Reference </...
Weitere Beispiele. <ul><li>Textmanipulationen </li></ul><ul><ul><li>slabText  -  Arctext </li></ul></ul><ul><ul><li>Bilder...
Mobile Adaption. <ul><li>jQuery und Sencha Mobile Framework: </li></ul><ul><li>1 Umsetzung für ganze mobile Palette  </li>...
Checkliste. <ul><ul><li>Was will ich?    Auswahl der Library inkl. Kompatibilitätscheck (falls nicht neu) </li></ul></ul>...
Pay Attention! <ul><li>Updates  </li></ul><ul><ul><li>Sicherstellung der Funktionalitäten </li></ul></ul><ul><ul><li>Profi...
Stay Tuned. <ul><li>jQuery Aktualisierungen:  http://feeds.feedburner.com/jquery/ </li></ul><ul><li>ExtJS:  http://feeds.f...
Take Advantage. <ul><li>Mehr Zeit für Kundenbedürfnisse </li></ul><ul><li>Konzentration aufs Wesentliche </li></ul><ul><li...
Fragen?
Vielen Dank! Christian Palatinus Technischer Leiter INM AG Usterstrasse 202, CH-8620 Wetzikon ZH Phone:  +41 44 934 50 83 ...
Nächste SlideShare
Wird geladen in …5
×

20120207 prs ib_js_libraries_v02

424 Aufrufe

Veröffentlicht am

Internet Briefing Präsentation

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
424
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Das Web 2.0 hat nicht nur technisch geprägt, sondern vor allem auch den usability aspekt mehr rechnung getragen, deshalb sind themen wie frontend libraries, user experience, a/b tests, click und heatmaps etc. prägende themen die unsere arbeit im web täglich begleiten. Responsiveness Usability UX Multichannel User Generated Content
  • http://javascriptlibraries.com/ http://en.wikipedia.org/wiki/List_of_JavaScript_libraries http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
  • Die sind ja alle dann noch gleich. Alle haben/bieten… Wieso dann so viele? Welche soll ich dann nehmen? Erfahrung hat gezeigt, dass alle Libraries im Grundaufbau sich kaum unterscheiden, nämlich…
  • im Detail: Protoype : Beinhaltet keine zusätzlichen UI-Komponenten oder UX-Verbesserungen; nur im Zusammenhang mit Script.aculo.us; enthält keine auswählbaren Design jQuery beinhaltet nur einen kleinen Satz von UX-Verbesserungen; UI-Komponenten nur in Verbindung mit jQuery UI, inklusive einer grossen Anzahl von Designthemes; jQuery-Weiterentwicklung wird durch Microsoft verstärkt und vorangetrieben, und ist bereits in Visual Studio integriert Mootools beinhaltet ebenfalls keine UI-Controls; nur in Verbindung mit MooTools.More; enthält auch keine auswählbaren Design YUI und ExtJS beinhalten eine grosse Anzahl von vorgefertigten UI-Komponenten
  • Grundsätzlich korrekt, aber es gibt gewisse Grauzonen. Darum zuerst immer fragen, was willst du, bevor du eine Library auswählst.
  • Grossflächige Animationen, Interaktionen
  • weniger emotional
  • Extjs -  http://examples.ext.net/
  • LIVE zeigen wie es aussieht http://blacksocks-v2.inm.ch/ http://blacksocks-v2.inm.ch/admin Als Beispiel: Head im File 1.html zeigen (Einbindung Prototype und Angabe von noConfllict) aufzeigen wie man vorgehen muss wenn man ne js library integrieren möchte -&gt; /demos/1.html Link zu CDNs: http://www.asp.net/ajaxlibrary/cdn.ashx od. http://code.google.com/intl/de-DE/apis/libraries/devguide.html
  • DOM Traversal: File: /demo/1.html $jq(&apos;#mainNav li:eq(0)&apos;) $jq(&apos;#mainNav li:gt(1)&apos;) $jq(&apos;#mainNav&apos;).find(&apos;li:last&apos;) $jq(&apos;#mainNav&apos;).children() $(&apos;mainNav&apos;).childElements() $jq(&apos;#mainNav a:contains(&amp;quot;Dom&amp;quot;)&apos;) $jq(&apos;img&apos;).not(&apos;[alt]&apos;) DOM Manipulation: File: /demo/2.html $(&apos;header&apos;).text(&apos;Titel&apos;) $(&apos;header&apos;).wrapInner(&apos;&lt;h1&gt;&lt;/h1&gt;&apos;) $(&apos;h1&apos;).contents().unwrap() $(‘#mainNav li&apos;).not(&apos;:has(a) &apos;).css(&apos;border&apos;, &apos;1px solid black&apos;) $(&apos;tr:nth-child(odd)&apos;).addClass(&apos;odd&apos;) $(&apos;table&apos;).remove() $(&apos;#mainNav li:eq(2)&apos;).clone().appendTo($(&apos;#mainNav li:eq(2)&apos;)) Standard Animationen: File: /demo/3.html $(&apos;#helloBox&apos;).hide() / $(&apos;#helloBox&apos;).show() / $(&apos;#helloBox&apos;).toggle() $(&apos;#helloBox&apos;).slideUp() / $(&apos;#helloBox&apos;).slideDown() / $(&apos;#helloBox&apos;).slideToggle() $(&apos;#helloBox&apos;).slideToggle(&apos;slow&apos;) / $(&apos;#helloBox&apos;).slideToggle(fast&apos;) / $(&apos;#helloBox&apos;).slideToggle(4000) $(&apos;#helloBox&apos;).fadeOut() / $(&apos;#helloBox&apos;).fadeOut() / $(&apos;#helloBox&apos;).fadeToggle(2000,function(){alert(&apos;Fertig!&apos;);}) $( &amp;quot;#helloBox&amp;quot; ).animate({ width: &amp;quot;300px&amp;quot; }, 1000 ).animate({ fontSize: &amp;quot;+=24px&amp;quot; }, 1000 ).animate({ borderLeftWidth: &amp;quot;50px&amp;quot; }, 2000 )  Beispiel für PlugIn-Einbindung
  • Für PlugIns: Demo mit File 4.html Einfügen JS und CSS des Plugins, z.B. von http://sorgalla.com/projects/jcarousel/ Aktivieren des PlugIns im Ready-Event Hinzufügen von Parametern
  • jQuery Mobile bietet ein Framework für das Erstellen von Apps, die auf allen gängigen mobilen Endgeräten laufen und gleich daher kommen. Die vorgefertigten Layouts sind Touch-optimiert und beinhalten eine grosse Palette von UI-Komponenten Beispiele zeigen auf http://www.testiphone.com/ : jQuery : http://m.ikea.com/se/ http://m.box.com/ http://www.takemefishing.org/mobile/ Sencha: http://dev.sencha.com/deploy/touch/examples/oreilly/ http://dev.sencha.com/deploy/touch/examples/kiva/ http://dev.sencha.com/deploy/touch/examples/kitchensink/ inkl. 3rd Party Addons: http://demo.mobiscroll.com/ http://www.stokkers.mobi/valuables/bartender.html http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
  • Beispiel Overloading: jQuery.fn.eigeneFunktion = function ( parameter ) { this.css ( { &amp;quot;background&amp;quot;: parameter.farbe, &amp;quot;border&amp;quot;: parameter.rand } ) ; }; $ ( &amp;quot;#id&amp;quot; ) .eigeneFunktion ( { farbe: &amp;quot;red&amp;quot;, rand: &amp;quot;3px blue solid&amp;quot; } ) ;
  • jQuery wird im Abstand von ca. all 2 Monaten aktualisiert, mit anschliessendem Bugfix Release extJS und YUI haben längere Aktualisierungsintervalle immer gut: RSS-Feeds abonnieren
  • Vorteile mehr zeit fuer Kundenlösung, da techn. Aspekte wie z.B. Cross Browser Problematiken abgedeckt sind Erleichterung in UI-Entwicklung dank vielen vorhandenen Out-Of-The-Box Features (andockbar, erweiterbar, ...) Multi-device support …
  • 20120207 prs ib_js_libraries_v02

    1. 1. Web Lösungen mit jQuery und extJS Egal ob es sich um komplexe Business Lösungen oder einfache Formulare handelt, stehen heute für die Realisierung von Web-Lösungen sehr mächtige Frontend Libraries zur Verfügung. Dabei spart man nicht nur Zeit und Geld bei der Umsetzung, sondern stellt gleichzeitig auch sicher, dass die Lösung technisch korrekt daherkommt - sofern man die wichtigsten Tipps und Tricks einhält. INM zeigt anhand von konkreten Beispielen die Entstehung von Web-Lösungen mittels jQuery und extJS. Welches deren Vor- und Nachteile sind, welche Bedingungen zu erfüllen und welche Schritte notwendig sind um von Javascript Libraries zu profitieren. - Top 5 Javascript-Libraries - Einsatzgebiet mit Vor- und Nachteile von jQuery und extJS - Wie integriere und verwende ich jQuery und extJS in einer Weblösung - 3 konkrete Plugin Beispiele von jQuery und extJS - Wirtschaftliche Aspekte bei der Nutzung von Javascript-Libraries
    2. 2. Willkommen. WLAN Passwort: BirmensdorferStrasse1508003ZH Hashtag: #
    3. 3. Web-Lösungen mit jQuery und extJS
    4. 4. Hilfe! <ul><li>60+ Libraries!? </li></ul>
    5. 5. DNA Analyse. <ul><ul><li>Ajax Support </li></ul></ul><ul><ul><li>Element Selektoren </li></ul></ul><ul><ul><li>DOM Durchwanderung </li></ul></ul><ul><ul><li>DOM Manipulation </li></ul></ul><ul><ul><li>Event Handling </li></ul></ul><ul><ul><li>JSON </li></ul></ul><ul><ul><li>Cross-Browser Kompatibilität </li></ul></ul>
    6. 6. Unsere Top 5. jQuery ExtJS Prototype YUI MooTools UI Komponenten + jQuery UI + Script.aculo.us + Mootools More UX Verbesserungen + Script.aculo.us Designvorlagen + jQuery UI Grösse 92 KB 158 MB (Core: 84 KB) 160 KB 23 MB (Core: 28 KB) 93 KB CDN (Core) http://code.jquery.com/jquery-1.7.1.min.js https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js Lizenz GPL / MIT GPL / Commercial MIT BSD MIT
    7. 7. <ul><ul><li>jQuery und Prototype zur Erweiterung von grafischen Web-Oberflächen. </li></ul></ul><ul><ul><li>ExtJS und YUI für applikatorische Lösungen . </li></ul></ul><ul><ul><li>Mootools für Animationen und grafische Gestaltung. </li></ul></ul>Libraries im Einsatz.
    8. 8. Was will ich? <ul><ul><li>Animation </li></ul></ul><ul><ul><li>Emotion </li></ul></ul><ul><ul><li>Coolness </li></ul></ul>
    9. 9. Was will ich? <ul><ul><li>Spass </li></ul></ul><ul><ul><li>spielerisch </li></ul></ul><ul><ul><li>grafisch </li></ul></ul><ul><ul><li>Usability </li></ul></ul>
    10. 10. Was will ich? <ul><ul><li>funktional </li></ul></ul><ul><ul><li>strukturiert </li></ul></ul><ul><ul><li>einfach </li></ul></ul>
    11. 11. www.blacksocks.com <ul><ul><li>Frontend mit jQuery </li></ul></ul><ul><ul><li>Backend mit extJS </li></ul></ul><ul><ul><li>2 Libraries in einer Plattform?! </li></ul></ul><ul><ul><li>Wie geht dies? </li></ul></ul>
    12. 12. Let us code! <ul><ul><li>DOM Traversal </li></ul></ul><ul><ul><li>DOM Manipulation </li></ul></ul><ul><ul><li>Animationen </li></ul></ul><ul><ul><li>Events </li></ul></ul><ul><ul><li>Ajax </li></ul></ul><ul><ul><li>Datenspeicherung </li></ul></ul><ul><ul><li>Templating </li></ul></ul>
    13. 13. Get ready! <ul><ul><li>http://jquery.com/ </li></ul></ul><ul><ul><li>Tutorials </li></ul></ul><ul><ul><li>API Reference </li></ul></ul><ul><ul><li>UI-Widgets </li></ul></ul><ul><ul><li>Themes (Designvorlagen für UI-Widgets) </li></ul></ul><ul><ul><li>PlugIns </li></ul></ul>
    14. 14. Weitere Beispiele. <ul><li>Textmanipulationen </li></ul><ul><ul><li>slabText - Arctext </li></ul></ul><ul><ul><li>Bilder- / Inhaltsslider </li></ul></ul><ul><ul><li>Flow Slider - Slidorion </li></ul></ul><ul><ul><li>Layout </li></ul></ul><ul><ul><li>ResponseJS - SlickWrap </li></ul></ul><ul><ul><li>Applikatorische </li></ul></ul><ul><ul><li>jsPlumb - UILayout </li></ul></ul><ul><ul><li>Experimentell </li></ul></ul><ul><ul><li>Tubular - Before/After </li></ul></ul>
    15. 15. Mobile Adaption. <ul><li>jQuery und Sencha Mobile Framework: </li></ul><ul><li>1 Umsetzung für ganze mobile Palette </li></ul><ul><li>touch-optimiert </li></ul><ul><li>viele UI-Komponenten </li></ul><ul><li>Themes </li></ul><ul><li>3rd-Party Addons </li></ul><ul><li>http://jquerymobile.com/ </li></ul><ul><li>http://www.sencha.com/products/touch/demos </li></ul>
    16. 16. Checkliste. <ul><ul><li>Was will ich?  Auswahl der Library inkl. Kompatibilitätscheck (falls nicht neu) </li></ul></ul><ul><ul><li>Integration (lokal oder CDN?) </li></ul></ul><ul><ul><li>bei Customizing entweder Copy (old fashioned) vs. Extension/Overloading (OO) </li></ul></ul><ul><ul><li>Kompatibilität mit allen PlugIns </li></ul></ul><ul><ul><li>Manueller Check der Seite </li></ul></ul>
    17. 17. Pay Attention! <ul><li>Updates </li></ul><ul><ul><li>Sicherstellung der Funktionalitäten </li></ul></ul><ul><ul><li>Profitieren von neuen Features und Performanceupgrades </li></ul></ul><ul><li>Rechtliches </li></ul><ul><ul><li>Lizenzmodell überprüfen, va. bei ExtJS </li></ul></ul><ul><ul><li>Support: Community oder persönlich </li></ul></ul>
    18. 18. Stay Tuned. <ul><li>jQuery Aktualisierungen: http://feeds.feedburner.com/jquery/ </li></ul><ul><li>ExtJS: http://feeds.feedburner.com/SenchaBlog </li></ul>
    19. 19. Take Advantage. <ul><li>Mehr Zeit für Kundenbedürfnisse </li></ul><ul><li>Konzentration aufs Wesentliche </li></ul><ul><li>Erleichterung in der Programmierung </li></ul><ul><li>Wiederverwendung auf allen Ebenen </li></ul><ul><li>Qualität </li></ul><ul><li>Innovation ohne Investitionen </li></ul><ul><li>Time-To-Market </li></ul>
    20. 20. Fragen?
    21. 21. Vielen Dank! Christian Palatinus Technischer Leiter INM AG Usterstrasse 202, CH-8620 Wetzikon ZH Phone: +41 44 934 50 83 Mobile: +41 79 424 70 18 Fax: +41 44 934 50 55 E-Mail: [email_address] Web: www.inm.ch Blog: www.website-marketing.ch CMS G3: www.cms-g3.ch Aniello Bove COO, Managing Partner INM AG Usterstrasse 202, CH-8620 Wetzikon ZH Phone: +41 44 934 50 62 Mobile: +41 79 261 00 16 Fax: +41 44 934 50 55 E-Mail: [email_address] Web: www.inm.ch Blog: www.website-marketing.ch CMS G3: www.cms-g3.ch

    ×