20120207 prs ib_js_libraries_v02
•Télécharger en tant que PPT, PDF•
0 j'aime•513 vues
Internet Briefing Präsentation
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à 20120207 prs ib_js_libraries_v02
Similaire à 20120207 prs ib_js_libraries_v02 (20)
20120207 prs ib_js_libraries_v02
- 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. Willkommen. WLAN Passwort: BirmensdorferStrasse1508003ZH Hashtag: #
- 3. Web-Lösungen mit jQuery und extJS
- 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
- 20. Fragen?
- 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
Notes de l'éditeur
- 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(&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
- 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 ( { &quot;background&quot;: parameter.farbe, &quot;border&quot;: parameter.rand } ) ; }; $ ( &quot;#id&quot; ) .eigeneFunktion ( { farbe: &quot;red&quot;, rand: &quot;3px blue solid&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 …