Java-Scripte und HTML/CSS wiederaufbereiten mit jsbeautifier.org

Oft findet man im Internet diverse Java-Scripte, HTML- und CSS-Dateien, welche aus Speicherplatzgründen (oder als Kopierschutz für Arme) von unnötigem Ballast befreit sind. Sprich, keine Zeilenumbrüche mehr, unnötige Leerzeichen und Tabs entfernt. 

Während diese im Browser und auf der Webseite weiterhin funktionieren, wird es schwierig, falls man doch mal reinschauen muss um einen Fehler zu heben oder etwas zu erweitern. Manuell alles wieder hinzubiegen ist schwierig bis unmöglich. 

Hier hilft der Webdienst “http://jsbeautifier.org/“ weiter. Einfach den Quelltext des Scripts  hinein kopieren und schon bereitet der Dienst den Quelltext in lesbarer Form wieder auf. Das Ganze kann natürlich auch konfiguriert werden, wie man es gerne hätte. Plugins für diverse Browser und Texteditoren sind ebenfalls auf der Seite verlinkt. 

jsbeautifier.org

Linktipp: Alternative zu jQuery

JQuery die Universalwaffe in Sachen Webanwendungsentwicklung. Schnell eingebunden und einfach zu benutzen werden Browser-Inkompatibilitäten ganz gut weg abstrahiert. Dies erkauft man sich mit ein paar Nachteilen,  jQuery muss geladen werden. Für den DSL-Anschluss kein Problem, mobile Anwender sehen das gerne anders.
 
Auch wenn nur wenig Funktionalität von jQuery benötigt wird, kann man sich überlegen, ob man nicht auch ohne auskommt statt mit Kanonen auf Spatzen zu schießen.
 
Daher folgender Linktipp: http://youmightnotneedjquery.com/
 
Der Autor beschreibt (in Englisch)  verschiedene Standard jQuery-Lösungen und dessen Alternative in reinem Java-Script, inklusive der Info ab welchem Browser das Ganze funktioniert.
 
Auf jeden Fall einen Blick wert. 
YouMightNotNeedjQuery

Dropdown Auswahl mittels Link im DA-FormMaker

Vor ein paar Tagen habe ich beschrieben, wie man mittels Java-Script durch Klick auf einen Link in einem Dropdown oder Auswahlliste ein Element automatisch auswählen kann.

Will man das Formular im DA-FormMaker erstellen, ist diese Vorgehensweise etwas umständlich. Man muss das Formular exportieren, den Code anpassen und bei Änderungen am Formular muss man dies immer wieder durchführen.

Die Lösung: Man kann den Java-Script Code auch direkt im DA-FormMaker anlegen. In die meisten Eingabefelder können HTML-Code und Java-Script Code einfügen. Also los gehts.

Hier ist unser Beispielformular:

image

Nun wollen wir das Dropdown “Land” mittels Link vorauswählen. Nun fügen wir in den Einleitungstext den Java-Script Quelltext ein:

image

In diesem Fall wählen wir das zweite Element aus. Eigentlich ist es das dritte, aber die Zählung fängt bei 0 an.

Klick ich nun in der Vorschau auf den Link, wird im Dropdown das Element ausgewählt:

image

Mit JavaScipt Element in Auswahlliste definieren

Die letzten Tage kam eine Anfrage rein, kann mittels Klick auf einen Link ein bestimmtes Element in einer Formularauswahlliste auswählen?

Natürlich geht dies, mit etwas Java-Script.

Nehmen wir an, wir haben die folgende Liste:


Zuerst legen wir den Link an:

Nina Hagen auswählen

Das “#” bewirkt, dass wir die Seite nicht verlassen. Ansonsten wird die Seite neu geladen und die Einstellungen sind gleich wieder weg. Mittels onclick rufen wir die Methode selectSomething auf, 3 ist das auszuwählende Element. Hinweis: Die Zählung fängt bei 0 an. Das erste Element ist also Element 0.

Nun müssen wir noch die Methode selectSomething programmieren. Also zum Beispiel in den Head-Bereich der HTML-Seite den folgenden Code eingefügt:

    

Was machen wir hier? Wir holen uns zuerst die Referenz auf unser Dropdownfeld. DAFORM ist der Name vom Formular, top5 der Name des Auswahlfeldes. Anschließend können wir über “selectedIndex” den gewünschte Auswahl im Auswahlfeld festlegen.

Das wars auch schon.

Hier ist der gesamte Quelltext der Beispieldatei:


  
    Beispiel Formular Link Auswahl
    
    
  
  
  
    Nina Hagen auswählen
Michael Jackson auswählen

Animationen mit animate.css

Mit CSS und Java-Script sind ja mittlerweile coole Sachen möglich, für die man früher Flash brauchte. Wegen mir kann Flash komplett aus dem Internet verschwinden.

Am Besten nutzt man eine fertig programmierte Komponente. Wie zum Beispiel animate.css. Demo und Download unter daneden.me/animate/

Hier eine Demonstration als Video:

Online programmieren lernen mit Codeacademy

Programmieren lernen klingt erst mal langweilig und öde. Meistens ist es das auch, gerade wenn man mit Büchern lernt. Außerdem muss man sich erst mal eine entsprechende Entwicklungsumgebung installieren, was die Einstiegshürde hochsetzt.

Die Webseite http://www.codecademy.com stellt eine interaktive Alternative dar.

