Doku - Major-Online - JavaScript

Fernsehzeit

Drucken

: Kategorie: JavaScript; Erstellt: Dienstag, 11. Dezember 2012 16:23; Zuletzt aktualisiert: Donnerstag, 17. März 2016 18:24; Geschrieben von Martina Major

Ziel eine Script, welches in Abhängigkeit des Alters und der täglichen Fernsehzeit prüft, ob die Fernsehzeit im "gesunden" Bereich liegt.

Die Idee basiert auf einer Anfrage bei gutefrage.net

Recherche

Wieviele Stunden fernsehen sind noch "gesund" und ist dies vom Alter abhängig?

Ergebnis

Unter 3 Jahren wird kein täglicher Fernsehkonsum empfohlen.
Für 4 - 5-Jährige reichen maximal 30 min. täglich völlig aus.
Für 6 - 9-Jährige werden bis 90 min täglich / aber max fünf Stunden pro Woche als ausreichend veranschlagt.
Zwischen 10 bis 13 Jahren übernehmen Kinder immer mehr Verantwortung, auch in der Nutzung von Medien. Bis zu max. 2 Stunden am Tag sind OK, wobei die Gesamtzeit pro Woche in Abhängigkeit der Interessen und anderer Freizeitaktivitäten begrenzt sein sollte. Max. 10 Stunden pro Woche.
Erwachsene haben, wenn man mal Arbeit, Essen, Weiterbildung, Hausarbeit, Schlafen usw. abzieht durchschnittlich 4-6 Stunden Freizeit pro Tag zur Verfügung. Wenn wir mal davon ausgehen, dass auch noch Zeit für Sport und andere aktive Freizeitgestaltung übrigbleiben soll, so macht auch hier ein Begrenzung auf durchschnittlich 2 Stunden pro Tag Sinn.

Quellen

www.bundespruefstelle.de - Jugendmedienschutz

Umsetzung

Eingaben:

Alter
Fernsehzeit pro Tag

Ausgabe:

Wenn Alter > 10 und Fernsehzeit pro Tag < 2 , "gesund", sonst "zuviel"
Oder wenn Alter > 6, und Fernsehzeit pro Tag < 1.5 , "gesund", sonst "zuviel"
Oder wenn Alter > 4, und Fernsehzeit pro Tag < 0.5 , "gesund", sonst "zuviel"
oder (also jünger als 4), "Für Kinder unter 3 Jahren sollte das Fernsehen eine Ausnahme sein, ein täglicher Fernsehkonsum wird nicht empfohlen."

Variante 1 - JavaScript ohne Neuladen der html-Seite

Alle Daten befinden sich im Formular und werden mit onChange ausgewertet.

http://doku.major-online.de/demo/fernsehen.htm

Variante 2 - Formular + Auswertung mit JS Stunden

Die Daten werden vom Formular übergeben und mit JavaScript aus der URL gelesen und ausgewertet.

http://doku.major-online.de/demo/fernsehen_2.htm

Variante 3 - Formular + Auswertung in PHP

ToDo: Die Daten werden vom Formular übergeben und mit PHP übergeben.

Anmerkung

Die JavaScripte dienen nur als Beispiele, wie man eine solche Aufgabe in JS lösen könnte. Meine bevorzugte Variante wäre PHP.

Alles dreht sich um mich

Drucken

: Kategorie: JavaScript; Erstellt: Montag, 16. April 2012 18:09; Zuletzt aktualisiert: Montag, 16. April 2012 18:09; Geschrieben von Martina Major

Beispiel für animierte DIVs

fallende Blätter oder Pfoten auf der Homepage

Drucken

: Kategorie: JavaScript; Erstellt: Mittwoch, 25. Januar 2012 16:35; Zuletzt aktualisiert: Donnerstag, 17. März 2016 18:29; Geschrieben von Martina Major

Schnee, Blätter und sonstige Objekte auf der Homepage - runterfallen, schneien oder regnen zu lassen funktioniert relativ einfach mit JavaScript.

