Beiträge von The Scout

Es gibt übrigens ein vorgefertigtes CSS Sheet names normalize.css
Das sorgt dafür, dass Abstände, Grundfarben und eben auch Schriftgrößen und Formen Browserübergreifend so weit wie möglich vereinheitlicht werden.

Wird unter anderem bei der HTML 5 Boilerplate (https://www.html-seminar.de/www.html5boilerplate.com) migeliefert.

Webfonts verwenden wäre eine Möglichkeit. Damit ist sicher gestellt, dass immer die gleiche Schrift genutzt wird. Einfach mal googlen.

So, ich melde mich hier nochmal, da ich vor Kurzem eine echt nette Anleitung zu dem Thema gefunden habe:
"Wie man mit Pfeffer den Fisch versalzt" - Tutorial über das sichere Speichern von Passwörtern.

Der hat auch noch Folgendes geliefert: Passwort Hashes mit bcrypt generieren und, auf der Seite ein bisschen scrollen, Sichere Passwort-Reset Funktion.
Vor allem Letzteres klingt sehr interessant, ich zB habe gemerkt, dass ich mir darum gar keine Gedanken gemacht hatte, sondern nur um sicheres Speichern von PWs

Wurde alles in diesem Jahr unter Berücksichtigung der PHP Password API und mit Bezug auf allgemeine Algorithmus-Sicherheit (*hust*md5) aktualisiert, lohnt sich also, sich das mal anzuschauen.

Zitat von sysop

Ungenügend... Wer sagt denn sowas?
Ein Vorwurf, der sich schon ewig hällt. Eine Kombination aus z.B. ID+Username+md5(Passwort) Kann garnicht Unsicher sein.

"abc" als passwort_hash und abc als MD5-Hash sind gleich unsicher!

Das stimmt absolut nicht. abc als md5 Hash habe ich mit einer normalen Grafikkarte in längstens 5 Sek geknackt, mit Rainbowtable im Bruchteil einer Zehntelsekunde. Für den Password_hash() brauche ich schon eine Viertelstunde.
Und zwar aus folgenden Gründen:

Regel 1) Je öfter etwas den Algorithmus durchläuft, desto sicherer wird es
md5() und sha1() sind beides sehr schnelle Verschluesselungsalgorithmen, was heißt, der Algorithmus wird nur einmal angewandt. Durch ein häufigeres Durchlaufen des Verschlüsselungsalgorithmus kommt aber mehr Chaos, mehr "Zufall" in den Hash, was dafür sorgt, dass bei der einzigen heute möglichen Methode des Hash-Entschlüsselns, des Brute Force, mehr Rechenleistung pro Hash gebraucht wird.
password_hash() mit Blowfish im Hintergrund, hat durch den Cost die Möglichkeit, die Anzahl der Durchläufe zu wählen, wenn n der Cost ist ist 2^n die Anzahl der Durchläufe

Regel 2) Ein guter Salt macht Brute Force zum Albtraum
md5() und sha1() liefern keine automatisch generierten Salts. Dadurch kann man bei einfachem Abgleich mit Rainbowtables den Rechenaufwand um ein Vielfaches minieren.
password_hash() hingegen generiert automatich einen zufälligen Salt für jedes passwort, mit weltweit von Kryptographieexperten anerkannten Methoden. Selbst gebaute Saltgeneratoren für md5() sind einfach nicht so zufällig.

Regel 3) Der Algorithmus im Hintergrund ist am Wichtigsten
Alles obige ist für die Katz, wenn der Verschlüsselungsalgorithmus selbst nicht sicher ist. Und md5() und sha1() bieten zwar keine Entschlüsselungsmöglichkeit, genauso wenig wie password_hash(), aber letzteres ist um ein Vielfaches kollisionsresistenter. D.h., wenn man sich ausschließlich den eigentlichen Hash anschaut, ist es bei md5() und sha1() wesentlich leichter, zu einem Hash eine passende Zeichenkette zu finden, welche nicht einmal unbedingt das Passwort sein muss, als bei password_hash(). Collisions for Hash Functions [...]MD5[...] (pdf)