Schritt für Schritt wird man in die Programmierung eingeführt. Wesentlicher Bestandteil: man muss selbst alles ausprobieren, Variablen, Abfragen, Funktionen. Weiter kommt man nur, wenn man selbst die einzelnen “Lektionen” umsetzt.

Das Ergebnis seiner Programmierung sieht man sofort. Entweder Erfolg oder Fehlermeldung.

Jeder Kurs ist in verschiedene kleine Lektionen aufgeteilt, man kann jederzeit unterbrechen und später weiter machen. Das Angebot ist kostenlos.

Derzeit gibt es einen Java-Script Kurs. Mal schauen, was in Zukunft noch dazu kommt.

image

Fotos und Bilder als Polaroid darstellen

Mit Hilfe von CSS3 und jQuery können Sie Ihre Fotosammlung in effektvoller Weise als Polaroid darstellen lassen. Das hier vorgestellte Beispiel mischt die einzelnen Polaroids beim Start der Seite nach einem Zufallsprinzip und stellt diese ungeordnet auf dem Bildschirm dar. Zum Anschauen der Bilder holt man sich diese durch Anklicken in den Vordergrund. Außerdem lassen sich alle Bilder zu einer anderen Position verschieben. Einfach das nachfolgende Video anschauen, um die beschrieben Funktionen zu sehen.

Video zur Polaroid-Darstellung

Nutzen Sie die folgenden Buttons um das Beispiel genauer anzusehen und zu testen oder um das Beispiel herunterzuladen. Mit dem in Download enthalten Dateien können Sie Ihre eigene Polaroid-Seite erstellen.

btnBsp btnDownload

Nun noch ein paar Innereien zu diesem Script zum besseren Verständnis und zur Variation bestimmter Parameter:

HTML-Datei (index.html)

Innerhalb des body-Tags werden die einzelnen Bilder über das <img>-Tag eingefügt, wobei src den Pfad zum Bild enthält. Innerhalb von <p> schreiben wir den Text, der auf dem Polaroid stehen soll. Das Ganze wird dann von einem <div>-Container eingeschlossen, welcher der Klasse polaroid zugeordnet wird. Es können beliebig viele Bilder in dieser Form hinzugefügt werden.

<body>
<div class="polaroid">
  <img src="pics/Schwan_Wald_See.png" alt="Schwan im Waldsee" />
  <p>Schwan im Waldsee</p>
</div>
<!-- Mehr Bilder hier -->
</body>

CSS-Datei (style.css)

Unserem <div>-Container hatten wir oben die Klasse polaroid zugeordnet. Hier werden nun die einzelnen Attribute festgelegt, die das Erscheinungsbild bestimmen.

In der ersten Zeile legen Sie Höhe und Breite des Container als absolute Werte fest sowie den Pfad zu dem Hintergrundbild. Das Hintergrundbild ist in diesem Fall die “Polaroid-Maske”.  Deshalb müssen Höhe und Breite der Größe der Polaroid-Maske entsprechen. Sie können das Polaroid-Bild auch beliebig austauschen gegen z.B. ein andersfarbiges Polaroid oder wenn eine andere Größe benötigt wird.  Erstellen lässt sich eine neue Polaroid-Maske unter anderem mit DA-WebImage.

.polaroid { width:368px; height:376px; background-image:url(../pics/polaroid-bg.png); 
position:absolute; }

In der zweiten Zeile ist die Größe der einzelnen Fotos definiert. Es ist zu beachten, dass alle Fotos dieselbe Größe habe. Weiterhin wird mit margin der Abstand von den Rändern so festgelegt, dass das Bild genau in die Polaroid-Maske passt.

.polaroid img { width:335px; height:275px; margin:25px 0 0 15px; }

In der dritten Zeile legen wir die Eigenschaften, wie Ausrichtung, Schriftfarbe, Schriftart, etc. zum Schriftzug unterhalb des Polaroids fest.

.polaroid p { text-align:center; font-family:Georgia,serif; font-size:20px; color:#2E2E2E;

margin-top:15px; }

jQuery (script.js)

Die Script-Datei stammt von Marco Kuiper und kann dem Download entnommen werden. Hier sind die einzelnen Funktionen enthalten, welche die Animationen, wie das Rotieren und Verschieben der Polaroids bewerkstelligen. Auf eine ausführliche Beschreibung der einzelnen Funktionen verzichte ich an dieser Stelle. Der interessierte  Programmierer kann sich die Funktionen in einem entsprechenden Editor; Texteditor ist ausreichend; anschauen.

Zusammenfassung

Es sei noch gesagt, dass CSS3 und HTML5 derzeit noch nicht in allen Browsern vollständig implementiert sind. So kann es beim Beispiel zu unterschiedlichen Darstellungen bei unterschiedlichen Browsern kommen. Das aufgenommene Video zeigt die Anwendung in Chrome. Dort funktioniert alles super. Aber im Mozilla Firefox funktionierte zum Beispiel die Rotation der Bilder nicht.

btnBsp btnDownload

Bild- und HTML-Popup erstellen

Man sieht sie immer mehr, die Bild- und HTML-Popups, welche den Hintergrund der Seite abdunkeln und das eigentliche Bild im Vordergrund vergrößert darstellen:

image 

Statt einen Link in einem neuen Fenster darzustellen, wird der Inhalt einfach direkt in der Seite angezeigt. Das ganze ist zudem sehr leicht zu realisieren:

weiterlesen