DeepLearning im Browser

https://pair-code.github.io/deeplearnjs/docs/tutorials/intro.html

JS Maps Beispiele

 

AngularJS Google Maps directive: https://embed.plnkr.co/6UN14Q/

AngularJS Google Maps directive Seoul Map: https://embed.plnkr.co/XPIB1g/

AngularJS - Search – Box: http://embed.plnkr.co/1rpXQhcZqwJ7rv0tyK9P/

AngularJS – Polygon: http://embed.plnkr.co/k4GbORXFX9K3KdMzV6L0/

Google Maps v3 Parallel Lines: http://embed.plnkr.co/N8idQd/

HowTos JS

 

Grunt

Egghead: How to use Grunt: https://egghead.io/lessons/gruntjs-introduction-to-grunt?pl=learn-how-to-use-grunt-08e79268

Angular 2

Quickstart Angular 2 : https://angular.io/docs/ts/latest/quickstart.html und Live Beispiel: https://angular.io/resources/live-examples/quickstart/ts/plnkr.html 

Quickstart Angular2 in Visual Studio: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

Say Hello Angular 2: https://egghead.io/lessons/angular-2-say-hello-world-to-angular-2?course=angular-2-fundamentals

Web Maps mit Gmaps.js

 

Home: https://hpneo.github.io/gmaps/

Repo: https://github.com/hpneo/gmaps

Beispiele: https://hpneo.github.io/gmaps/examples.html 

JSfiddle Minimum Projekt http://jsfiddle.net/e52792j5/?utm_source=website&utm_medium=embed&utm_campaign=e52792j5

 

Javascript – Dev Tools

 

JavaScript Task Runner http://gruntjs.com/ 

 

Karma Test-Runner http://karma-runner.github.io/0.13/index.html 

Multiplattform - Mobile Apps mit HTML+CSS+JS http://cordova.apache.org/

Jade Node.js-Template Engine  http://jade-lang.com/

Express – minimalistisches Webframework für Node.js / und Application Generator  http://expressjs.com/ 

 

Bower – Website Paket Manager - http://bower.io/

Yeoman Application Generator http://yeoman.io/

Daten Blog – mit Visualisierung

Eine  schöne Darstellung von Opendata
http://blog.zeit.de/open-data/

Open Data Thema bei Heise:
http://www.heise.de/thema/Open-Data

Interessantes WebLayout zum Storytelling: Pageflow

Source: https://github.com/codevise/pageflow
Beispiel : http://multimedia.boerse.ard.de/boersenfilme#764

