Internet Briefing, 08.04.23, Folie 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

Internet Briefing, 08.04.23, Folie 2

WLAN Passwort:

BirmensdorferStrasse1508003ZH

Hashtag: #

Willkommen.

Internet Briefing, 08.04.23, Folie 3

Web-Lösungen mitjQuery und extJS

Internet Briefing, 08.04.23, Folie 4

Hilfe!

60+Libraries!?

Internet Briefing, 08.04.23, Folie 5

DNA Analyse.

Ajax Support

Element Selektoren

DOM Durchwanderung

DOM Manipulation

Event Handling

JSON

Cross-Browser Kompatibilität

Internet Briefing, 08.04.23, Folie 6

Unsere Top 5.jQuery ExtJS

Prototype

YUI MooTools

UIKomponenten + jQuery UI +

Script.aculo.us+ Mootools

More

UXVerbesserungen +

Script.aculo.us

Designvorlagen+ jQuery UI

Grösse 92 KB158 MB

(Core: 84 KB)

160 KB23 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 / MITGPL /

CommercialMIT BSD MIT

Internet Briefing, 08.04.23, Folie 7

jQuery und Prototype zur Erweiterung von grafischen Web-Oberflächen.

ExtJS und YUI für applikatorische Lösungen.

Mootools für Animationen und grafische Gestaltung.

Libraries im Einsatz.

Internet Briefing, 08.04.23, Folie 8

Was will ich?

Animation

Emotion

Coolness

Internet Briefing, 08.04.23, Folie 9

Was will ich?

Spass

spielerisch

grafisch

Usability

Internet Briefing, 08.04.23, Folie 10

Was will ich?

funktional

strukturiert

einfach

Internet Briefing, 08.04.23, Folie 11

www.blacksocks.com

Frontend mit jQuery

Backend mit extJS

2 Libraries in einer Plattform?!

Wie geht dies?

Internet Briefing, 08.04.23, Folie 12

Let us code!

DOM Traversal

DOM Manipulation

Animationen

Events

Ajax

Datenspeicherung

Templating

Internet Briefing, 08.04.23, Folie 13

Get ready!

http://jquery.com/

Tutorials

API Reference

UI-Widgets

Themes (Designvorlagen für UI-Widgets)

PlugIns

Internet Briefing, 08.04.23, Folie 14

Weitere Beispiele.

Textmanipulationen slabText - Arctext

Bilder- / Inhaltsslider Flow Slider - Slidorion

Layout ResponseJS - SlickWrap

Applikatorische jsPlumb - UILayout

Experimentell Tubular - Before/After

Internet Briefing, 08.04.23, Folie 15

Mobile Adaption.jQuery und Sencha

Mobile Framework: 1 Umsetzung für

ganze mobile Palette touch-optimiert viele UI-Komponenten Themes 3rd-Party Addonshttp://jquerymobile.com/

http://www.sencha.com/products/touch/demos

Internet Briefing, 08.04.23, Folie 16

Checkliste.

Was will ich? 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

Internet Briefing, 08.04.23, Folie 17

Pay Attention!

Updates Sicherstellung der Funktionalitäten

Profitieren von neuen Featuresund Performanceupgrades

Rechtliches Lizenzmodell überprüfen, va. bei ExtJS

Support: Community oder persönlich

Internet Briefing, 08.04.23, Folie 18

Stay Tuned.

jQuery Aktualisierungen: http://feeds.feedburner.com/jquery/

ExtJS: http://feeds.feedburner.com/SenchaBlog

Internet Briefing, 08.04.23, Folie 19

Take Advantage.

Mehr Zeit für Kundenbedürfnisse Konzentration aufs Wesentliche Erleichterung in der Programmierung Wiederverwendung auf allen Ebenen Qualität Innovation ohne Investitionen Time-To-Market

Internet Briefing, 08.04.23, Folie 20

Fragen?

Internet Briefing, 08.04.23, Folie 21

Christian PalatinusTechnischer Leiter

INM AGUsterstrasse 202, CH-8620 Wetzikon ZH

Phone: +41 44 934 50 83Mobile: +41 79 424 70 18Fax: +41 44 934 50 55E-Mail: christian.palatinus@inm.ch

Web: www.inm.chBlog: www.website-marketing.chCMS G3: www.cms-g3.ch

Aniello BoveCOO, Managing Partner

INM AGUsterstrasse 202, CH-8620 Wetzikon ZH

Phone: +41 44 934 50 62Mobile: +41 79 261 00 16Fax: +41 44 934 50 55E-Mail: aniello.bove@inm.ch

Web: www.inm.chBlog: www.website-marketing.chCMS G3: www.cms-g3.ch

Vielen Dank!