20120207 prs ib_js_libraries_v02

482 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
482
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 -> /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('#mainNav li:eq(0)') $jq('#mainNav li:gt(1)') $jq('#mainNav').find('li:last') $jq('#mainNav').children() $('mainNav').childElements() $jq('#mainNav a:contains("Dom")') $jq('img').not('[alt]') DOM Manipulation: File: /demo/2.html $('header').text('Titel') $('header').wrapInner('<h1></h1>') $('h1').contents().unwrap() $(‘#mainNav li').not(':has(a) ').css('border', '1px solid black') $('tr:nth-child(odd)').addClass('odd') $('table').remove() $('#mainNav li:eq(2)').clone().appendTo($('#mainNav li:eq(2)')) Standard Animationen: File: /demo/3.html $('#helloBox').hide() / $('#helloBox').show() / $('#helloBox').toggle() $('#helloBox').slideUp() / $('#helloBox').slideDown() / $('#helloBox').slideToggle() $('#helloBox').slideToggle('slow') / $('#helloBox').slideToggle(fast') / $('#helloBox').slideToggle(4000) $('#helloBox').fadeOut() / $('#helloBox').fadeOut() / $('#helloBox').fadeToggle(2000,function(){alert('Fertig!');}) $( "#helloBox" ).animate({ width: "300px" }, 1000 ).animate({ fontSize: "+=24px" }, 1000 ).animate({ borderLeftWidth: "50px" }, 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 ( { "background": parameter.farbe, "border": parameter.rand } ) ; }; $ ( "#id" ) .eigeneFunktion ( { farbe: "red", rand: "3px blue solid" } ) ;
  • 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

    ×