Regel 4) Verschlüsselung sollte immer auf dem neuesten Stand sein
Durch die leistungsfähigeren Computer muss auch eine immer leistungsfähigere Verschlüsselungsmaschinerie her (man denke an einen umfunktionierten ASIC Bitcoinminer für Bruteforcing...). md5() und sha1() sind schon seit Jahren gleich, und damit veraltet. password_hash(), speziell mit der Standardeinstellung PASSWORD_DEFAULT aktualisiert in neuen PHP Versionen automatisch den verwendeten Hash, wodurch man ohne eigenes Umprogrammieren stets einen aktuellen Algorithmus verwenden kann. Besonders, wenn man die komplette PHP Password API mit password_needs_rehash() wie empfohlen verwendet.

Noch Fragen?

Bist du dir sicher? Schau mal, wo zB das Logo sitzt.
Firefox 27, Auflösung 1280x800.
Was ich auch sehr witzig finde ist: Wenn man in Vollbild schaltet, bleibt das Logo an seiner Position, verhält sich also wie

position: fixed;

Irgendwie nicht Sinn der Sache, oder?

Und noch ein Tipp: Lagere in Zukunft dein CSS in eigene Datei aus, wie das geht, steht im HTML Seminar. Ist besser für die Performance und für dich, da du dann bei mehreren Seiten nur noch ein File ändern musst, um auf allen Seiten das Design zu ändern. Außerdem kann das Stylesheet dann gecached werden.

Und drittens: Bitte beherzige den Tipp von wolf, zur Codeformatierung hier im Forum:

[code=php]Dein PHP Code

Dein mySQL Code

Dein CSS Code

Dein HTML Code

Dein JavaScript Code

[/code]Dadurch bleiben Einrückungen erhalten und es gibt Syntax Highlighting.

Relativ lange, diese 2-3 Wochen
Fast könnte man schon 4 sagen.

*Update haben will*

width: 0px: height 0px:
?

Vielleicht klappts mit dem Status :active
Der wird aktiv, wenn man zB mit dem Tabulator spielt, bis ein Rahmen um das Teil liegt (zur Erinnerung). Musst du mal probieren, ob der auch bei einem Klick anspringt.

jQuery UI koennte helfen, anstatt nem Alert dann halt so ne Infobox der UI anzeigen.
Oder halt anstatt dem Alertaufruf die CSS Klasse eines Infodivs aendern, so das dieses dann CSS-gestylt erscheint.

Aber alert abfangen? Muesstest du mal suchen, ob es ein Event a la onalert gibt, onalert(){ event.preventDefault() } wuerder dann abfangen mMn.

WTF???
<title> direkt vor dem </body>??? Wie sieht das denn aus?

So, da AJAX immer mehr um sich greift und auch jQuery enorm verbreitet ist, möchte ich hier mal zeigen, wie man beides effizient verschmelzen kann.
Dazu baue ich heute Schritt für Schritt ein jQuery Skript, welches einmal eingebaut, jedes beliebige Textformular der Seite asynchron über AJAX an das entsprechende verarbeitende Skript auf den Server weiterleitet und die Antworten abfängt.

Wozu das gut ist? Nun, durch diese Technik muss beim Absenden eines Formulars nicht mehr die komplette Seite neu geladen werden, sondern AJAX holt im Hintergrund nur noch die für die Bearbeitung benötigten Informationen vom Server und fügt die Antwort dynamisch in die bereits bestehende Seite ein. D.h. weniger Traffic, d.h. schnellere Seite, d.h. zufriedene Besucher. Und modern ist es auch noch

Dazu fängt am am Besten mit einem kleinen HTML Formular an:

<!DOCTYPE html>




