ToDo-List-Verwaltung in der Cloud

Hier einige Cloud Services für ToDo-Listen-Verwaltung:

Einen Vergleich verschiedener Tools findet man unter

Einen solchen Cloud Service selber zu programmieren, ist gar nicht so schwer. Es gibt sogar eine Webseite, in der viele JavaScript-Implementierungen mit vielen MV*-Frameworks alle der gleichen Aufgabe gewidmet sind, nämlich der Aufgabenplanung mit ToDo-Listen:

todomvc.com

wpid-PastedGraphic-2014-11-28-13-17.png

Gantt-Diagramme in Excel

„Gantt-Diagramme sind perfekt, wenn es darum geht, auf einen Blick die zeitliche Abfolge von Aufgaben in einem Projekt zu sehen. Excel bietet zwar den Diagrammtyp nicht, aber dieser Mangel lässt sich beheben. Hier die Anleitung wie aus den Daten für Start und Dauer ein Gantt-Diagramm wird.“ Zitat Axel Becker, siehe Video-Tutorial:

CS256 Fluid Layout

Hier meine Notizen des Udacity-MOOCs CS256 „Mobile Web Development“, Lesson 4 „Fluid Layout“:

Fließende Darstellung („Fluid Layout„) hat viele Vorteile gegenüber fester Darstellung (fixed layout):

  • Geräteunabhängigkeit
  • Mobile Endgeräte werden unterstützt
  • Verschiedene Bildschirmtypen bis hin zu Retina Display werden unterstützt
  • Platz wird besser genutzt
  • Lesbarkeit erhöht sich
  • Bedienfreundlichkeit (Usability) erhöht sich
  • Beitrag zur Accessability

Bei einer fließenden Darstellung („Fluid Layout„) sollte man darauf achten:

  • alle Flächen auf dem Bildschirm sinnvoll zu nutzen
  • sich an unterschiedliche Bildschirm-Größen und -Typen automatisch anzupassen
  • FlexBox zu nutzen

Fließende Darstellung („Fluid Layout„) arbeitet nicht mit einer festen Pixel-Anzahl, sondern:

  • prozentuale statt absolute Angaben:
    • relativ zur Bildschirm-Größe: „width:20%“
    • relativ zur Viewport-Größe:
      • style=“width:20vw; margin-top: -85vh;“
      • 1vw = 1% of the viewport width
      • 1vh = 1% of the viewport height
      • 1vmin = Minimum
      • 1vmax = Maximum
  • em„-Einheiten aus CSS: 1 em = Font-Größe (font-size) = Wie breit ist ein Schriftzeichen? default=16px (Wikipedia: „An em is a unit of measurement in the field of typography, equal to the currently specified point size. The name of em is related to M. Originally the unit was derived from the width of the capital “M” in the given typeface.“)
  • rem„-Einheiten aus CSS3: „The rem unit (or “root em” unit) has pretty good browser support: IE9+, FF3.6+, Chrome, Safari 5+, and Opera 11.6+.“ default=16px

Fluid Layout erreicht man mit

  1. FlexBox
  2. em– und rem-Einheiten für Text
  3. prozentuale Angaben für den Rest
  4. Pixel-Angaben im Notfall mit entsprechenden Browser- und Geräte-(Device)-Weichen (Fallunterscheidungen, die man in JavaScript programmieren muss)

CSS3-Mittel für Fluid Layout sind:

  • FlexBox: { display: flex; }

Unter http://html5please.com/#flexbox liest man, dass die FlexBox-Spec drei große Revisionen durchlaufen hat und man in vielen Browsern daher unterschiedliche vorliegen hat. Hier zeigt sich In Lesson 4 sollte man nun im „FlexBox-Tutorial“ interaktiv Fluid Layout ausprobieren. FlexBox ist erst ab iOS 7 so richtig implementiert. Effekt: Mein Browser (Safari Version 7.0.1 (9537.73.11)) friert ein. Scheint doch zuuuu neu zu sein!?
wpid-PastedGraphic3-2014-01-19-10-05.png

wpid-PastedGraphic4-2014-01-19-10-05.png
Anders Chrome: keine Probleme.

Also muss man wieder nachschauen, welcher Browser schon „FlexBox-ready“ ist: http://caniuse.com/flexbox