Auf persönlichen Wunsch eines Freundes - von Gutefrage.net - hier ein paar Tipps wie man ein fertiges Schnee-Script - in ein Pfoten-Script umwandeln und in die eigene Seite einbauen kann.

Download des Scriptes

http://www.peters1.dk/webtools/javascript/sne.php?sprog=en

Einbindung in die Homepage

Die Heruntergeladene Datei in das Verzeichnis scripts kopieren, wenn nicht vorhanden, das Verzeichnis anlegen. Wer möchte kann natürlich jeden beliebigen anderen Namen für sein JavaScript-Verzeichnis verwenden, in diesem Fall muss bei dem einzubindenden Code, das Verzeichnis entsprechend angepasst werden.

Den unten stehenden Code, im Body einbinden (nach <body>):

<script type="text/javascript" src="http://www.deine-domain.de/scripts/snow.js"></script>

Verwendung in CMS' (Content Management System)

Wird ein Contentmanagement verwendet, dann muss die Einbindung so erfolgen, wie das für ausführbaren Code vorgesehen ist.

D.h. wenn im Editor kein JavaScript erlaubt ist, dann muss der Code als Modul eingebunden werden. Ein Beispiel für Joomla und WordPress folgt.

Soll es auf allen Seiten Pfoten regnen, dann kann der Code direkt im Template eingebunden werden.

////////////////////////////////////////////////////////////////
// Javascript made by Rasmus - http://www.peters1.dk //
////////////////////////////////////////////////////////////////

var SNOW_Picture = "http://doku.major-online.de/images/stories/katzenpfote.png"
var SNOW_no = 15;

var SNOW_browser_IE_NS = (document.body.clientHeight) ? 1 : 0;
var SNOW_browser_MOZ = (self.innerWidth) ? 1 : 0;
var SNOW_browser_IE7 = (document.documentElement.clientHeight) ? 1 : 0;

var SNOW_Time;
var SNOW_dx, SNOW_xp, SNOW_yp;
var SNOW_am, SNOW_stx, SNOW_sty; 
var i, SNOW_Browser_Width, SNOW_Browser_Height;

if (SNOW_browser_IE_NS)
{
	SNOW_Browser_Width = document.body.clientWidth;
	SNOW_Browser_Height = document.body.clientHeight;
}
else if (SNOW_browser_MOZ)
{
	SNOW_Browser_Width = self.innerWidth - 20;
	SNOW_Browser_Height = self.innerHeight;
}
else if (SNOW_browser_IE7)
{
	SNOW_Browser_Width = document.documentElement.clientWidth;
	SNOW_Browser_Height = document.documentElement.clientHeight;
}

SNOW_dx = new Array();
SNOW_xp = new Array();
SNOW_yp = new Array();
SNOW_am = new Array();
SNOW_stx = new Array();
SNOW_sty = new Array();

for (i = 0; i < SNOW_no; ++ i) 
{ 
	SNOW_dx[i] = 0; 
	SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-50);
	SNOW_yp[i] = Math.random()*SNOW_Browser_Height;
	SNOW_am[i] = Math.random()*20; 
	SNOW_stx[i] = 0.02 + Math.random()/10;
	SNOW_sty[i] = 0.7 + Math.random();
	if (i == 0) document.write("<\div id=\"SNOW_flake"+ i 
           +"\" style=\"position: absolute; z-index: "+ i 
           +"; visibility: visible; top: 15px; left: 15px;\">
           <a href=\"http://www.peters1.dk\" target=\"_blank\">
           <\img src=\""
           +SNOW_Picture+"\" border=\"0\"></a><\/div>");
	else document.write("<\div id=\"SNOW_flake"+ i 
           +"\" style=\"position: absolute; z-index: "+ i 
           +"; visibility: visible; top: 15px; left: 15px;\">
           <\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");
}