<html lang="DE">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery Formularajax</title>
  </head>
  <body>
    <h1>Testformular</h1>

    <form action="validate.php" method="post">
      <label>Vorname: <input type="text" name="vorname" /></label><br />
      <label>Nachname: <input type="text" name="nachname" /></label>
    </form>




    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="jquery.ajaxform.js"></script>
  </body>
</html>

Ich gehe einfach mal davon aus, dass wenn man sich diese Tut durchliest, man schon Ahnung von HTML hat. Wenn nicht, https://www.html-seminar.de/ Da werden Sie geholfen

So, Was passiert jetzt bei Aufruf des Skripts? Es gibt eine Fehlermeldung. Warum? Es gibt keine validate.php!

<?php
// Namen aus den übertragenen Daten auslesen
$vorname  = $_POST["vorname"];
$nachname = $_POST["nachname"];




// Leerzeichen vor und hinter den namen entfernen, sowie alles zu Kleinschreibung ändern
$vorname  = trim(strtolower($vorname));
$nachname = trim(strtolower($nachname));




// Namen zusammenfügen
$name = $vorname . $nachname;




// Name ausgeben (in Kleinschreibung)
echo $name;
?>

Dies ist jetzt natürlich kein richtiges Validierungsskript, sondern nur zu Demonstration gedacht und da es auch um JavaScript geht, werde ich es nicht näher erläutern, als ohnehin schon.
ACHTUNG!!! Es wird IMMER mit PHP validiert! Man kann mit JavaScript und HTML5 Formulare vorvalidieren um Traffic zu sparen, aber die einzig wirklich verlässliche, da nicht vom Nutzer manipulierbare Validierung findet auf den eigenen Servern mit PHP statt!!!

Das JavaScript
Nun zum eigentlichen JavaScript.
Zuerst müssen wir gucken, ob ein Formular abgesendet wurde:

$("form").submit(function(event) {
});

Was macht das? Nun, wenn ein beliebiges Formular abgesendet wird, greift das Event .submit und startet eine anonyme Funktion.

Danach muss man erstmal verhindern, dass das Formular trotz JavaScript Abfang normal gesendet wird:

// Das eigentliche Absenden verhindern
event.preventDefault();

Das ist die "moderne" und empfohlenere Variante des return false; am Ende des Skripts
Und damit das "event" auch verhindert werden kann, muss es vorher auch mitgegeben werden. Was wir bei der anonymen Funtion gemacht haben.

Nun brauchen wir die Infos, die das Formular liefert, also, wohin gehts, wie gehts dahin und was geht dahin. Oder anders: action, method und Daten:

// Das sendende Formular und die Metadaten bestimmen
var form = $(this);
var action = form.attr("action"),
    method = form.attr("method"),
    data   = form.serialize();

Um es mir einfacher zu machen, habe ich das aktuell aufrufende Formular erstmal in eine Variable gepackt. Das hat den Vorteil, dass man ggf. das Formular an andere Funktionen, zB zur JS Zwischenvalidierung weiterreichen kann.

Als nächstes kommt nun der eigentliche AJAX Aufruf und die größte Stärke von jQuery in diesem Skript:

$.ajax({
}).done(function(data) {
}).fail(function() {
}).always(function() {
});

Das ist der Grundaufbau, um einen AJAX Aufruf via jQuery zu senden, zu empfangen und den Transfer zu prüfen. Nun lasst uns die oben vom Formular erhaltenen Daten nutzen:

$.ajax({
    url: action,
    type: method,
    data: data
})

Das ist alles, was es braucht, um für ein beliebiges Textformular via AJAX zu senden.

Was macht man mit dem, was zurückkommt?

.done(function(data) {
    // Transfer erfolgreich
    alert("Der Name: " + data);
}).fail(function() {
    // Transfer fehlgeschlagen
    alert("Fehler");
}).always(function() {
    // Vom Transferstatus unabhängig
    alert("AJAX beendet!");
});

