SlideShare ist ein Scribd-Unternehmen logo
1 von 21
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
Willkommen. WLAN Passwort:  BirmensdorferStrasse1508003ZH Hashtag: #
Web-Lösungen mit jQuery und extJS
Hilfe! ,[object Object]
DNA Analyse. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
[object Object],[object Object],[object Object],Libraries im Einsatz.
Was will ich? ,[object Object],[object Object],[object Object]
Was will ich? ,[object Object],[object Object],[object Object],[object Object]
Was will ich? ,[object Object],[object Object],[object Object]
www.blacksocks.com ,[object Object],[object Object],[object Object],[object Object]
Let us code! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Get ready! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Weitere Beispiele. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Mobile Adaption. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Checkliste. ,[object Object],[object Object],[object Object],[object Object],[object Object]
Pay Attention! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Stay Tuned. ,[object Object],[object Object]
Take Advantage. ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fragen?
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

Weitere ähnliche Inhalte

Andere mochten auch

News Release: Lakeland Resources Acquires Newnham Lake Property
News Release:  Lakeland Resources Acquires Newnham Lake PropertyNews Release:  Lakeland Resources Acquires Newnham Lake Property
News Release: Lakeland Resources Acquires Newnham Lake Property
Lakeland Resources Inc. (TSXv: LK)
 
Portofolio-Gligor Maria
Portofolio-Gligor MariaPortofolio-Gligor Maria
Portofolio-Gligor Maria
mariaaag
 
CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014
CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014
CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014
Centro Deportivo Israelita
 

Andere mochten auch (20)

5ºb
5ºb5ºb
5ºb
 
Revista de Marketing Dental y Gesti
Revista de Marketing Dental y GestiRevista de Marketing Dental y Gesti
Revista de Marketing Dental y Gesti
 
Leitlinien für Kathbern
Leitlinien für KathbernLeitlinien für Kathbern
Leitlinien für Kathbern
 
News Release: Lakeland Resources Acquires Newnham Lake Property
News Release:  Lakeland Resources Acquires Newnham Lake PropertyNews Release:  Lakeland Resources Acquires Newnham Lake Property
News Release: Lakeland Resources Acquires Newnham Lake Property
 
7 pasos para emprender
7 pasos para emprender7 pasos para emprender
7 pasos para emprender
 
Platforum D2C Conference 24 June 2015: Digital Marketing Guru Panel
Platforum D2C Conference 24 June 2015: Digital Marketing Guru PanelPlatforum D2C Conference 24 June 2015: Digital Marketing Guru Panel
Platforum D2C Conference 24 June 2015: Digital Marketing Guru Panel
 
Herencia
HerenciaHerencia
Herencia
 
Las Ventajas del telefono Behold 2
Las Ventajas del telefono Behold 2Las Ventajas del telefono Behold 2
Las Ventajas del telefono Behold 2
 
2008-03-10 Power Service strategy
2008-03-10 Power Service strategy2008-03-10 Power Service strategy
2008-03-10 Power Service strategy
 
Ici unidad4-tema2-hmi
Ici unidad4-tema2-hmiIci unidad4-tema2-hmi
Ici unidad4-tema2-hmi
 
Portofolio-Gligor Maria
Portofolio-Gligor MariaPortofolio-Gligor Maria
Portofolio-Gligor Maria
 
Kunturwasi
KunturwasiKunturwasi
Kunturwasi
 
2009.10 Wykorzystanie Poczty Elektronicznej - raport SARE
2009.10 Wykorzystanie Poczty Elektronicznej - raport SARE2009.10 Wykorzystanie Poczty Elektronicznej - raport SARE
2009.10 Wykorzystanie Poczty Elektronicznej - raport SARE
 
Bemposta or Benposta .The first modern spanish complementary currency?
Bemposta or Benposta .The first modern spanish complementary currency?Bemposta or Benposta .The first modern spanish complementary currency?
Bemposta or Benposta .The first modern spanish complementary currency?
 
CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014
CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014
CDINFORMA NÚMERO 2635, 30 DE ADAR I DE 5774, 2 DE MARZO DE 2014
 
Benchmarking para una sala de prensa
Benchmarking para una sala de prensaBenchmarking para una sala de prensa
Benchmarking para una sala de prensa
 
"La reforma tributaria", una ponencia de Francisco Franconetti
"La reforma tributaria", una ponencia de Francisco Franconetti"La reforma tributaria", una ponencia de Francisco Franconetti
"La reforma tributaria", una ponencia de Francisco Franconetti
 
Mejorar el liderazgo escolar, Volumen 1: política y práctica
Mejorar el liderazgo escolar, Volumen 1: política y prácticaMejorar el liderazgo escolar, Volumen 1: política y práctica
Mejorar el liderazgo escolar, Volumen 1: política y práctica
 
Malware intelligence ppt-slides
Malware intelligence ppt-slidesMalware intelligence ppt-slides
Malware intelligence ppt-slides
 
02 filter
02 filter02 filter
02 filter
 

Ähnlich wie 20120207 prs ib_js_libraries_v02

Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
Günther Haslbeck
 

Ähnlich wie 20120207 prs ib_js_libraries_v02 (20)

Nutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise WikisNutzen und Anwendungspotentiale von Enterprise Wikis
Nutzen und Anwendungspotentiale von Enterprise Wikis
 
Ueberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web ApplicationsUeberlegungen Projektmanagement Web Applications
Ueberlegungen Projektmanagement Web Applications
 
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
Commercial OS Shops - Magento, OXID, xt:commerce. Evaluationskriterien für En...
 
Plone im Kontext des WCMS Marktes
Plone im Kontext des WCMS MarktesPlone im Kontext des WCMS Marktes
Plone im Kontext des WCMS Marktes
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
system worx: Wie Open Source Software zur Optimierung von Geschäftsprozessen ...
 
Ec2009 Templates
Ec2009 TemplatesEc2009 Templates
Ec2009 Templates
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 
Top 10 Internet Trends 2005
Top 10 Internet Trends 2005Top 10 Internet Trends 2005
Top 10 Internet Trends 2005
 
Top 10 Internet Trends 2007
Top 10 Internet Trends 2007Top 10 Internet Trends 2007
Top 10 Internet Trends 2007
 
GWT
GWTGWT
GWT
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
XPages - The Basics
XPages - The BasicsXPages - The Basics
XPages - The Basics
 
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 MinutenGerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
Gerade genug Architektur vorneweg - Zur eigenen Architektur-Vision in 12 Minuten
 
Vortragsreihe Dortmund: Unified Development Environments
Vortragsreihe Dortmund: Unified Development EnvironmentsVortragsreihe Dortmund: Unified Development Environments
Vortragsreihe Dortmund: Unified Development Environments
 
Blogdienst der FAU
Blogdienst der FAUBlogdienst der FAU
Blogdienst der FAU
 
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
Pixelmechanics "eCommerce mit Magento" - Webmontag 07.06.2010
 

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: #
  • 4.
  • 5.
  • 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.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 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

Hinweis der Redaktion

  1. 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
  2. http://javascriptlibraries.com/ http://en.wikipedia.org/wiki/List_of_JavaScript_libraries http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
  3. 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…
  4. 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
  5. Grundsätzlich korrekt, aber es gibt gewisse Grauzonen. Darum zuerst immer fragen, was willst du, bevor du eine Library auswählst.
  6. Grossflächige Animationen, Interaktionen
  7. weniger emotional
  8. Extjs -  http://examples.ext.net/
  9. 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
  10. 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
  11. 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
  12. 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
  13. Beispiel Overloading: jQuery.fn.eigeneFunktion = function ( parameter ) { this.css ( { "background": parameter.farbe, "border": parameter.rand } ) ; }; $ ( "#id" ) .eigeneFunktion ( { farbe: "red", rand: "3px blue solid" } ) ;
  14. 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
  15. 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 …