function SNOW_Weather() 
{ 

for (i = 0; i < SNOW_no; ++ i) 
{ 
	SNOW_yp[i] += SNOW_sty[i];

	if (SNOW_yp[i] > SNOW_Browser_Height-50) 
	{
		SNOW_xp[i] = Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);
		SNOW_yp[i] = 0;
		SNOW_stx[i] = 0.02 + Math.random()/10;
		SNOW_sty[i] = 0.7 + Math.random();
	}

	SNOW_dx[i] += SNOW_stx[i];

	document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";
	document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i] + SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";
}

SNOW_Time = setTimeout("SNOW_Weather()", 10);

}

SNOW_Weather();

Je nachdem, was auf der Homepage runterfallen soll, benötigt man dafür eine passende Grafik. Bilder von anderen Homepages zu "mopsen" und auf der eigenen Homepage zu verwenden, ist nicht nur unfair, sondern verstößt u.U. auch gegen das Urheberrecht.

D.h. entweder erstellt man seine Grafiken mit einem Grafikprogramm (Gimp, paint.net usw.) selbst oder man sucht sich passende Grafiken auf Seiten, die diese ausdrücklich zur Verwendung auf der eigenen Homepage erlauben.

Katzenpfote malen

Katzenpfote gezeichnet mit Stift am Touchscreen in Gimp

Zuerst "überredet" man eine Katze mal das Pfötchen von unten zu zeigen. Dies kann unter Umständen ca. 3-4 Tage dauern und auch ein paar zerkratzte Hände zur Folge haben.

Wenn man dann weiss, wie das Teil aussieht, macht man sich eine Skizze. Diese Skizze kann man dann in den Rechner übertragen (einscannen bzw. abmalen).

Wer ein Grafiktablett oder Touchscreen besitzt, sollte sich für die Variante abmalen entscheiden, weil so direkt ohne Hintergrund (transparenter Hintergrund ) gearbeitet werden kann und die Pfote nicht nachträglich freigestellt werden muss.

Katzenpfote 40x40

Wenn man die Grafik relativ gross - hier 400 x 400 Pixel erstellt, macht es gar nichts, wenn die Kanten nicht 100% rund sind, bei der anschließenden Verkleinerung verschwinden kleinere Zacken sozusagen von alleine.

Danach wird die Pfote auf die gewünschte Größe verkleinert, z.B. 40 x 40 Pixel.

Demo: Pfoten regnen

Herbstlaub - fallende Blätter

Blätter fallen nicht unbedingt regelmäßig ausgerichtet nach unten, d.h. hier sollte mehr als eine Grafik verwendet werden. Im Beispiel habe ich 4 verschiedene Blätter - mit ArtRage erstellt. Diese werden den "Schneeflockendiv" entsprechend zugeordnet.

Auszug aus snow.js bzw. blaetter.js

// [2012-01-25] Martina Major: z-Index + 10.000, wegen in der Homepage bereits verwendeten Ebenen    
    zi = i+10000;
    
// [2012-01-25] Martina Major: verschiedene Bilder - 4 - unterschiedliche Blaetter
    var SNOW_Picture_s = "/demo/images/blatt_40x40";
    var Image_Nr = i % 4;
    var SNOW_Picture = SNOW_Picture_s+"_"+Image_Nr+".png";
    
    if (i == 0) document.write("<\div id=\"SNOW_flake"+ i 
        +"\" style=\"position: absolute; z-index: "+ zi 
        +"; visibility: visible; top: 15px; left: 15px;\">
       <a href=\"http://www.peters1.dk\" target=\"_blank\">
       <\img src=\""
       +SNOW_Picture
       +"\" border=\"0\"></a><\/div>");
    else document.write("<\div id=\"SNOW_flake"+ i 
       +"\" style=\"position: absolute; z-index: "+ zi  
       +"; visibility: visible; top: 15px; left: 15px;\">
       <\img src=\""+SNOW_Picture+"\" border=\"0\"><\/div>");