Die offizielle Spezifikation findet man unter „W3C Candidate Recommendation, 18 September 2012„. Danach ist „flex layout“ { display: flex; } ein neuer layout mode nach

  • block { display: block; } ,
  • inline { display: inline; } ,
  • table { display: table; } und
  • positioned layout.

display kann noch weitere Werte annehmen, siehe http://www.mediaevent.de/css/position-display.html.Beispiel von W3C:

<style>
#deals {
display: flex; /* Flex layout so items
have equal height */
flex-flow: row wrap; /*
Allow items to wrap into multiple lines */
}
.sale-item {
display: flex; /* Lay out each item using flex layout */
flex-flow: column; /*
Lay out item’s contents vertically */
}
.sale-item > img {
order: -1; /*
Shift image before other content (in visual order) */
align-self: center; /*
Center the image cross-wise (horizontally) */
}
.sale-item > button {
margin-top: auto; /*
Auto top margin pushes button to bottom */
}
</style>
<section id=’deals‘>
<section class=’sale-item‘>
<h1>Computer Starter Kit</h1>
<p>This is the best computer money can buy, if you don’t have much money.
<ul>
<li>Computer
<li>Monitor
<li>Keyboard
<li>Mouse
</ul>
<img src=’images/computer.jpg‘
alt=’You get: a white computer with matching peripherals.‘>
<button>BUY NOW</button>
</section>
<section class=’sale-item‘>

</section>

</section>

FlexBox-Tutorials findet man unter:

Wilson: „FlexBox is super powerful and super easy to use!!!„, leider aber nur in 47,33% der Browser: http://caniuse.com/flexboxwpid-PastedGraphic-2014-01-19-10-05.png
wpid-PastedGraphic1-2014-01-19-10-05.png

Zum Glück gibt es aber Flexie und HTML5please:

Hier sieht man schon die Schwierigkeiten einer Classroom-Aufbereitung aktueller Themen, die sich in einer sehr dynamischen Entwicklung befinden: Ein Lehrbuch, auf das man sich verlassen kann, in dem alles stimmt und funktioniert, was drin steht, kann man für aktuelle, halbfertige Themen nicht erstellen. Die xMOOC-Produktion muss daher den Mittelweg zwischen Aktualität und Klassenraum-Tauglichkeit finden, was nicht leicht sein dürfte: Ist das Thema zu alt, interessiert sich keiner dafür. Ist es zu neu, so ist die Software noch im Beta-Stadium, noch nicht auf allen Geräten implementiert und sehr wackelig.

Classroom ist wie Cleanroom künstlich, soll vor der wilden, bunten, realen Welt schützen, gaukelt den Studierenden aber auch eine heile Welt vor, wie sie nicht existiert. Daher gibt es überzeugende Stimmen, die die schützende Hülle des Klassenzimmers ganz aufheben wollen: Sollen doch die Studierenden gleich am wirklichen, echten Leben teilhaben und dort mitentwickeln, wo gerade aktuell entwickelt wird. Schließlich tun das auch viele Hobbyisten, Schüler, Hausfrauen und -männer aus purem Interesse und Leidenschaft für die Sache. Warum also nicht auch Studierende? Studierende sollen im echten Wikipedia mitschreiben, -diskutieren und -korrigieren, nicht in einem geschützten eLearning-Wiki. Studierende sollen in echten Open Source-Projekten mitentwickeln, nicht in didaktischen Spielprojekten. Didaktik war gestern, das echte Leben ist heute reichhaltig und vernetzt genug, dass man darin lernen kann. Die ganze Welt ist das Klassenzimmer!

CS256 Mobile Web Development Lesson 1 bis 3

Hier meine Notizen des Udacity-MOOCs CS256 „Mobile Web Development“, Lesson 1 bis 3:

Vorab: Der Autor Chris Wilson hat Materialien und Tests unter
http://cwilsotest.appspot.com abgelegt.

In meinem .bash_profile habe ich mir ein Kommando für den iPhone-Simulator wie folgt definiert:

.bash_profile
# iPhone Simulator
function iPhone { export SIM_DIR=/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer;
„$SIM_DIR/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator“
-SimulateApplication
$SIM_DIR/SDKs/iPhoneSimulator6.1.sdk/Applications/MobileSafari.app/MobileSafari;}