Also, man hat zwei Ereignisse und eine unabhängige Funktion, die aufgerufen werden können. Hierbei ist die erste die einzige, die wirklich Daten empfangen muss, dies ist nämlcih die Funktion, die bei einem erfolgreichen Transfer die Daten des Serverskriptes erhält.
Die zweite wird nur angesprochen, wenn beim AJAX Call etwas schief lief. Dies kann man dann zB. dem Nutzer mitteilen.
Die dritte und letzte ist von Erfolg oder Misserfolg des Calls unabhängig, sie wird immer ausgeführt. Nutze ich zB. sehr gerne, um evt. Ladesymbole wieder zu verstecken.

Nun das JavaScript als Ganzes noch einmal, mit Kommentaren:

$("form").submit(function(event) {
    // Das eigentliche Absenden verhindern
    event.preventDefault();

    // Das sendende Formular und die Metadaten bestimmen
    var form = $(this); // Dieser Zeiger $(this) oder $("form"), falls die ID form im HTML exisitiert, klappt übrigens auch ohne jQuery ;)
    var action = form.attr("action"), // attr() kann enweder den aktuellen Inhalt des gennanten Attributs auslesen, oder setzt ein neuen Wert, falls ein zweiter Parameter gegeben ist
        method = form.attr("method"),
        data   = form.serialize(); // baut die Daten zu einem String nach dem Muster vorname=max&nachname=Müller&alter=42 ... zusammen

    // Der eigentliche AJAX Aufruf
    $.ajax({
        url : action,
        type : method,
        data : data
    }).done(function (data) {
        // Bei Erfolg
        alert("Erfolgreich:" + data);
    }).fail(function() {
        // Bei Fehler
        alert("Fehler!");
    }).always(function() {
        // Immer
        alert("Beendet!");
    });
});

Wie man sieht, reichen ein paar Zeilen jQuery, um jedes Textformular gleichzeitig auf AJAX zu trimmen
jQuery spielt hierbei seine Rolle, um uns das Erhalten der Formulardaten und das Senden via AJAX enorm zu erleichtern. Irgendwo im Forum fährt noch ein ähnliches JavaScript rum, welches allerdings nicht auf jQuery aufbaut. Ist ungefähr fünfmal so viel Code.

Das Besondere?
Folgende Besonderheiten hat dieses Skript:

• Es funktioniert für jedes Textformular gleichzeitig
• Es ist komplett als Progressive Enhancement Script gestaltet, d.h. hat der Nutzer kein JavaScript aktiviert, funktionieren die Formulare trotzdem einwandfrei
• Im eigentlichen HTML Code ist keine weitere Auszeichnung durch Klassen, oder zusätzliches JS notwendig.
• Es lässt sich beliebig erweitern, zB durch eine rudimentäre Validierung des Formulars vor dem Senden (einfach den gesamten Ajax Call in eine if Bedingung packen)

Das einzige, was mit diesem Skript nicht aynchron möglich ist, sind Fileuploads, da jQuery ohne weitere Plug-Ins keine Unterstützung dafür bietet. Vielleicht schreibe ich oder jmd. anders noch eine reine JavaScripterweiterung dieses Skripts um auch Fileuploads zu ermöglichen, aber ich zumindest nicht so bald.

Wie man sieht, ist AJAX durch jQuery wirklich enorm verinfacht worden, vor allem durch die zwei von jQuery gestellen Funktionen .serialize() und $.ajax(). Diese nehmen uns 90% der Arbeit ab, die man bei reinem JavaScript machen müsste. Und nun viel Spaß beim Rumprobieren

Und jetzt alle ihre Schwänze wieder einpacken, lauras als Admin hat sowieso den Längsten, da kommt keiner drumrum
Ja, es wurden tatsachen genannt, ja, es fehlen Teile, aber JA, verdammt, das ist ein Anfängerforum!

