Angepinnt TuT´s by Master Oldster

  • Oh Mann, wie fange ich an, ohne das es zu langweilig wird....... :huh:

    Auch wenn ich hier im Forum schon einigen mit meinen html Kenntnissen weiterhelfen konnte, so bin ich doch kein Profi auf diesem Gebiet. Ich würde mich als Anfänger mit ausdauer beschreiben. :wink:

    Aber ohne Grundlagen geht's nicht. Damit fange ich jetzt mal. Und bitte habt keine Scheu mich auf Fehler hinzuweisen. Ich bin Kritik- und Lern-fähig.

    Wie Jakob schon im Eröffnungspost geschrieben hat.
    So weit ja klar, der Script von allen beginnt mit einem "head" und hört mit einem "body" auf.


    So sieht mein "sauberes" Grundgerüst aus, auf das ich all meine Themen aufbaue. Ich werde jetzt nicht jeden einzellnen Befehl erklären, sondern nur grob zusammen fassen.
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> Legt den deutschen Zeichsatz fest. Umlaute werden richtig angezeigt.
    <title>oldster's LS</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" /> In diese Datei kommt alles rein, was mit dem Erscheinungsbild der Seite zu tun hat.
    Alles was zwischen <head> und </head> steht wird nur einmal beim Aufruf der Seite, oder wenn mann auf aktuallisieren drückt bearbeitet.
    </head>
    <body >
    Ab hier kommt Bewegung in die Seite. :)


    blanko theme </p>

    </body>
    </html>
  • Meine stylesheet.css
    body {Alles was nicht gesondert zugewiesen wird, hat die Schriftfarbe weiss und als Schriftfont Helvetica.
    color: #fff;
    font-family: "HelveticaNeue", Helvetica, sans-serif;
    background-color: rgba(56,108,179, 0.5);
    margin: 0;}

    #Layer { Kann mehrfach verwendet werden für Image's die über den ganzen Bildschirm gehen sollen.
    width: 321px;
    height: 481px;
    position: absolute;
    top: -1px;
    right: 0px;
    down: 0px;
    left: -1px;}

    .stretch {
    width:100%;
    height:100%;}


    Was jetzt noch fehlt ist javascript. Aber dazu später mehr.........
  • @ Dillinger

    Danke für die Vorlage. :)

    Ich fange dann heute Abend noch mit einer einfachen Uhr an und werde diese dann Morgen erweitern. So das jeder der möchte, diese mit Copy/Paste selber ausprobieren kann.

    Die html.Datei.
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Uhr</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />

    <script type="text/javascript">
    function uhr_datum(){
    setInterval(uhr_datum,900);
    var currentTime = new Date ();
    var jetzt_std = currentTime.getHours();
    var jetzt_min = currentTime.getMinutes();
    var jetzt_sec = currentTime.getSeconds();

    document.getElementById('uhr').innerHTML = jetzt_std + ":" + jetzt_min + ":" + jetzt_sec;

    // damit alle Zahlen 2-stellig sind müssen diese Formatiert werden
    // ist die Zahl kleiner 10, dann "0" + Zahl
    jetzt_std = ( jetzt_std < 10 ? "0" : "" ) + jetzt_std;
    jetzt_min = ( jetzt_min < 10 ? "0" : "" ) + jetzt_min;
    jetzt_sec = ( jetzt_sec < 10 ? "0" : "" ) + jetzt_sec;
    document.getElementById('uhr2').innerHTML = jetzt_std + ":" + jetzt_min + ":" + jetzt_sec;

    // Grundsätzlich wird die Uhrzeit im 24 Stunden Format geliefert
    // In vielen Theme's gibt es daher eine Umschaltung zwischen 12/24
    // Uhrzeit holen
    jetzt_std = currentTime.getHours();
    jetzt_min = currentTime.getMinutes();
    jetzt_sec = currentTime.getSeconds();

    // Erst einmal die Feststellung ob Vormittag oder Nachmittag
    var am_pm = ( jetzt_std < 12 ) ? "AM" : "PM";

    // wenn jetzt die Stunde > 12 ist, werden wieder 12 Stunden abgezogen
    jetzt_std = ( jetzt_std > 12 ) ? jetzt_std - 12 : jetzt_std;

    // danach die Zahlen wieder Formatieren
    jetzt_std = ( jetzt_std < 10 ? "0" : "" ) + jetzt_std;
    jetzt_min = ( jetzt_min < 10 ? "0" : "" ) + jetzt_min;
    jetzt_sec = ( jetzt_sec < 10 ? "0" : "" ) + jetzt_sec;
    document.getElementById('uhr3').innerHTML = jetzt_std + ":" + jetzt_min + ":" + jetzt_sec + " " + am_pm;


    }

    </script>

    </head>
    <body onload="uhr_datum();" >
    <div id="uhr"></div>
    <div id="uhr2"></div>
    <div id="uhr3"></div>
    </body>
    </html>


    und die stylesheet.css
    body {
    color: #fff;
    font-family: "HelveticaNeue", Helvetica, sans-serif;
    background-color: rgba(56,108,179, 0.5);
    margin: 0;}

    #Layer {
    width: 321px;
    height: 481px;
    position: absolute;
    top: -1px;
    right: 0px;
    down: 0px;
    left: -1px;}

    .stretch {
    width:100%;
    height:100%;}

    #uhr {
    top: 10px;
    left: 10px;
    position: absolute;}

    #uhr2 {
    top: 30px;
    left: 10px;
    position: absolute;}

    #uhr3 {
    top: 50px;
    left: 10px;
    position: absolute;}


    Und so sollte das auf Eurem Bildschirm z.B. aussehen :)

    20:1:3
    20:01:03
    08:01:03 PM

    Fragen Anregungen....immer her damit

    Gruß Wilfried
  • So, vor dem Schlafen noch kurz die Lösung.

    Da am_pm eine lokale Variable ist, die an dem Element 'uhr3' hinten angehängt wird, bleibt nur das "Auskommentieren" und löschen der Variablen.

    document.getElementById('uhr3').innerHTML = jetzt_std + ":" + jetzt_min + ":" + jetzt_sec + " " + am_pm;
    document.getElementById('uhr3').innerHTML = jetzt_std + ":" + jetzt_min + ":" + jetzt_sec;




    // var am_pm = ( jetzt_std < 12 ) ? "AM" : "PM";



    @Jakob

    Ja mit // machst Du aus der nachfolgenden Zeile einen Kommentar. Aber Achtung !! Nur die Zeile nach //.
    Will man mehrere Zeilen als Kommentar haben, muss man wie folgt vorgehen:

    /* Kommentar beginnen
    ...
    ...
    ...
    Komentar Ende */

    @hell
    Dann hab ich wieder mehr Zeit für meine Frau :D :D
  • Null ist auch eine Zahl, wenn auch die kleinste. :)

    Mit folgendem Script erhält man das aktuelle Datum mit: Wochentag - Datum - Monat - Jahr
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Uhr</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" />

    <script type="text/javascript">
    function uhr_datum(){
    setInterval(uhr_datum,900);
    var currentTime = new Date ();
    var jetzt_wtag = currentTime.getDay();
    var jetzt_datum = currentTime.getDate();
    var jetzt_monat = currentTime.getMonth();
    var jetzt_jahr = currentTime.getFullYear();

    document.getElementById('wtag').innerHTML = jetzt_wtag;

    document.getElementById('datum').innerHTML = jetzt_datum;

    document.getElementById('monat').innerHTML = jetzt_monat;

    document.getElementById('jahr').innerHTML = jetzt_jahr;


    }

    </script>

    </head>
    <body onload="uhr_datum();" >
    <div id="wtag"></div>
    <div id="datum"></div>
    <div id="monat"></div>
    <div id="jahr"></div>
    </body>
    </html>

    Das Ergebnis sind dann so aus :@
    2 für Wochentag
    3 für Datum
    0 für Monat
    2012 für Jahr
    Also nicht wirklich zu gebrauchen :-/
    Wir müssen also die Ziffern für Wochentag und Monat in den entsprechenden Text umwandeln. Eine Eigenart von Rückgabewerten aus Funktionen ist, das diese immer mit einer 0 (Null) beginnen.
    Dazu brauchen wir 2 Datenfelder
    var wtag = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
    var monat = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];

    und diese müssen dann mit eingebunden werden
    document.getElementById('wtag').innerHTML = wtag[jetzt_wtag];
    document.getElementById('monat').innerHTML = monat[jetzt_monat];

    Und schon sieht unsere Ausgabe jetzt so aus
    Dienstag
    3
    Januar
    2012

    Und zum Abschluss noch ein Tip für die faulen unter uns. :D

    In vielen Theme's sieht man das das Jahr wie folgt berechnet wird.
    var this_year = this_date_timestamp.getYear()
    if (this_year < 1000)
    this_year+= 1900;
    if (this_year==101)
    this_year=2001;


    Sieht wichtig aus, ist aber total unnötig. Wie der aufmerksame Leser gesehen hat, liefert die Funktion currentTime.getFullYear(); schon die Jahreszahl im richtigem Format. :thumbsup: :thumbsup:
  • Heute geht's wie Angekündigt ums Wetter.
    Die wohl bekannteste Wetter API (application programming interface (API),Programmierschnittstelle )ist die von yahoo. Und diese gibt es in 2 Versionen.
    1. "http://weather.yahooapis.com/forecastrss?w(p)="+locale+"&u=c" <<<< liefert Wetterdaten für heute und morgen.
    2. "http://xml.weather.yahoo.com/forecastrss/" <<<< liefert Wetterdaten für heute und 5 Tage Vorschau

    Was beide API's gemein haben, ist, das nur 2 Parameter übergeben werden.
    Einmal der Parameter für den Ort.
    w=.......wobei das w für den ab 2009 gültigen WOEID Code steht. In älteren und überwiegend englisch/amerikanischen Themens wird noch der Parameter
    p=.......verwendet.
    und der Andere für die physikalischen Einheiten
    u=.......

    Die Parameter im einzelnen:
    w= 688307 >>>>Rheinberg
    p= GMXX1124 >>>>Rheinberg

    u= c >>>> Celsius,km,km/h,mbar
    u= f >>>> Fahrenheit, mi, mph, psi

    In meinen Theme's verwende ich überwiegend die 1. Version der Wetter API's und das Auslesen der Wetterdaten geschieht in 2 Funktionen.
    1. Initialisieren der Wetter-Api

    // Wetterabfrage starten
    function Wetterdaten_holen(){
    url="http://weather.yahooapis.com/forecastrss?w=688307&u=c";
    var xml_request = new XMLHttpRequest();
    xml_request.onload = function() {xml_responded(xml_request);}
    if (xml_request.status != 200) {
    document.getElementById('wetter_ist').innerHTML = "loading..." ;
    }
    xml_request.overrideMimeType("text/xml");
    xml_request.open("GET", url+"&antiCache="+Math.floor(Math.random()*1001));
    xml_request.setRequestHeader("Cache-Control", "no-cache");
    xml_request.send(null);

    return xml_request;
    }

    2. Auslesen der Wetterdaten und Übergabe an die entsprechenden ID's.

    // Wetterdaten zuweisen
    function xml_responded (request){
    if (request.responseXML)
    {
    var root = request.responseXML.getElementsByTagName('rss')[0].getElementsByTagName('channel')[0];
    // yahoo location
    ort = root.getElementsByTagName('location')[0].getAttribute('city');
    region = root.getElementsByTagName('location')[0].getAttribute('region');
    land = root.getElementsByTagName('location')[0].getAttribute('country');

    // yahoo condition
    wetter_ist= root.getElementsByTagName('item')[0].getElementsByTagName('condition')[0].getAttribute('code');
    temp_ist = root.getElementsByTagName('item')[0].getElementsByTagName('condition')[0].getAttribute('temp');
    datum = root.getElementsByTagName('item')[0].getElementsByTagName('condition')[0].getAttribute('date');

    // yahoo wind
    wind = root.getElementsByTagName('wind')[0].getAttribute('speed');
    windr = root.getElementsByTagName('wind')[0].getAttribute('direction');

    // yahoo atmosphere
    luftf = root.getElementsByTagName('atmosphere')[0].getAttribute('humidity');
    sicht = root.getElementsByTagName('atmosphere')[0].getAttribute('visibility');
    luftd = root.getElementsByTagName('atmosphere')[0].getAttribute('pressure');
    anstieg = root.getElementsByTagName('atmosphere')[0].getAttribute('rising');

    // yahoo astronomy
    sonne_auf = root.getElementsByTagName('astronomy')[0].getAttribute('sunrise');
    sonne_ab = root.getElementsByTagName('astronomy')[0].getAttribute('sunset');

    // yahoo forecast
    tag = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[0].getAttribute('day');
    min = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[0].getAttribute('low');
    max = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[0].getAttribute('high');
    icon = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[0].getAttribute('code');

    tag1 = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[1].getAttribute('day');
    min1 = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[1].getAttribute('low');
    max1 = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[1].getAttribute('high');
    icon1 = root.getElementsByTagName('item')[0].getElementsByTagName('forecast')[1].getAttribute('code');

    windr = Math.round(windr / 22.5);

    // yahoo location
    document.getElementById('ort').innerHTML = ort ;
    document.getElementById('region').innerHTML= region ;
    document.getElementById('land').innerHTML = land ;

    // yahoo condition
    document.getElementById('wetter_ist').innerHTML= WetterIst[wetter_ist]; }

    document.getElementById('temp_ist').innerHTML = temp_ist + "°C";
    document.getElementById('datum').innerHTML = datum;
    document.getElementById('wetter_ist_icon').src = 'icon/' + wetter_ist + '.png';

    // yahoo wind
    document.getElementById('wind').innerHTML = wind + "km/h";
    document.getElementById('windr').innerHTML= Windrichtung[windr];

    // yahoo atmosphere
    document.getElementById('luftf').innerHTML= luftf + "%";
    document.getElementById('sicht').innerHTML= sicht + "km";
    document.getElementById('luftd').innerHTML= luftd + "mbar";
    if(anstieg ==0) document.getElementById('anstieg').innerHTML= "&bull;";
    if(anstieg ==1) document.getElementById('anstieg').innerHTML= "&uarr;";
    if(anstieg ==2) document.getElementById('anstieg').innerHTML= "&darr;";

    // yahoo astronomy
    h1 = sonne_auf.split(" ");
    document.getElementById('sonne_auf').innerHTML = h1[0];
    h2 = sonne_ab.split(" ");
    if (h2[1] == "pm") {
    h3 = h2[0].split(":")[0]*1+12;
    h4 = h2[0].split(":")[1];
    document.getElementById('sonne_ab').innerHTML = h3 + ":" +h4;
    }

    // yahoo forecast
    document.getElementById('tag').innerHTML = tag;
    document.getElementById('min').innerHTML = "Min: " + min + "°C";
    document.getElementById('max').innerHTML = "Max: " + max + "°C";
    document.getElementById('icon').src = 'icon/' + icon + '.png';

    document.getElementById('tag1').innerHTML = tag1;
    document.getElementById('min1').innerHTML = min1 + "°C";
    document.getElementById('max1').innerHTML = max1 + "°C";
    document.getElementById('icon1').src = 'icon/' + icon1 + '.png';

    }

    Das war es für heute mit meiner kleinen Wettereinführung. Fragen , Anregungen und auch Kritik oder Verbesserungen nehme ich gerne entgegen.