Grundlagen digitaler Gestaltung Niklas Teich Medieninformatik & Gestaltung
|
|
|
- Fritz Neumann
- vor 7 Jahren
- Abrufe
Transkript
1 Seite 1
2 Strukturierung... Was ist eigentlich jquery... Merkmale... Einführung... Selektoren... Effekte: Grundlagen... Callback Funktionen... Events... HTML Manipulationen... AJAX... jquery UI... jquery Mobile... Links Seite 2
3 Was ist eigentlich jquery? Seite 3
4 jquery ist eine kostenlose und am häufigst genutzte JavaScript Klassenbibliothek... beinhaltet Methoden der Navigation und DOM Manipulation... wurde von John Resig 2006 erfunden... wird seit 2008 offiziell ua. von Nokia, Apple und Microsoft Produkten unterstützt... ist die am häufigste verwendetste JavaScript Bibliothek... wird in allen gängigen Browsern unterstützt Seite 4
5 Merkmale Seite 5
6 jquery beinhaltet eine Elementselektion im DOM... DOM Manipulationsmöglichkeiten... ein Event-System... Effekte & Animationen... AJAX Unterstützung... Plug Ins... eine unglaublich detaillierte Dokumentation... nur coole Sachen Seite 6
7 Einführung Seite 7
8 Bibliothek... es gibt 2 verschiedene Versionen der Bibliothek ( komprimiert / unkomprimiert )... entweder die Datei selbst laden, bereitstellen und verlinken... oder nur einen Verweis nutzen ( die Bibliothek liegt z.b. bei jquery selbst oder auch bei den Google Code Libraries ) Vorteil beim direkten Verweis auf einen anderen Online-Standort der Datei:... hohe Wahrscheinlichkeit, dass jquery Bibliothek bereits im Cache des Users liegt Seite 8
9 Einbindung im <head> einer komprimierten jquery Bibliothek auf dem eigenen Webserver <script type= text/javascript src= jquery.min.js ></script>... einer komprimierten jquery Bibliothek auf dem Google Library Server <script type= text/javascript src= ></script> Seite 9
10 Wo rein muss der Code... wie von JavaScript gewohnt, gehört auch jquery Code in ein Script-Tag <script type= text/javascript > // Hier kommt unser jquery Code rein </script> Seite 10
11 Script ausführen... wir möchten nun, dass beim fertig geladenem DOM unser jquery Script ausgeführt wird. Dafür benutzen wir die Hauseigene ready event Funktion <script type= text/javascript > $(document).ready(function(){ // Hier folgt unser eigentlicher Code }); </script> Seite 11
12 Standard-Syntax... jquery erfasst HTML Elemente und führt auf diese actions aus $(selector).action() jquery Start-definieren Element das angesteuert wird Methode / Event, die / das auf den HTML Bereich angewendet wird Seite 12
13 Selektoren Seite 13
14 Element Selektoren... selektiert alle Paragraphen im Dokument $( p )... selektiert alle Paragraphen mit der Klasse MIG im Dokument $( p.mig )... selektiert alle ersten <li> Elemtente jeder <ul> $( ul li:first )... selektiert alle Elemente mit id= wurststalat $( #wurstsalat )... selektiert alle Elemente der Klasse wurst $(.wurst ) Seite 14
15 Attribut-Selektoren... mit XPath Expressions können wir mehrere Elemente mit gegebenden Attributen selektieren und ansteuern... selektiert alle Elemente mit href als Attribut $( [href] )... selektiert alle Elemente mit href als Attribut mit dem Wert # $( [href= # ] )... selektiert alle Elemente mit href als Attribut die mit.png enden $( [href$=.jpg ] )... selektiert alle <input.. > mit dem value= Krautsalat $( input[value= Krautsalat ] ) Seite 15
16 Effekte: Grundlagen Seite 16
17 hide()... lässt das gewünschte Element verschwinden. $(selector).hide(speed,callback) Funktion, die nach der Ausführung von hide() durchgeführt werden soll Element, welches wir gerne ansteuern möchten die Funktion hide gibt die Geschwindigkeit der hide Funktion an, hier möglich: slow, fast, normal, oder Millisekunden. Seite 17
18 Praxis-Beispiel - hide()... auf Knopfdruck verschwinden alle Texte, die in <p> gesetzt wurden. $(document).ready(function(){ $( button ).click(function(){ $( p ).hide(); }); }); Hinweis - nicht vergessen die vor der function geöffneten Klammer nach dieser auch wieder zu schließen! ( Online-Beispiel ) Seite 18
19 show()... lässt das gewünschte Element erscheinen. $(selector).show(speed,callback) Funktion, die nach der Ausführung von show() durchgeführt werden soll Element, welches wir gerne ansteuern möchten die Funktion show gibt die Geschwindigkeit der show Funktion an, hier möglich: slow, fast, normal, oder Millisekunden. Analog zu hide Seite 19
20 Praxis-Beispiel - show()... auf Knopfdruck erscheint ein Text, der vorher nicht zu sehen war $(document).ready(function(){ $( button ).click(function(){ }); $( p ).show(); Hinweis - im Beispiel versteckte ich den Text ganz einfach über den style display: none }); ( Online-Beispiel ) Seite 20
21 toggle()... setzt das Element in Abhängigkeit zu einander auf show / hide $(selector).toggle(speed,callback) Funktion, die nach der Ausführung von toggle() durchgeführt werden soll Element, welches wir gerne ansteuern möchten die Funktion toggle gibt die Geschwindigkeit der toggle Funktion an, hier möglich: slow, fast, normal, oder Millisekunden. Analog zu hide/show Seite 21
22 Praxis-Beispiel - toggle()... auf Knopfdruck verschwinden alle Texte, die in <p> gesetzt wurden, und erscheinen bei erneutem Druck wieder $(document).ready(function(){ $( button ).click(function(){ $( p ).toggle( slow ); }); }); ( Online-Beispiel ) Seite 22
23 Praxis-Beispiel - CSS Selektor... ein Klick auf den Knopf mit der id groß lässt die Schriftgröße auf 40Px wachsen, ein Klick auf den Knopf mit der id klein lässt sie auf 12Px schrumpfen. $(document).ready(function(){ $( #groß ).click(function(){ $( p ).css( font-size, 40px ); }); $( #klein ).click(function(){ $( p ).css( font-size, 12px ); }); Hinweis - mehrere CSS Eigenschaften können so gesetzt werden: $( p ).css({ font-size : 40px, background-color : # }); }); ( Online-Beispiel ) Seite 23
24 Praxis-Beispiel - slidetoggle()... beim Klick auf unseren Text <p>.. mit der id= menu öffnet / schließt sich der Container container mit einem slide-effekt. $(document).ready(function(){ }); $( p.menu).click(function(){ $( #container ).slidetoggle( slow ); }); ( Online-Beispiel ) Seite 24
25 fadeto()... ändert die Deckkraft eines Elements $(selector).fadeto(speed,opacity,callback) Funktion, die nach der Ausführung von fadeto() durchgeführt werden soll Element, welches wir gerne ansteuern möchten verringert die Deckkraft bis zu dem angebenenen Wert ( zwischen 0 und 1, wie z.b. 0.1, 0.25 ) die Funktion fadeto gibt die Geschwindigkeit der toggle Funktion an, hier möglich: slow, fast, normal, oder Millisekunden. Analog zu hide/show Seite 25
26 Praxis-Beispiel - fadeto()... Beim Mouseover über die Box verschwindet diese. Um sie wieder erscheinen zu lassen - einfach den Curser über den Text mit der id= hell halten. $(document).ready(function(){ $( #box ).hover(function(){ $( #box ).fadeto( normal,0.15); }); $( #hell ).hover(function(){ $( #box ).fadeto( fast,1); }); }); ( Online-Beispiel ) Seite 26
27 Übersicht der zur Verfügung stehenden Effekte... animate()... slidedown()... clearqueue()... slidetoggle()... delay()... slideup()... dequeue()... stop()... fadein()... toggle()... fadeout()... hide()... fadeto()... queue()... fadetoggle()... show()... jquery.fx.interval... jquery.fx.off Seite 27
28 Callback Funktionen Seite 28
29 Was ist Callback?... Eine Callback-Funktion wird erst ausgeführt, nachdem die aktuelle vollständig durchgeführt wurde.... so kann man sich sicher sein, dass erst spezielle Funktionen durchgeführt werden, nachdem bestimmte durchgelaufen sind. Seite 29
30 Callback-Beispiel... auf Knopfdruck erscheint ein Text, der vorher nicht zu sehen war $(document).ready(function(){ $( #start ).click(function(){ $( p ).hide(1000,function(){ $( #text ).fadeto( slow,0.3,function(){ $( h1 ).fadeto( slow,0.2,function(){ $( #start ).fadeto( slow,0.1); }); }); }); }); ( Online-Beispiel ) }); Seite 30
31 Events Seite 31
32 Was ist sind genau Events?... Events sind Methoden, die bei verschiedenen Interaktionen des Users reagieren und unterschiedlichste Sachen auslösen können Seite 32
33 kurze Event-Beispiele Seite 33
34 .ready()... kennen wir aus der bereits gezeigten Hauptmethode... ist dem JavaScript load ähnlich, jedoch bezieht sich das.ready() nur auf den vollständig geladenem DOM und nicht auf Daten wie z.b. vollständig geladenen Bildern, wie es bei load der Fall ist... da ready nach dem vollständigem Laden des DOM ausgeführt wird, bietet sich ready am häufigstens für die Platzierung des jquery Codes an. Seite 34
35 .click()... kennen wir aus den meisten Beispielen... reagiert bei einem Klick auf das bezogene Element... ist ein Shortcut für.bind( click,handler) Seite 35
36 .hover()... beinhaltet die event handler für mouseenter und mouseleave... $(selector).hover( handlerin, handlerout); ist ein Shortcut für $(selector).mouseenter(handlerin).mouseleave(handlerout); Seite 36
37 .load()... wird an ein Element gesendet, sobald alle Unter-Elemente vollständig geladen sind.... kann auf verschiedene Typen gesetzt werden wie Bilder, Scripte, frames, iframe und das window Objekt $(window).load(function(){ }); // Hier kommt unser jquery Code rein Seite 37
38 .scroll()... wird als event gesendet, wenn der User in dem Element scrollt... ist für das ganze Fenster möglich, aber auch für einzelne bereiche wie z.b. Frames oder Einzelelemente Seite 38
39 Übersicht der zur Verfügung stehenden Events... bind()... event.isdefaultprevented()... mousemove()... blur()... event.isimmediatepropagationstopped()... mouseout()... change()... event.ispropagationstopped()... mouseover()... click()... event.namespace()... mouseup()... dbclick()... event.pagex()... one()... delegate()... event.pagey()... jquery.proxy()... die()... event.preventdefault()... ready()... error()... event.relatedtarget()... resize()... event.currenttarget... event.result()... scroll()... event.data... event.stopimmediatepropagation()... select()... event.stoppropagation()... event.target... submit()... event.timestamp... event.type... toggle()... event.which... focus()... trigger()... focusout()... focusin()... triggerhandler()... hover()... keydown()... unbind()... keypress()... keyup()... undelegate()... live()... load()... unload()... mousedown()... mouseenter() Seite 39
40 HTML Manipulation Seite 40
41 HTML Inhalt ändern... mit jquery können wir nicht nur nette Effekte machen - wir können auch HTML Elemente und Attribute ändern und manipulieren $(selector).html(content) Element, welche wir gerne ansteuern möchten die Funktion html der Inhalt der geändert / hinzugefügt... wird Seite 41
42 Praxis-Beispiel -.html()... beim Klick auf unseren Text <p>.. mit der id= menu öffnet / schließt sich der Container container mit einem slide-effekt. $(document).ready(function(){ $( button).click(function(){ $( p ).html( Krautsalat ); }); }); ( Online-Beispiel ) Seite 42
43 .append()... mit der append Methode können Inhalte hinter dem angesteuerten Element hinzu gefügt werden. Der Vorteil ist, bereits bestehender Inhalt wird nicht überschrieben! $(selector).append(content) Seite 43
44 .before()... mit der append Methode können Inhalte vor dem angesteuerten Element hinzu gefügt werden. Der Vorteil ist, bereits bestehender Inhalt wird nicht überschrieben! $(selector).before(content) Seite 44
45 AJAX Seite 45
46 AJAX... ist keine Programmiersprache sondern eine Technik für das moderne Web... wurde euch von Konnie bereits wunderschön erklärt... ist mit jquery sehr einfach und effizient einsetzbar... hat eine große Bibliothek an Methoden für die Umsetzung Seite 46
47 Mit jquery und AJAX könnt ihr... verschiedene Arten von Daten austauschen wie TXT, HTML, XML oder JSON über HTTP Get und Post Seite 47
48 load()... kann über die Ajax Technologie Daten asynchron laden $(selector).load(url,daten,callback) Funktion, die nach der Ausführung von fadeto() durchgeführt werden soll Element, welches mit Daten gefüllt wird um Daten dem Server senden zu können die Funktion load Adresse der zu ladenen Datei Seite 48
49 Praxis-Beispiel - load()... auf Knopfdruck wird der <p>.. gesetzte Text mit dem Inhalt der test.txt ausgetauscht $(document).ready(function(){ $( button ).click(function(){ $( p ).load( test.txt ); }); }); ( Online-Beispiel ) Seite 49
50 Übersicht der zur Verfügung stehenden AJAX Methoden... $.ajax()... ajaxcomplete()... ajaxerror()... ajaxsend()... $.ajaxsetup()... ajaxstart()... ajaxstop()... ajaxsuccess()... $.get()... $.getjson()... $.getscript()... load()... $.param()... $.post()... serialize()... serializearray() Seite 50
51 jquery UI Seite 51
52 jquery UI... behandel ich in diesem Referat NICHT, das hat ja jetzt schon lange genug gedauert!... ist eine UserInterface Library... beinhaltet Interaktionsmöglichkeiten wie z.b. Draggable, Droppable, Resizeable, Selectable, Sortable... beinhaltet fertige Widgets wie z.b. Accordion, Autocomplete, Buttons, Datepicker, Dialog, Progressbar, Slider, Tabs wen es interessiert: Seite 52
53 jquery Mobile Seite 53
54 jquery mobile... Interfaces speziell für Smartphones & Tablet PCs... Touch-Optimized Layouts und Widgets... Cross-Plattform & Cross-Device... Template Designer... wird unterstützt von ios, android, BlackBeryy, bada, Windows Phone, plam webos, symbian und MeeGo wen es interessiert: Seite 54
55 Links Seite 55
56 Hier könnt alles zum Thema jquery finden... jquery.com Offizielle Seite mit unglaublich viel Tutorials, einer riesigen Dokumentation, Beispielen und Erläuterungen... jqueryui.com Offizielle Seite für jquery UI... jquerymobile.com Offizielle Seite für jquery Mobile... flowplayer.org/tools/ Sammlung von sehr sehr sehr vielen jquery Codes für super geile Animationen in den Bereichen Tabs, Tooltips, Overlay, Validator, Rangeinput, Dateinput, Expose, Flashembed und verschiedene Kombinationen... google.de Suchen! jquery Tutorial, Beispiele, Code - was auch immer, es gibt unendlich viele fertige Codes für die verrücktesten Sachen... net.tutsplus.com Neben JS und Ajax sowieso eine schöne Tutorial-Seite mit dem Thema Design & Web Development Seite 56
57 Vielen Dank für eure Aufmerksamkeit! Seite 57
jquery Einstieg 2 CSS manipulieren; toggle, hide und show
jquery Einstieg 2 CSS manipulieren; toggle, hide und show Inhalt: 1. CSS-Eigenschaften manipulieren 2. Beispiel 2: Elemente ein- oder ausblenden - Animationen 3. Theorie - Methode.toggle() bzw. hide()
Pimp my APEX. Clientseitige APEX-Entwicklung mit JavaScript-Frameworks am Beispiel von jquery. Andreas Wismann, MT AG
Pimp my APEX Clientseitige APEX-Entwicklung mit JavaScript-Frameworks am Beispiel von jquery Andreas Wismann, MT AG Warum JavaScript-Frameworks? 07.10.2010 Clientseitige APEX-Entwicklung mit JavaScript-Frameworks
Mul$media im Netz Wintersemester 2012/13. Übung 06
Mul$media im Netz Wintersemester 2012/13 Übung 06 Ludwig- Maximilians- Universität München Mul6media im Netz WS 2012/13 - Übung 6-1 Lösung zu Übungsbla5 04 Ludwig- Maximilians- Universität München Mul6media
Agenda. Vorstellung JavaScript Frameworks UI vs. Backend jquery/jqueryui. Vergleich normaler JavaScript Code mit jquery Code
Agenda Vorstellung JavaScript Frameworks UI vs. Backend jquery/jqueryui Vergleich normaler JavaScript Code mit jquery Code 2 Über Wabion - Enterprise Search auf Basis Google Search Appliance - Anwendungsentwicklung
jquery DIE Javascript-Library
jquery DIE Javascript-Library Uwe Dierolf INETBIB 2010, 14. April.2010 KIT-BIBLIOTHEK KIT Universität des Landes Baden-Württemberg und nationales Forschungszentrum in der Helmholz-Gemeinschaft Inhalt Motivation
Auffrischung jquery. jquery Mobile. Marco Francke I 24.02.2011
Auffrischung jquery jquery Mobile Marco Francke I 24.02.2011 Mayflower GmbH 2010 write less do more Marco Francke 24. Februar 2011 24.02.11 Mayflower GmbH 2 Mayflower GmbH 2010 Was ist jquery und was kann
Webengineering. jquery
Webengineering jquery Marcel Vilas 1 DHBW - Stuttgart jquery - Allgemein jquery ist eine JavaScript-Bibliothek (API) jquery ist eine Funktion (Funktionen sind Objekte) Vorteile: einfacher als vanilla JavaScript
УУ ADDISON-WESLEY. An imprint of Pearson Education
Ralph Steyer jquery Das neue JavaScript-Framework für interaktives Design УУ ADDISON-WESLEY An imprint of Pearson Education München Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico
JavaScript AJAX. Univ.-Prof. Dr.-Ing. Wolfgang Maass. Chair in Information and Service Systems Department of Law and Economics
JavaScript AJAX Univ.-Prof. Dr.-Ing. Wolfgang Maass Chair in Information and Service Systems Department of Law and Economics WS 2011/2012 Mittwoch, 8:00 9:30 Raum HS 021, B4 1 Wrap-Up JavaScript (JS) ermöglicht
Dynamisches Anzeigen von Informationen in APEX mit jquery UI Dialogs und Tabs
Dynamisches Anzeigen von Informationen in APEX mit jquery UI Dialogs und Tabs Dr. Gudrun Pabst Trivadis GmbH München Schlüsselworte: APEX, jquery UI, Dialogs, Tabs Einleitung Die von Apex erstellten HTML-Seiten
APEX Datenverwaltung Wo sind die Daten gerade?
APEX Datenverwaltung Wo sind die Daten gerade? Dr. Gudrun Pabst Trivadis GmbH München Schlüsselworte: APEX, Sessionverwaltung, Dynamic Actions Einleitung Eine APEX-Anwendung wird erst durch zusätzliche
AJAX DRUPAL 7 AJAX FRAMEWORK. Was ist das Ajax Framework? Ein typischer Ablauf eines Ajax Requests Die Bestandteile des Ajax Frameworks.
DRUPAL 7 AJAX FRAMEWORK Was ist das Ajax Framework? Ein typischer Ablauf eines Ajax Requests Die Bestandteile des Ajax Frameworks AJAX Beispiele Fragen: Gibt es jemanden der noch gar keine Erfahrungen
jquery Kochbuch O'REILLY' Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo jquerycommunityexperts Deutsche Übersetzung von Thomas Demmig
jquery Kochbuch jquerycommunityexperts Deutsche Übersetzung von Thomas Demmig O'REILLY' Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo Inhalt Vorwort Beteiligte Einleitung XIII XV XIX Grundlagen
Montag, 24. Januar 2011
Gemeinsam Mehrwert schaffen! addmore GmbH 20 festangestellte Mitarbeiter addmore GmbH 20 festangestellte Mitarbeiter über 30 freiberufliche Mitarbeiter Unterstützung des Kunden von Konzeption über Design,
DOAG 2011 Konferenz + Ausstellung Nicole Hoock, esentri consulting GmbH. Pimp My Apps
DOAG 2011 Konferenz + Ausstellung Nicole Hoock, esentri consulting GmbH Pimp My Apps Your easy entry to Enterprise Social Networking Enterprise Social Networking Projektmanagement und Consulting Social
Dynamisches Anzeigen von Informationen mit jqueryui Dialogs und Tabs
Dynamisches Anzeigen von Informationen mit jqueryui Dialogs und Tabs Dr. Gudrun Pabst BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN 1 AGENDA Bitte warten
Mehr Dynamik in Apex mit Javascript und JQuery
Mehr Dynamik in Apex mit Javascript und JQuery Alexander Scholz its-people Frankfurt am Main Schlüsselworte: Javascript und JQuery in Apex einbinden, Elemente dynamisch anzeigen, Selectlisten aktualisieren,
jquery, Ajax und Web Components
/ Vorlesung Webbasierte Informationssysteme (CS4130) Vorlesung Webbasierte Informationssysteme (CS4130) Privatdozent Dr. rer. nat. habil. Sven Groppe https://www.ifis.uni-luebeck.de/index.php?id=groppe
DAS UNIVERSELLE JAVASCRIPT-
ralph STEYER jquery DAS UNIVERSELLE JAVASCRIPT- FRAMEWORK FÜR DAS INTERAKTIVE WEB UND MOBILE ANWENDUNGEN EXTRA: Mit kostenlosem E-Book Alle Beispielcodes zum Download Steyer jquery Bleiben Sie auf dem
IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery
IT-Zertifikat: Allgemeine Informationstechnologien II Übungsblatt jquery Für unser Miniredaktionssystem, das wir im Laufe der nächsten Wochen / Monate entwickeln werden, verwenden wir eine der Website
Ereignisse Auf Benutzereingaben reagieren
Ereignisse Auf Benutzereingaben reagieren JavaScript ermöglicht es dem Entwickler auf Ereignisse (engl.: events) im Browser zu reagieren. Auf diese Weise kann der Benutzer mit den Anwendungen interagieren,
tekom Frühjahrstagung 2014 in Augsburg Bestehende XML Dokumentation in modernen Browsern anzeigen Michael Brand, 10. April 2014
tekom Frühjahrstagung 2014 in Augsburg Bestehende XML Dokumentation in modernen Browsern anzeigen Michael Brand, 10. April 2014 Dokumentationsinhalte sind teilweise älter als die Browser 1996 SGML, 2006
Mail: Web: juergen-schuster-it.de
Mail: j_schuster@me.com Twitter: @JuergenSchuster Web: juergen-schuster-it.de APEX Podcast: apex.press/talkshow Dynamic Actions Examples: dynamic-actions.com APEX-Meetups: apexmeetups.com APEX D-A-CH Facebook
APEX Datenverwaltung Wo sind die Daten gerade? Dr. Gudrun Pabst
APEX Datenverwaltung Wo sind die Daten gerade? Dr. Gudrun Pabst Basel Bern Lausanne Zürich Düsseldorf Frankfurt/M. Freiburg i. Br. Hamburg München Stuttgart Wien Voraussetzungen Alles hier gezeigte benötigt
jquery 2 1 / 5 Doing Web Apps jquery 2 Letzte Änderung: Version: 1.1
1 / 5 Doing Web Apps jquery 2 Autor: Rüdiger Marwein Letzte Änderung: 2014-11-07 Version: 1.1 Dieses Dokument darf mit Nennung des Autoren - frei vervielfältigt, verändert und weitergegeben werden. Der
Inhalt HTML 2. Applets Frames Formulare CSS cascading style sheets. Lehrveranstaltung Internet in AT Dr.-Ing. A. Braune TECHNISCHE UNIVERSITÄT DRESDEN
Inhalt HTML 2 Applets Frames Formulare CSS cascading style sheets SS 06 1 Applets Das Applet Java Applets sind kleine Java-Programme mit deren Hilfe aktive Webseiten erstellt werden können. werden mit
Mobile Apps mit. React-Native. Manuel
Mobile Apps mit React-Native Manuel Mauky @manuel_mauky Mobile Apps? Mobile Apps? - Welche Möglichkeiten existieren? Native Android ios Mobile Apps? - Welche Möglichkeiten existieren? Native Android ios
Mobile Apps mit. React-Native. Manuel
Mobile Apps mit React-Native Manuel Mauky @manuel_mauky Mobile Apps? Mobile Apps? - Welche Möglichkeiten existieren? Native Android ios Mobile Apps? - Welche Möglichkeiten existieren? Native Android ios
Diagramme - Next Generation
Diagramme - Next Generation D3.js im Unternehmen nutzen Carsten Czarski Business Unit Database Oracle Deutschland B.V. & Co KG Was ist D3js? Daten-Visualisierung im Browser mit HTML5 und Javascript Basiert
Web-Programmierung. HTML5-Apps für's Smartphone Thomas Perschke
Web-Programmierung HTML5-Apps für's Smartphone Thomas Perschke Heute Mobile Designprinzipien Design in der Praxis Erkennung von Browsern CSS- und Javascript-Frameworks JQueryMobile Aufgabe Mobile Designprinzipien
Task Force - Profound UI Suite Newsletter für die Version (Stand )
Task Force - Profound UI Suite Newsletter für die Version 5.9.0 (Stand 05.05.2017) Version 5.9.0-1 - Inhalt Allgemeine Informationen... - 3 - Die Profound UI Produkt Suite... - 3 - Atrium (Menu/Navigation
Vorlesungsreihe EwA. Javascript Frameworks am Beispiel von. JQuery. Prof. Dr.-Ing. Thomas Wiedemann.
Vorlesungsreihe EwA Javascript Frameworks am Beispiel von JQuery Prof. Dr.-Ing. Thomas Wiedemann email: wiedem@informatik.htw-dresden.de HOCHSCHULE FÜR TECHNIK UND WIRTSCHAFT DRESDEN (FH) Fachbereich Informatik/Mathematik
JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten
Einführung in JavaScript anhand von Beispielen JavaScript clientseitige Programmiersprache zur Dynamisierung von Internetseiten Grundbedingungen die Einbindung erfolgt über ein Objektmodell (Objekte mit
DOAG München Layout und dynamische Elemente für APEX Anwendungen
DOAG München 2012 Layout und dynamische Elemente für APEX Anwendungen MuniQSoft GmbH Gegründet: 1998 Tätigkeitsbereiche: Oracle Datenbanken IT Consulting & Services Oracle Schulungen (SQL, PL/SQL, DBA,
PHP, Ajax und JavaScript
PHP, Ajax und JavaScript Was ist AJAX? AJAX = Asynchronous JavaScript and XML. AJAX ist eine Technik für die schnelle und dynamische Web-Seiten zu erstellen. Wenn ein Browser auf ein -tag stößt,
Grundlagen Internet-Technologien INF3171
Grundlagen Internet-Technologien INF3171 ekaay AJAX Version 1.0 01.07.2013 aktuelles 2 Ajax: zunächst Abkürzung für Asynchronous JavaScript And XML Jesse J. Garrett (AdaptivePath) http://www.adaptivepath.com/publications/essays/archives/
going mobile APEX am Smartphone
going mobile APEX am Smartphone Peter Raganitsch click-click IT Solutions e.u. Wien, Österreich Schlüsselworte: Oracle APEX, Application Express, mobile, Smartphone, iphone, Android, Blackberry, Tablet,
Integration von UIS-Webdiensten
Integration von UIS-Webdiensten neue Möglichkeiten durch Web 2.0 basierte Technologien Clemens Düpmeier, Werner Geiger, Claudia Greceanu (duepmeier, geiger, greceanu@iai.fzk.de) Institut für Angewandte
Ereignisse Auf Benutzereingaben reagieren
Ereignisse Auf Benutzereingaben reagieren JavaScript ermöglicht es dem Entwickler auf Ereignisse (engl.: events) im Browser zu reagieren. Auf diese Weise kann der Benutzer mit den Anwendungen interagieren,
Task Force - Profound UI Suite Newsletter für die Version (Stand )
Task Force - Profound UI Suite Newsletter für die Version 5.7.0 (Stand 12.12.2016) Version 5.7.0-1 - Inhalt Allgemeine Informationen... - 3 - Die Profound UI Produkt Suite... - 3 - Atrium (Menü / Navigationssystem)...
NATURAL FOR AJAX RESPONSIVE WEB ANWENDUNGEN FÜR MOBILE ENDGERÄTE ROLAND FABICH NOVEMBER 2016
NATURAL FOR AJAX RESPONSIVE WEB ANWENDUNGEN FÜR MOBILE ENDGERÄTE ROLAND FABICH NOVEMBER 2016 2015 Software AG. All rights reserved. For internal use only RESPONSIVE WEB ANWENDUNGEN MIT NJX ÜBERSICHT Live
V by WBR1/BFH-TI 2011 by MOU2/BFH-TI
Java-Applets Unterlagen zum Modul OOP mit Java V 3.0 2007 by WBR1/BFH-TI 2011 by MOU2/BFH-TI Java-Applets V3.0 2011 by WBR1&MOU2/BFH- TI Lernziele Die Kursteilnehmer sind in der Lage: Möglichkeiten und
VideoPlus. Shopware Video-Plugin. Handbuch
VideoPlus Shopware Video-Plugin Handbuch VideoPLUS SHOPWARE PlugIn Inhaltsverzeichnis Wo erhalte ich den Code des von mir gewünschten Videos 04 Youtube MyVideo vimeo Sevenload Yahoo! Screen Netzr Allg.
Mit PL/SQL auf s ipad
DOAG 2012 Konferenz 20. November 2012, 15:00 Uhr NCC NürnbergConvention Center Ost Mit PL/SQL auf s ipad Martin Friemel mfriemel@webag.com 1 Mit PL/SQL auf s ipad Wie entwickelt man PL/SQL-Webanwendungen
Lernen vom Page Designer. Auf den Spuren von Jules Verne
Lernen vom Page Designer Auf den Spuren von Jules Verne 1 Lernen vom Page Designer Agenda 1 Einführung 2 Application Builder als Anwendung importieren 3 4 5 Page Designer im Detail (javascript stack, MVC,
Webseiten erstellen für Einsteiger
Daniel Mies Webseiten erstellen für Einsteiger Schritt für Schritt zur eigenen Website Galileo Press Vorbemerkungen 15 1 Vordem Start 21 1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? 21
Mit PL/SQL auf s ipad
DOAG 2012 Konferenz 20. November 2012, 16:00 Uhr NCC NürnbergConvention Center Ost Mit PL/SQL auf s ipad Martin Friemel mfriemel@webag.com 1 Mit PL/SQL auf s ipad Wie entwickelt man PL/SQL-Webanwendungen
Mit dem Google-Web-Toolkit moderne Web-Anwendungen entwickeln
Mit dem Google-Web-Toolkit moderne Web-Anwendungen entwickeln Ziel dieses Vortrags Ich möchte Sie davon überzeugen, dass das Google-Web-Toolkit (GWT) das aktuell beste Tool zur Erstellung von modernen
Immer mehr lebt mobil
Immer mehr lebt mobil mehr als 4.600.000.000 Mobilgeräte breite Verfügbarkeit neuer always-on und Apps Lifestyle 2 Trittsicher auf allen mobilen Pfaden mit HTML5 und jquery Mobile Mike Baird http://flickr.com/photos/mikebaird/482031103/
MOBILE WEBANWENDUNGEN MIT JQUERY MOBILE UND PRIMEFACES MOBILE. Giebelhaus Alexander 1
MOBILE WEBANWENDUNGEN MIT JQUERY MOBILE UND PRIMEFACES MOBILE Giebelhaus Alexander 1 Agenda Die mobile Welt UI-Design bei mobilen Webanwendungen Technologien zur Umsetzung jquery Mobile PrimeFaces Mobile
Eclipse Scout Heute und Morgen. Jérémie Bresson BSI Business Systems Integration AG
Eclipse Scout Heute und Morgen @ZimMatthias @j2r2b Matthias Zimmermann Jérémie Bresson BSI Business Systems Integration AG Scout Heute Neon Release Eclipse Scout Neon Release Neue Java Platform Neon Release
Inhalt. 1 Mit CSS beginnen 1. 2 Textauszeichnungen und andere Grundlagen 13
D3kjd3Di38lk323nnm xiii 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS......................... 1 1.1.1 lnline-formate............................. 3 1.1.2 Eingebettete Formate........................
Umsetzen einer skalierbaren horizontalen Navigation:
Umsetzen einer skalierbaren horizontalen Navigation: Erstelle im Dreamweaver eine neue HTML - Datei (navigation.html) und eine CSS Datei (navigation.css). Die Struktur dieser Navigation soll auf einer
So erreichen Sie Ihre Event-App
Anleitung So erreichen Sie Ihre Event-App ZUGRIFF ÜBER DEN WEB BROWSER Die App Ihrer Veranstaltung erreichen Sie über einen Browser, wie Safari, Chrome oder Firefox, auf Smartphones, Tablets und Laptops.
ActiveX Scripting IE und DHTML (DOM): Architektur, Beispiele (Object Rexx)
ActiveX Scripting IE und DHTML (DOM): Architektur, Beispiele (Object Rexx) Oliver Spritzendorfer Thomas Fekete ActiveX Technologie für ausführbaren Programmcode auf Web-Seiten wiederverwendbare Softwarekompononente
Webdesign-Multimedia HTML und CSS
Webdesign-Multimedia HTML und CSS Thomas Mohr 1 HTML 1.1 Was ist HTML? HTML steht für Hypertext Markup Language und ist eine Auszeichnungssprache zur Strukturierung digitaler Dokumente. HTML-Dokumente
WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012
WEBAPPS MEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFT PROF. DR. MANFRED THALLER JONAS SCHOPHAUS UNI KÖLN WS 2012 AGENDA 1. Native versus webbasierte Apps 2. HTML5 & CSS3 1. Media Queries 2. Geolocation
Diagramme - Next Generation
Diagramme - Next Generation D3.js im Unternehmen nutzen Carsten Czarski Business Unit Database Oracle Deutschland B.V. & Co KG Data Driven Documents (www.d3js.org) 2 Was ist D3js? Daten-Visualisierung
Einführung in die Cross-Plattform Entwicklung Das Intel App Framework
Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt
HTML-Seiten mithilfe von JavaScript durch die Bearbeitung von DOM-Elementen aktualisieren. Mit jquery diese sogar animieren.
Das DOM und jquery Inhalt: HTML-Seiten mithilfe von JavaScript durch die Bearbeitung von DOM-Elementen aktualisieren. Mit jquery diese sogar animieren. 1)DOM erklären Ein Element mit getelementbyid auswählen
APEX 5.0: neue & überarbeitete Komponenten. Oliver Lemm Berlin,
APEX 5.0: neue & überarbeitete Komponenten Oliver Lemm Berlin, 16.09.2015 Agenda 1. Modale Dialoge 2. mobile Komponenten 3. Aktualisierte Komponenten 2 Modale Dialoge 3 Modaler Dialog (Page) Page Modal
EasyWeb CSS Editor. EasyWeb CSS Editor IACBOX.COM. Version Deutsch
EasyWeb CSS Editor Version 2.0.1 Deutsch 19.05.2014 In diesem HOWTO wird beschrieben wie Sie mit Hilfe des EasyWeb CSS Editor die Kunden-Anmeldeseite der IAC-BOX bearbeiten. EasyWeb CSS Editor TITEL Inhaltsverzeichnis
Wählt man einen Wert aus, so wird dieser in das Selektionsbild übernommen und der Docking- Container wird wieder verkleinert.
Fly-Out-Menu Ein Fly-Out-Mechanismus auf dem Selektionsbild mithilfe von HTML und entsprechenden Events. Fährt man mit der Maus über einen der drei angebotenen Kästen, so fährt der Docker-Control aus und
Lösungen für jquery-entwickler. jquery Kochbuch. jquery Community Experten. O Reilly. Deutsche Übersetzung von Thomas Demmig
Lösungen für jquery-entwickler jquery Kochbuch O Reilly jquery Community Experten Deutsche Übersetzung von Thomas Demmig jquery Kochbuch jquery Kochbuch jquerycommunityexperts Deutsche Übersetzung von
Hacking. Anpassungen in der Stadt Stuttgart
Hacking Anpassungen in der Stadt Stuttgart 15.11.2017 1 atlasfx in Stuttgart 1. Einsatzzwecke 2. Nutzungsstatistik Hacks 1. Minimal-Template 2. 3D-Button 3. Seitenmenü 4. Mobiler Client 15.11.2017 2 Wo
Disclaimer mit OK bestätigen und im folgendem Fenster Ihren Usernamen und Passwort eingeben.
QUICK REFERENCE-GUIDE HSH NORDBANK TRADER Start des Traders Den Internet-Browser öffnen und über https://hsh-nordbank-trader.com/client.html den HSH Nordbank Trader öffnen. Disclaimer mit OK bestätigen
JavaScript Frameworks
JavaScript Frameworks WWW-Seminar Karsten Möckel 21.04.2010 Agenda Einführung / Problemstellung Aufgabenfelder JavaScript Frameworks jquery und jquery UI Vergleich Standard-Vorgehen vs. jquery Weitere
Task Force - Profound UI Suite Newsletter für die Version (Stand )
Task Force - Profound UI Suite Newsletter für die Version 5.10.0 (Stand 05.07.2017) Version 5.10.0-1 - Inhalt Allgemeine Informationen... - 3 - Die Profound UI Produkt Suite... - 3 - Atrium (Menu/Navigation
Bootstrap4 Layout Komponenten
Bootstrap4 Layout Komponenten Inhalt: 1.)media object 2.)list group 3.)Navigation mit tabs und pills 1.)Media Object Style Dieses Design wird oft eingesetzt, wenn man Tweeds oder Blog-Kommentare erstellt.
Internet-Programmierung
JavaScript und DOM 18.5.2009 1 Verbindung JavaScript und HTML Bisher: JavaScript nette Scriptsprache Interessant, weil mit HTML verbindbar Erweituerung von HTML/CSS 2 DOM DOM: Document Object Model http://www.w3.org/dom/
edoobox.com Für Ihre Kurse, Seminare und Events edoobox.com Kurzanleitung für Experten: Bootstrap 1 von 6
Für Ihre Kurse, Seminare und Events edoobox.com Kurzanleitung für Experten: Bootstrap www.edoobox.com 1 von 6 Bootstrap Jedem neu erstellten Design können Sie einen der 25 vorgegebenen Styles zuordnen,
ImgTrans Systembeschreibung Ein Service von FlixData.Com. Vers April 2017
ImgTrans Systembeschreibung Ein Service von FlixData.Com Vers. 2.5 05. April 2017 1. Zweck ImgTrans ist ein Web basiertes Programm zum Austausch von Dateien übers Internet. Dateien werden dabei nur für
PresseBox Presseticker
PresseBox Presseticker Version 1.0 letzte Aktualisierung: 09.04.2013 2013 unn UNITED NEWS NETWORK GmbH, Karlsruhe Inhaltsverzeichnis Einführung... 3 Standard-Ticker... 3 Flying-Ticker... 3 Extended-Ticker...
Markup Injections. Volksmund: XSS. Mario Heiderich
Markup Injections Volksmund: XSS Mario Heiderich Überblick Reine Markup Injections Clickjacking und UI Redressing Cross Site Scripting JavaScript Injections CSS Injections Unsichtbarer Payload XML Injections
Der CSS-Problemlöser
Rachel Andrew Der CSS-Problemlöser Über 100 Lösungen für Cascading Stylesheets 2., überarbeitete und aktualisierte Auflage «j dpunkt.verlag Inhalt 1 Mit CSS beginnen 1 1.1 Formate definieren mit CSS 1
bsc Education Center bsc solutions GmbH & Co. KG Industriestr. 50 b, Walldorf Tel:
bsc Education Center bsc solutions GmbH & Co. KG Industriestr. 50 b, 69190 Walldorf education@bsc-solutions.com Tel: +49 6227 384 85-100 www.bsc-solutions.com SCHULUNGSÜBERSICHT: SAPUI5 / SAP Fiori BSC-UI-300
xflow Systemanforderungen
xflow Systemanforderungen Version 5.2.0 Stand 16.01.2018 Copyright 2018 WMD Group GmbH Alle Rechte, auch die des Nachdrucks, der Vervielfältigung oder der Verwertung bzw. Mitteilung des Inhalts dieses
Zwei-Faktor- Authentifizierung für das Smartphone.
Zwei-Faktor- Authentifizierung für das Smartphone.. Zwei-Faktor-Authentifizierung für das Smartphone. Inhalte. Einleitung. 2 Einrichtung Zwei-Faktor-Authentifizierung für das Smartphone. 3 Sicherheitseinstellungen
Leichtgewichtige Web 2.0-Architektur für komplexe Business-Anwendungen Nicolas Moser PRODYNA AG
05.07.2012 Leichtgewichtige Web 2.0-Architektur für komplexe Business-Anwendungen Nicolas Moser PRODYNA AG Agenda 01 Einführung 02 Architektur 03 Lösungen 04 Zusammenfassung 2 2 Agenda 01 Einführung 02
Digitale Medien. Übung zur Vorlesung. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid Wintersemester 2016/17 JavaScript Browser-Scriptsprache, ursprünglich von Netscape entwickelt. wird direkt im Browser
Übung zur Vorlesung. Digitale Medien. Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider
Übung zur Vorlesung Digitale Medien Vorlesung: Heinrich Hußmann Übung: Renate Häuslschmid, Hanna Schneider Wintersemester 2015/16 JavaScript Browser-Scriptsprache, ursprünglich von Netscape entwickelt.
Webseiten werden mobil Planung geht vor
Webseiten werden mobil Planung geht vor Mobiles Web Aspekte der Planung 20. April 2012 Inhaltliche Schwerpunkte Einordnung mobiler Technologien Besonderheiten mobiler Touchscreen-Geräte Best Practices
VAADIN, SPRING BOOT & REST
VAADIN, SPRING BOOT & REST Ein Einstieg für Domino Entwickler Stephan Kopp 1 STEPHAN KOPP Software & Solutions Development Tel.: +49 6182 7869420 Mobil: +49 173 3089806 E-Mail: stephan.kopp@axians.de 2
VORGEHEN BEI DER INSTALLATION UND VERSENDUNG VON DATEIEN MIT FILEZILLA CLIENT
VORGEHEN 1 / 15 Inhaltsverzeichnis 1 ZIELE... 3 2 INSTALLATIONSVERFAHREN... 4 3 VORGEHEN ZUM VERSENDEN EINER DATEI... 12 2 / 15 1 ZIELE Dieses Dokument hat als Ziel : alle Installationsphasen des Kunden
Leseprobe. jquery. Das universelle JavaScript-Framework für das interaktive Web und mobile Apps. von Ralph Steyer
Leseprobe zu jquery Das universelle JavaScript-Framework für das interaktive Web und mobile Apps von Ralph Steyer ISBN (Buch): 978-3-446-45558-0 ISBN (E-Book): 978-3-446-45651-8 Weitere Informationen und
Anmerkungen zur Abgabe
Die Blätter dürfen in Gruppen von bis zu zwei Personen bearbeitet werden. Abgabe individuell bis zum 05.12.2018, 23:59 Uhr per Mail an den jeweiligen Tutor und. Als Betreff bitte gdmi-[rot GRÜN BLAU]-Matrikelnummer1-Matrikelnummer2-5
APEX verbessern mit Browser-Extensions
APEX verbessern mit Browser-Extensions Schlüsselworte APEX, JavaScript, JQuery, HTML5 Einleitung Till Albert MT AG Ratingen Wer kennt das nicht, beim Entwickeln mit APEX im Page Designer; irgendein kleineres
Überblick über XUL. XSoftware. Dr. Heribert Schütz webxcerpt Software GmbH hs@webxcerpt.com. web cerpt. Dr. Heribert Schütz webxcerpt Software GmbH
Überblick über XUL hs@webxcerpt.com Was ist XUL? extensible User-interface Language eine XML-Sprache für die Implementation von GUIs aus dem Mozilla-Projekt stark an (W3C-)Standards orientiert plattform-neutral
xflow Systemanforderungen Version 5.1.5
xflow Systemanforderungen Version 5.1.5 25.01.2017 Copyright 2017 - WMD Group GmbH Alle Rechte, auch die des Nachdrucks, der Vervielfältigung oder der Verwertung bzw. Mitteilung des Inhalts dieses Dokuments
file://c:\dokumente und Einstellungen\Admin\Eigene Dateien\NetObjects Fusion 11...
Seite 1 von 6 Lytebox Galerie in NOF einbauen - (hier erstellt mit NOF 11). Zunächst bitte auf den Link (unten) klicken um zu der Vorlagen-Datei mit den Skripten und einer detaillierten Beschreibung von
Virtuelle Desktop Infrastruktur
Virtuelle Desktop Infrastruktur Inhaltsverzeichnis 1. Hintergrund 2. VMware Horizon View Clients 3. Installation VMware Horizon View Client 3.1. Installation für Windows 3.2. Installation für OS X 3.3.
Die Kurse sind online zu bearbeiten, ein Download auf Ihren Rechner ist nicht möglich.
Hilfe zur Bearbeitung und Navigation Technische Anforderungen Die Kurse sind online zu bearbeiten, ein Download auf Ihren Rechner ist nicht möglich. Um unsere Kurse anschauen und bearbeiten zu können,
jquery! JavaScript Frameworks
1. Einstieg jquery! JavaScript Frameworks jquery basiert auf der Programmiersprache JavaScript und erleichtert bei Webauftritten eine Reihe von Aufgaben wie z. B. Animationseffekte oder das Validieren
JSN ImageShow Theme Slider Konfigurationhandbuch
JSN ImageShow Theme Slider Konfigurationhandbuch (für JSN ImageShow 4.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine Diese Dokumentation ist Freilassung unter der
Leitfaden zum Einsatz von interaktiven Unterrichtseinheiten
Leitfaden zum Einsatz von interaktiven Unterrichtseinheiten Die interaktiven Unterrichseinheiten in RAAbits Ethik online sind eine motivierende Alternative für Schülerinnen und Schüler und sorgen für Abwechslung
Programmieren II. Dr. Klaus Höppner. Hochschule Darmstadt WS 2006/2007
Programmieren II Dr. Klaus Höppner Hochschule Darmstadt WS 2006/2007 1 / 15 Einführung: Grafische Benutzeroberflächen 2 / 15 Einführung: GUI Fast alle Programme besitzen mittlerweile eine grafische Benutzeroberfläche