wpid-PastedGraphic2-2014-01-19-07-501.png
Unter Mac OS X kann man den Simulator auch drehen und schütteln:
wpid-PastedGraphic1-2014-01-19-07-501.png

Zuerst kommt Chris Wilson auf den HTML-Meta-Tag „viewport“ zu sprechen, mit dem man die Darstellung von HTML-Seiten in Browsern auf mobilen Endgeräten spezifizieren kann:

Browser gehen von einer Standard-Breite (default width) von 980 px aus, wenn man nichts anderes angibt, z.B.

<meta name=“viewport“ content=“width=640„>

Stattdessen kann man die Breite aber auch abhängig vom Gerät machen:

<meta name=“viewport“ content=“width=device-width„>

Ebenso kann man den Skalierungsfaktor verändern:

<meta name=“viewport“ content=“width=device-width,initial-scale=2„>

Dieser Skalierungsfaktor ist wichtig für die Adaptierung von Hoch- zu Querformat (Portrait- zu Landscape-Mode) auf iOS-Geräten. Beim Skalierungsfaktor 2 wird nur die Hälfte des Textes angezeigt. Daher wird auf auf iOS-Geräten empfohlen, den Skalierungsfaktor bei 1 zu belassen. Er sollte aber angegeben werden, damit der ganze Text in seiner ganzen Breite angezeigt wird. Also besser:

<meta name=“viewport“ content=“width=device-width,initial-scale=1„>

Browser gehen von einer Standard-Breite (default width) von 980 px aus und skalieren dann mit dem Skalierungsfaktor = Zoomingfaktor, um die Seite an die Bildschirmgröße anzupassen.

In den CSS-Styles kann man auch prozentuale Angaben machen, die die Größe relativ zum Viewport beschreiben:

  • style=“width:20vw; margin-top: -85vh;“
  • 1vw = 1% of the viewport width
  • 1vh = 1% of the viewport height
  • 1vmin = Minimum
  • 1vmax = Maximum

In welchen Browsern man diese neuen Maße verwenden darf, liest man auf http://caniuse.com/#search=vw

Beispiel, wie man einen Knopf erzeugt, der min. ein Drittel der Bildschirm-Größe ausmacht:
<style>
button { width: 33vmin; height: 33vmin; }
</style>
<button>Push me!</button>

3 einfache Regeln für „mobile-only“ Webseiten:

  1. Darstellung im Desktop-Browser sollte auch immer möglich sein.
  2. Wenn man mehrere URLs für den gleichen Inhalt hat, sollte man im Kopf der HTML-Seite mit <link rel=“canonical“ href=“http://my_domain.de/my_canonical_url.html“ /> die kanonische URL angeben.
  3. Wenn man in seiner Web App von Umleitungen (redirect) Gebrauch macht, sollte man immer auf äquivalente (mobile oder Desktop-) Webseiten umleiten, nicht auf die Top-Seite.

Was sind kanonische URLs?
http://googlewebmastercentral.blogspot.de/2009/02/specify-your-canonical.html
z.B.: <link rel=“canonical“ href=“http://www.h-brs.de“ />

Keine aufdringlichen Zwangsinteraktionen („doorslam offender“): Lass den Nutzer einer Webseite genau das so schnell und einfach wie möglich erledigen, wozu er auf diese Webseite gekommen ist. Vergraule ihn nicht mit aufdringlichen Angeboten, Werbungen, Formularen und sonstigen Zwangsinteraktionen, die ihn von seiner eigentlichen Tätigkeit ablenken oder gar ganz abhalten, so dass er genervt die Seite verlässt, ohne sein Ziel erreicht zu haben. Solche aufdringlichen Zwangsinteraktionen nennt Wilson „doorslam offender“: Sie schlagen vor dem Nutzer die Türe zu. Der Nutzer kann nicht sofort und direkt genau den Raum betreten, in den er gelangen will, sondern muss sich mit Dingen beschäftigen, die ihn nicht interessieren und deretwegen er nicht auf die Webseite gegangen ist.

Ziel ist die adaptive Erfahrung (adaptive experience) mit unterschiedlichsten Geräten, aber dem gleichen Sinn und Zweck.

Die Qual der Wahl: Welches Framework?