Himmiherrgott, und jetzt hör ich auch auf, den Thread unnötig aufzupumpen, danke wolf, für deine Arbeit!

Hallo und willkommen im Forum!
1) Es gibt so eine tolle Zeile über dem Eingabetextfeld, da sind unten rechts so 5 dunkelgraue Buttons gruppiert.
Der zweite von rechts ist da übrigens für die Formatierung von HTML da
2) Hast du verschiedene wichtige Tags vergessen, hier mal eine von mir bereinigte Version:

<!DOCTYPE html>
<html lang="en"> <!-- oder "de", aber im Mom en, weil der Hint im Audio englisch ist, ein soll -->
  <head>
    <meta charset="utf-8" /> <!-- Pflicht -->
    <title>TESTSEITE AUDIO</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- gehört AUCH in den head, zudem - gegen = getauscht, kann -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- damit keine Fehler bei der Skalierung auftreten, kann -->
  </head>




  <body> <!-- muss, wurde vergessen -->
    <audio controls="controls">
      <source src="1stele.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  </body> <!-- muss, wurde vergessen -->
</html> <!-- muss, wurde vergessen -->

So sollte es eigentlich laufen, wenn der Pfad zur Datei stimmt, im Moment müssen die HTML und die Audiodatei im selben Ordner liegen.
Ansonsten, Pfad prüfen; prüfen, ob wirklich MPEG innerhalb vom mp3 als Codec verwendet wurde.

Heyho,
das hier ist jetzt weniger ein Tutorial, als vielmehr eine Linkliste mit Ergänzungen zum Inhalt meinerseits. Quasi ein Tutorialsprungbrett, aber ich hoffe, das Präfix ist trotzdem gerechtfertigt
Und ja, ich bin Fan von Webbausteine.de

Worum gehts?
Es geht darum, wie man sich eine eigene "Entwicklungsumgebung" für seine HTML Seiten schaffen kann. Welche Tools werden benötigt, was muss man bei den Files beachten, welche Software ist empfehlenswert, ...
Das Ganze ist allerdings nur für Windows, falls also ein Linuxuser auch ein paar Tipps hat, bitte erweitern

Die Software

• Ein Editor
  
  • Die Diskussion
  • Notepad ++
  • Sublime Text
  • Weitere sind in der Diskussion erwähnt, das sind die zwei, die aktuell am Weitesten verbreitet sind
  • Falls man unabhängig suchen möchte, ist Syntax Highlighting für HTML, CSS, JavaScript UND PHP die Grundvorraussetzung
• Ein lokaler Server
  
  • Apache Friends XAMPP ist mit Abstand der beliebteste
  • Ein Tipp von mir: Die Standardversion, die direkt auf der Seite verlinkt ist, ist in 90% der Fälle zu umfangreich (selbst wenn es später komplexer wird). Deshalb empfiehlt es sich, bei dem Link Weitere Downloads zuerst sein Betriebssystem, dann die aktuelle Version, und dann die höchstgelegene .exe Datei mit "-portable" im Namen zu suchen. Hat immer noch alles was man braucht, aber ein paar unnötige Dinge wie ein Mail- oder lokaler Fileserver (braucht man beides seltenst) wurden weggelassen.
  • Die Installation
  • Manchmal kommt es unter Win 7 oder 8 vor, dass der Port 80 bereits vom System belegt ist. Anstatt nun XAMPP umzukonfigurieren und jedesmal bei tests die Portnummer in die URL schreiben zu müssen, nutzt eine dieser Anleitungen: Anleitung 1 und Anleitung 2
• Neue Dateien
  
  • Wo neue Dateien gespeichert werden, wenn man sie auf dem Server nutzen will, ist bereits bei der Apache Installationsanleitung erklärt
  • WIE speichert man neue Dateien? Am Besten in UTF-8 speichern. Wichtig: Für Webservices wird nur selten ein BOM bei UTF-8 benötigt!
  • Und der Dateiname ist auch wichtig.