Artikel: http://t3n.de/news/pageflow-interaktives-storytelling-543440/
Plattform: Ruby 1.9.3, Rails 4.0, redis Server (http://redis.io/), Amazon S3 Storage

AngularJS – Single (Web-)Page Framework

 

Linksammlung

• http://de.wikipedia.org/wiki/AngularJS
• Tutorial http://www.w3schools.com/angular/
• Deutschsprache Startseite http://angularjs.de/
• Schnelleres Rendern und reactJS http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/

Alternativen

• http://knockoutjs.com/
• React http://facebook.github.io/react/ 
  https://www.google.de/search?q=reactjs&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:de:official&client=firefox-a&channel=sb&gfe_rd=cr&ei=GmlkVJGnAoOm8wfhlICQBg 
• http://backbonejs.org/
• http://ampersandjs.com/
• http://emberjs.com/

Online Folien mit OpenSlides - Präsentations- und Versammlungssystem

http://openslides.org/de/

JQuery Tables and tools

JQuery unterstützt leine Tabellenfunktionen, Mögliche hilfe gibt es hier:

http://utdesign13.com/15-best-jquery-table/
http://www.datatables.net/

Leafelet: Open Source JS Bibliothek für Mobile Apps

Eine Javascript – Lib zum Zeichnen von karten und Elementen, allerdings (bisher) ohne Editierungsfunktion. entstammt aus dem Cloudemate Projekt.

 

http://leafletjs.com/
http://leaflet.github.com/Leaflet.draw/
http://cloudmade.com/
http://developers.cloudmade.com/projects

http://switch2osm.org/using-tiles/getting-started-with-leaflet/

Polygon, Rechteck, Polyline, und Kreis

Google spioniert meine Klicks aus!

Ok – Google weiß was ich suche. Aber, dass der Suchgigant auch alle Entscheidungen über interessante links, die ich anklicke, mitprotokolliert gefällt mir nicht. Was passiert hier? Anstatt einen Link auf die Zielseite anzugeben täuscht der Gigant vor, den Link direkt anzugeben, hinterlegt aber noch ein Skript, das nach dem Klicken ausgeführt wird: Es wird die angeklickte Auswahl an Google übertragen, und dann auf die Zielseite weitergeleitet. Konsequenz ist, dass ich dadurch meine Auswahl preisgebe und die ausgewählte Zielseite langsamer geladen wird.

So sieht das Suchergebnis aus, beim Überfahren mit der Maus wird die Ziel-Adresse Angezeigt. Nur Firebug zeigt dann die Wahrheit: OnMouseDown wird erst ausgeführt und Google bekommt meine persönliche Klick-Information.

Abhilfe schafft z.B. das NoScript Plugin für Firefox

Nach dem Neustart ist es so wie es sein sollte. Der Link in den Suchergebnissen zeigt direkt auf die Zielseite – ohne Skript.

 

UPDATE

Eine einfache Variante, dieses Verfahren von Google zu umgehen besteht darin, einen Suchmaschinen-Proxy zu benutzen, der die Anfragen annimmt, zu Google weiterleitet, dabei die persönlichen Informationen vorher herausfiltert und nur die Suchergebnisse von Google anzeigt. Ein Vertreter dieser Möglichkeit ist https://startpage.com/ .

OSM Editor 0.0.0.alpha “iD”

Es gibt einen neuen Web-basierten OSM-Editor. Der erste Eindruck ist sehr gut. eigene Zeichnungen auf Karten sind damit ein Kinderspiel.Gelöst ist die Sache mit D3.js und vielen anderen JavaScript Bibliotheken (s.u.)

Online Demo des iD-Editors: http://geowiki.com/iD/#id=w-1&map=18.21/51.49405/7.40723

Source https://github.com/systemed/iD

Auswahl von verschiedenen Basiskarten:

Einfachen Zeichnen von Kreis-ähnlichen Polygonen und Polygonen:

Benennung durch Name und Darstellung eines kreisähnlichen Polygons:

---

<script src='js/lib/lodash.js'></script>
<script src='js/lib/d3.v3.js'></script>
<script src='js/lib/sha.js'></script>
<script src='js/lib/ohauth.js'></script>
<script src='js/lib/jxon.js'></script>
<script src='js/lib/d3.typeahead.js'></script>
<script src='js/lib/d3.geo.tile.js'></script>
<script src='js/lib/d3.size.js'></script>
<script src='js/lib/d3.trigger.js'></script>
<script src='js/lib/d3.keybinding.js'></script>
<script src='js/lib/d3.tail.js'></script>
<script src='js/lib/d3-compat.js'></script>
<script src='js/lib/queue.js'></script>
<script src='js/lib/bootstrap-tooltip.js'></script>
<script src='js/lib/rtree.js'></script>
<script src='js/id/id.js'></script>
<script src='js/id/util.js'></script>
<script src='js/id/oauth.js'></script>
<script src='js/id/services/taginfo.js'></script>
<script src="js/id/geo.js"></script>
<script src="js/id/geo/extent.js"></script>
<script src='js/id/renderer/background.js'></script>
<script src='js/id/renderer/background_source.js'></script>
<script src='js/id/renderer/map.js'></script>
<script src='js/id/renderer/hash.js'></script>
<script src="js/id/svg.js"></script>
<script src="js/id/svg/areas.js"></script>
<script src="js/id/svg/lines.js"></script>
<script src="js/id/svg/member_classes.js"></script>
<script src="js/id/svg/midpoints.js"></script>
<script src="js/id/svg/multipolygons.js"></script>
<script src="js/id/svg/points.js"></script>
<script src="js/id/svg/surface.js"></script>
<script src="js/id/svg/tag_classes.js"></script>
<script src="js/id/svg/vertices.js"></script>
<script src="js/id/svg/labels.js"></script>
<script src="js/id/ui.js"></script>
<script src='js/id/ui/radial_menu.js'></script>
<script src='js/id/ui/inspector.js'></script>
<script src='js/id/ui/modal.js'></script>
<script src='js/id/ui/confirm.js'></script>
<script src='js/id/ui/commit.js'></script>
<script src='js/id/ui/success.js'></script>
<script src='js/id/ui/loading.js'></script>
<script src='js/id/ui/userpanel.js'></script>
<script src='js/id/ui/layerswitcher.js'></script>
<script src='js/id/ui/contributors.js'></script>
<script src='js/id/ui/geocoder.js'></script>
<script src='js/id/ui/geolocate.js'></script>
<script src='js/id/ui/notice.js'></script>
<script src='js/id/ui/flash.js'></script>
<script src='js/id/ui/save.js'></script>
<script src='js/id/ui/splash.js'></script>
<script src='js/id/ui/tag_reference.js'></script>
<script src='js/id/ui/key_reference.js'></script>
<script src='js/id/actions.js'></script>
<script src='js/id/actions/add_node.js'></script>
<script src='js/id/actions/add_way.js'></script>
<script src='js/id/actions/add_way_node.js'></script>
<script src='js/id/actions/change_entity_tags.js'></script>
<script src='js/id/actions/delete_node.js'></script>
<script src="js/id/actions/delete_way.js"></script>
<script src='js/id/actions/move_node.js'></script>
<script src='js/id/actions/move_way.js'></script>
<script src='js/id/actions/circular.js'></script>
<script src='js/id/actions/noop.js'></script>
<script src='js/id/actions/reverse_way.js'></script>
<script src='js/id/actions/split_way.js'></script>
<script src='js/id/actions/unjoin_node.js'></script>
<script src='js/id/behavior.js'></script>
<script src='js/id/behavior/add_way.js'></script>
<script src='js/id/behavior/drag.js'></script>
<script src='js/id/behavior/drag_midpoint.js'></script>
<script src='js/id/behavior/drag_node.js'></script>
<script src='js/id/behavior/draw.js'></script>
<script src='js/id/behavior/draw_way.js'></script>
<script src='js/id/behavior/hover.js'></script>
<script src='js/id/modes.js'></script>
<script src='js/id/modes/add_area.js'></script>
<script src='js/id/modes/add_point.js'></script>
<script src='js/id/modes/add_line.js'></script>
<script src='js/id/modes/browse.js'></script>
<script src='js/id/modes/draw_area.js'></script>
<script src='js/id/modes/draw_line.js'></script>
<script src='js/id/modes/move_way.js'></script>
<script src='js/id/modes/select.js'></script>
<script src='js/id/operations.js'></script>
<script src='js/id/operations/circular.js'></script>
<script src='js/id/operations/delete.js'></script>
<script src='js/id/operations/move.js'></script>
<script src='js/id/operations/reverse.js'></script>
<script src='js/id/operations/split.js'></script>
<script src='js/id/operations/unjoin.js'></script>
<script src='js/id/controller/controller.js'></script>
<script src='js/id/graph/entity.js'></script>
<script src='js/id/graph/graph.js'></script>
<script src='js/id/graph/history.js'></script>
<script src='js/id/graph/node.js'></script>
<script src='js/id/graph/relation.js'></script>
<script src='js/id/graph/way.js'></script>
<script src='js/id/graph/validate.js'></script>
<script src='js/id/connection.js'></script>

---

Beispiele für OpenLayers

 

http://openlayers.org/dev/examples/

Beispiel KML-Projektion. http://openlayers.org/dev/examples/sundials-spherical-mercator.html

Beispiel KML Layer. http://openlayers.org/dev/examples/sundials.html

Beispiel Vektor-Formate (Box, PolyLine): http://openlayers.org/dev/examples/vector-formats.html

JS - Link Sammlung

http://www.jquery4u.com/plugins/30-amazing-jquery-tables/#.UEX9mqNeds4

HTML5–Amiga Games

 
http://creativejs.com/2012/12/html5-amiga-emulator/

3D mit Javascript X3dom und x3d

http://x3dom.org/x3dom/example/x3dom_htmlIntegration.html
http://www.web3d.org/realtime-3d/x3d/what-x3d/
http://www.x3dom.org/?page_id=5

Daten Visualisieren mit D3.js

http://d3js.org/


https://github.com/mbostock/d3/wiki/Gallery
http://mbostock.github.com/d3/ex/voronoi.html
http://bl.ocks.org/mbostock

 

Übersicht Javascript GUI Bibliotieken

extjs / sencha (Lizenz GPL und proprietär)

http://www.sencha.com/

http://de.wikipedia.org/wiki/Ext_JS

http://dev.sencha.com/deploy/ext-4.0.0/examples/

YUI (All code on this site is licensed under the BSD License unless stated otherwise.)

http://yuilibrary.com/

http://developer.yahoo.com/yui/2/

http://yuilibrary.com/yui/docs/examples/

Google GWT (Lizenz ASL (Freie Software))

http://de.wikipedia.org/wiki/Google_Web_Toolkit

https://developers.google.com/web-toolkit/

https://developers.google.com/web-toolkit/overview

http://www.gwt-buch.de/

jQuery (Lizenz Wahlweise: GPL oder MIT)

http://jquery.com/

http://de.wikipedia.org/wiki/JQuery

http://jqueryui.com/

http://jqueryui.com/demos/

Vaadin

https://vaadin.com/home

http://de.wikipedia.org/wiki/Vaadin

https://vaadin.com/demo

http://demo.vaadin.com/sampler/

JavaScript Datatable

http://datatables.net/usage/
http://datatables.net/index



JQuery Plugin

Viele  Funktionen: suche, sortieren, ...