Das Twitter Flight-Projekt enthält in dem ToDoMVC-Subprojekt einen interessanten Technologie-Vergleich: Die Twitter-Entwickler haben sich die Arbeit gemacht, die gleiche ToDo-WebApp in allen populären und stabilen MVC-Frameworks zu implementieren. Und das sind mittlerweile eine Menge:

Todo apps are included for:

Non-framework Implementations

RequireJS

Labs
We also have a number of in-progress applications in Labs:

Live demos
Live demos are available on our website

View & Run in Web IDE
Click on the button below to view the code in a Web IDE. Feel free to edit the code and then run it all from your browser.
wpid-editcloud9-2014-01-2-08-34.png wpid-demo-in-ide-2014-01-2-08-34.png

Screenshot
wpid-screenshot-2014-01-2-08-34.png

Ruby 1.9 Syntax Änderungen

Der Versionswechsel zu Ruby 1.9 hat auch einige Änderungen in der Syntax mit sich gebracht, siehe CHANGELOG und Wikipedia:

http://en.wikipedia.org/wiki/Ruby_(programming_language)#Ruby_1.9

Zitat: „Ruby 1.9
Ruby 1.9 was released in December 2007. The latest stable version of the reference implementation is 1.9.3 and is dual-licensed under the Ruby License and a BSD License. Adoption of 1.9 was slowed by changes from 1.8 which required many popular third party gems to be rewritten.
Ruby 1.9 introduces many significant changes over the 1.8 series.[21] Examples:

  • Block local variables (variables that are local to the block in which they are declared)
  • An additional lambda syntax (fun = ->(a,b) { puts a + b })
  • Per-string character encodings are supported
  • New socket API (IPv6 support)
  • require_relative import security“.

Einen kurzen Vortrag darüber findet man unter http://slideshow.rubyforge.org/ruby19.html.

In einer irb session sieht das so aus:

[prettify class="ruby"]
> irb
1.9.3-p194 :001 > ?c # single character strings
 => "c"
1.9.3-p194 :002 > "c"
 => "c"
1.9.3-p194 :003 > 'c'
 => "c"
1.9.3-p194 :004 > '''c'''
 => "c"
1.9.3-p194 :005 > 'cat'[1]
 => "a"
1.9.3-p194 :006 > {'key' => 'value'}
 => {"key"=>"value"}
1.9.3-p194 :007 > {'key' => 'value'}['key']
 => "value"
1.9.3-p194 :008 > [1,2,3].to_s
 => "[1, 2, 3]"
1.9.3-p194 :009 > [1,2,3].join
 => "123"
1.9.3-p194 :010 > "abc".to_sym
 => :abc
1.9.3-p194 :011 > :abc == 'abc'
 => false
1.9.3-p194 :012 > {:a=>"a", :c=>"c", :b=>"b"} # order?
 => {:a=>"a", :c=>"c", :b=>"b"}
1.9.3-p194 :017 > a = 1
 => 1
1.9.3-p194 :018 > b = 2
 => 2
1.9.3-p194 :019 > {a: b}
 => {:a=>2}
1.9.3-p194 :020 > {:a => b }
 => {:a=>2}
1.9.3-p194 :021 > t = 1
 => 1
1.9.3-p194 :022 > [1,2].each {|value; t| t=value*value}
 => [1, 2]
1.9.3-p194 :023 >
[/prettify]

Die neue Hash-Syntax in 1.9 erlaubt eine kompaktere Schreibweise:

[sourcecode language=“ruby“]
def help(hash_args)
hash_args.each do |key, value|
puts "Help for #{key} is #{value}. "
end
end

help(:mom => ‚garden‘, :dad => :car) #
help :mom => ‚garden‘, :dad => :car #
help mom: ‚garden‘, dad: :car # Ruby 1.9 additional syntax
[/sourcecode]

liefert in allen Fällen als Ausgabe:

Help for mom is garden.
Help for dad is car.

Ruby on Rails in OOSE-II im WiSe 2012

In der Lehrveranstaltung OOSE-II im WiSe 2012 verwenden wir Ruby on Rails (RoR) und die IDE RubyMine auf der Basis von

Nach der ersten Woche sollte jede/r Teilnehmer/in auf ihrem/seinem Arbeitsgerät eine voll funktionstüchtige Entwicklungsumgebung installiert haben. Anleitungen dazu findet man auch unter Korem.