• PHP nutzen
  
  • PHP ist mächtig, PHP ist groß (drei Meter Sechzig, und arbeitslos. Ach nee, das war wer anders xP). Wie nutzt man es nun?
  • Zuallererst sollte man sich die Grundlagen aneignen, zB im PHP Kurs, der Schwesterseite vom HTML Seminar
  • Um bestimmte Funktionen zu finden, eignet sich immer noch am Besten das offizielle PHP Handbuch, wo, meist auch auf deutsch, die einzelnen Funktionen mit Nutzen, Aufbau und Parametern beschrieben sind.
  • Und dann nutzt man es mit Sicherheit! Hier ist allerdings zu sagen, md5() und sha1() für Passwörter sind ungenügend, wie man es richtig macht, wird hier erklärt: Passwörter sicher hashen
  • Ein schönes Beispiel für PHP Nutzung ist die als moderne Alternative zu Frames. Also zur dynamischen Seitenerstellung. Warum schön? Nun, einfach zu implementieren, schwer zu meistern, also abzusichern. Kann man also beides prima üben
• Dies sind nur ein paar Links, die helfen sollen, wenn man sich eine Umgebung für seine eigenen Seiten schaffen will: den richtigen Editor nutzen, das Verwenden von PHP ermöglichen, gleich zu Beginn auf die Filekodierung und Benennung achten, und immer schön vorsichtig in PHP. Wenn man diese Punkte und die Artikel hinter den Links VERSTEHT, dann steht der Umgebung für hemmungloses Rumgeskripte nichts mehr im Weg

Und wie immer, Rechtschreibfehler verstecken sich hier vor Chuck Norris, wer Fehler findet, darf sie behalten, zusätzliche Tipps, Links, Hinweise sind absolut erwünscht!

Ja, vielleicht funktionierts, wenn du anstatt "sHc.lenght" ein "sHc.length" schreibst

Wie siehts aus mit JacaScript Promises? Müsste doch auch in die Richtung gehen, kannst ja mal nach suchen und dich einlesen
Vorteil: Asynchron

Naja, man könnte auch einen eigenen Themenbereich eröffnen, dann hat man einen Themenbereich für Fragen und einen anderen für Codesnippets (oder ganze Strukturen).

Und versteht mich nicht falsch, aber ich fände, es wäre dann eher nützlich, wenn man näher erläutert, WIE man mit Codesnippets umgeht. Es gibt einfach viele Seiten mit Snippets, aber die meisten davon erklären nicht wirklich, WIE man diese einbaut. D.h., wir könnten uns wichtige Snippets nehmen (Datenbankverbindung klassisch/PDO, Passwortumgang/-verschlüsselung, whatever), und diese dann nicht einfach posten, sondern erläutern. Wäre halt für ein Lernforum angemessener, als eine einfache Snippetsammlung, mMn

Trittbrettfahrer

http://webbausteine.de/blog/bausteine/_bausteine.php

Nur ein Beispiel, es gibt doch bereits so einige Sammelbecken, oder? Aber natürlich kann man hier auch noch eins einrichten, fragt sich nur, was sagen die Meister dazu?

Und nein, PHP auf dem Server lagern und via Ajax aufrufen ist keine gute Idee, da dadurch der Endanwender zum Verwenden von JavaScript (JS) gezwungen wird.

Wenn man JS, und somit auch AJAX, verwendet, sollte man immer das Prinzip des Progressive Enhancement berücksichtigen, soll heißen, erst so programmieren, dass es vollkommen ohne JS funktioniert, und dann die Funktionalität mit JS erweitern.
Selbst heutzutage gibt es noch die JS Verächter, die standardmäßig mit NoScript uÄ durch die VL gondeln, und solchen vergraulst du mit wolfs Taktik einfach deine Seite. Die kommen einmal, merken, es geht nicht ohne JS, und kommen nie wieder

Und zu goto sage ich hier nix mehr