Downloaden Sie, um offline zu lesen
![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](https://image.slidesharecdn.com/20120207prsibjslibrariesv02-120207060718-phpapp01/85/20120207-prs-ib_js_libraries_v02-21-320.jpg)
Hochgeladen vonChris Palatinus
20120207 prs ib_js_libraries_v02
Das Dokument beschreibt den Einsatz von jQuery und ExtJS zur Entwicklung von Web-Lösungen, sowohl für komplexe als auch einfache Anwendungen. Es behandelt die Vorteile, Nachteile, sowie die notwendigen Schritte und Bedingungen für die Integration dieser JavaScript-Bibliotheken. Zudem werden wirtschaftliche Aspekte und Best Practices zur Effizienzsteigerung in der Programmierung angesprochen.
![[Kladd] Faktorisering ved kvadratsetningene](https://cdn.slidesharecdn.com/ss_thumbnails/fafaktoriseringvedkvadratsetningene-130506162535-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
20120207 prs ib_js_libraries_v02
- 1. Web Lösungen mitjQuery 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. Willkommen. WLAN Passwort: BirmensdorferStrasse1508003ZH Hashtag: #
- 3. Web-Lösungen mit jQueryund extJS
- 4.
- 5. DNA Analyse. AjaxSupport Element Selektoren DOM Durchwanderung DOM Manipulation Event Handling JSON Cross-Browser Kompatibilität
- 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. jQuery und Prototypezur Erweiterung von grafischen Web-Oberflächen. ExtJS und YUI für applikatorische Lösungen . Mootools für Animationen und grafische Gestaltung. Libraries im Einsatz.
- 8. Was will ich?Animation Emotion Coolness
- 9. Was will ich?Spass spielerisch grafisch Usability
- 10. Was will ich?funktional strukturiert einfach
- 11. www.blacksocks.com Frontend mitjQuery Backend mit extJS 2 Libraries in einer Plattform?! Wie geht dies?
- 12. Let us code!DOM Traversal DOM Manipulation Animationen Events Ajax Datenspeicherung Templating
- 13. Get ready! http://jquery.com/Tutorials API Reference UI-Widgets Themes (Designvorlagen für UI-Widgets) PlugIns
- 14. Weitere Beispiele. TextmanipulationenslabText - Arctext Bilder- / Inhaltsslider Flow Slider - Slidorion Layout ResponseJS - SlickWrap Applikatorische jsPlumb - UILayout Experimentell Tubular - Before/After
- 15. Mobile Adaption. jQueryund Sencha Mobile Framework: 1 Umsetzung für ganze mobile Palette touch-optimiert viele UI-Komponenten Themes 3rd-Party Addons http://jquerymobile.com/ http://www.sencha.com/products/touch/demos
- 16. Checkliste. Was willich? Auswahl der Library inkl. Kompatibilitätscheck (falls nicht neu) Integration (lokal oder CDN?) bei Customizing entweder Copy (old fashioned) vs. Extension/Overloading (OO) Kompatibilität mit allen PlugIns Manueller Check der Seite
- 17. Pay Attention! Updates Sicherstellung der Funktionalitäten Profitieren von neuen Features und Performanceupgrades Rechtliches Lizenzmodell überprüfen, va. bei ExtJS Support: Community oder persönlich
- 18. Stay Tuned. jQueryAktualisierungen: http://feeds.feedburner.com/jquery/ ExtJS: http://feeds.feedburner.com/SenchaBlog
- 19. Take Advantage. MehrZeit für Kundenbedürfnisse Konzentration aufs Wesentliche Erleichterung in der Programmierung Wiederverwendung auf allen Ebenen Qualität Innovation ohne Investitionen Time-To-Market
- 20.
- 21. Vielen Dank! ChristianPalatinus 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
Hinweis der Redaktion
- #4 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
- #5 http://javascriptlibraries.com/ http://en.wikipedia.org/wiki/List_of_JavaScript_libraries http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
- #6 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…
- #7 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
- #8 Grundsätzlich korrekt, aber es gibt gewisse Grauzonen. Darum zuerst immer fragen, was willst du, bevor du eine Library auswählst.
- #9 Grossflächige Animationen, Interaktionen
- #10 weniger emotional
- #11 Extjs - http://examples.ext.net/
- #12 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
- #13 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(&quot;Dom&quot;)') $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!');}) $( &quot;#helloBox&quot; ).animate({ width: &quot;300px&quot; }, 1000 ).animate({ fontSize: &quot;+=24px&quot; }, 1000 ).animate({ borderLeftWidth: &quot;50px&quot; }, 2000 ) Beispiel für PlugIn-Einbindung
- #14 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
- #16 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
- #17 Beispiel Overloading: jQuery.fn.eigeneFunktion = function ( parameter ) { this.css ( { &quot;background&quot;: parameter.farbe, &quot;border&quot;: parameter.rand } ) ; }; $ ( &quot;#id&quot; ) .eigeneFunktion ( { farbe: &quot;red&quot;, rand: &quot;3px blue solid&quot; } ) ;
- #18 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
- #20 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 …