Wie leicht sich ein Blog unter RoR entwickeln lässt, zeigen die Rails Guides.
wpid-PastedGraphic1-2012-09-29-14-56.tiff
und los geht´s:
wpid-PastedGraphic2-2012-09-29-14-56.tiff

Dann sollte die richtige Rails-Platform gewählt werden:

wpid-PastedGraphic3-2012-09-29-14-56.tiff

Das Grundgerüst der Blog-App wird generiert:

wpid-PastedGraphic4-2012-09-29-14-56.tiff

Und schon kann der rails server gestartet werden:
wpid-PastedGraphic5-2012-09-29-14-561.tiff

wpid-PastedGraphic6-2012-09-29-14-561.tiff

Das Ergebnis lässt sich im Browser unter http://localhost:3000 bewundern:

wpid-PastedGraphic7-2012-09-29-14-561.tiff
Mit rails g scaffold post title:string text:text kann man auf der Kommandozeile Model, View und Controller für Blogposts (kurz „post“) erzeugen. Das geht aber auch innerhalb von RubyMine:

wpid-PastedGraphic11-2012-09-29-14-561.tiff

wpid-PastedGraphic8-2012-09-29-14-561.tiff

wpid-PastedGraphic9-2012-09-29-14-561.tiff

Damit wurde folgendes Skelett generiert:

wpid-PastedGraphic10-2012-09-29-14-561.tiff

Jetzt muss noch die Datenbank erzeugt werden. Das geht über „rake task“ „db:migrate„.

wpid-PastedGraphic12-2012-09-29-14-561.tiff

wpid-PastedGraphic13-2012-09-29-14-561.tiff

wpid-PastedGraphic14-2012-09-29-14-561.tiff
wpid-PastedGraphic15-2012-09-29-14-561.tiff

Unter http://localhost:3000/posts haben wir damit bereits eine Datenbank-gestützte Webanwendung:

wpid-PastedGraphic16-2012-09-29-14-561.tiff
die auch schon funktioniert:
wpid-PastedGraphic17-2012-09-29-14-561.tiff
und folgendes Ergebnis liefert:
wpid-PastedGraphic18-2012-09-29-14-561.tiff
In RubyMine gibt es eine Datenbank-Konsole, in der man die Einträge verfolgen kann:

wpid-PastedGraphic19-2012-09-29-14-561.tiff
Weiterhin ist die rails console ein unverzichtbares Entwicklungswerkzeug:

wpid-PastedGraphic20-2012-09-29-14-561.tiff

Die „rails console“ stellt einem die gesamte Laufzeit-Umgebung des laufenden Rails-Servers zur Verfügung:

wpid-PastedGraphic21-2012-09-29-14-561.tiff
was dem Entwickler in der Laufzeit-Umgebung von Rails allerlei Experimente erlaubt:

wpid-PastedGraphic22-2012-09-29-14-561.tiff
Jedes Objekt in Ruby versteht aber auch die Methode „methods„, falls man nicht weiß, welche Sprache das gewählte Objekt spricht:

wpid-PastedGraphic27-2012-09-29-14-561.tiff

In der Datenbank wurde also nicht nur eine Tabelle „posts“ mit dem Feld „title“ angelegt, in Rails gibt es auch ein Modell „Post“:

wpid-PastedGraphic26-2012-09-29-14-561.tiff

Das Model „Post“ versteht eine ganze Reihe von Methoden betreffend das Feld „title“:

wpid-PastedGraphic25-2012-09-29-14-561.tiff
Die „rails console“ ist voll ausgestattet mit allen Möglichkeiten des Interaktiven Ruby Debuggers (irb), siehe

http://www.rubyinside.com/irb-lets-bone-up-on-the-interactive-ruby-shell-1771.html

Das hilft bei der Demystifizierung von rails ungemein. Statt zu raten, welche Magie am Werk ist, kann man selber prüfen, alle Objekte in die Hand nehmen, deren Inhalte anschauen und verändern. Und das alles in einem laufenden Server!

Ruby ist eine interpretierte Sprache, die nicht kompiliert werden muss wie Java. Daher entfällt ein Zwischenschritt. Man ändert den Quellcode und sofort sieht man die Änderung im Browser.

In der „rails console“ werden die geänderten Modelle jedoch nicht automatisch neu geladen. Hier ist ein Kommando „reload!“ erforderlich.