Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature may not be available in some browsers.
Moin, moin…
hier meine kleine Kritik:
Die Seite wirkt aufgeräumt und schlicht. Gut so. Dein Code ist allerdings recht grausam. ;)
Aber schauen wir uns das einmal im Detail an:
1. Zeilenumbrüche
Dein Code beinhaltet recht viele Zeilenumbrüche, an Stellen, an welchen sie unnötig sind. Der Doctype allein braucht drei Zeilen, obwohl er in eine passt. Darunter sind noch einmal zwei oder drei Zeilen frei. Entfernst du solche unnötige Umbrüche, welche auch keine verbesserte Übersicht im Code bringen, sparst du Bandbreite. In der Masse zahlen sich solche Optimierungen aus (bei gut besuchten Seiten), aber auch jeder, der mit seinem Handy/Smartphone unterwegs ist oder noch auf DSL-Light oder gar ISDN zurückgreifen muss, der freut sich darüber.
2. Einrückungen
Dein Code beinhaltet keine Einrückungen. Diese verursachen zwar wiederrum ein wenig Bandbreite, aber die hast du ja oben gespart und kannst sie hier einsetzen, um deinen Code übersichtlicher zu gestalten. Das hilft dir gerade bei größeren Projekten die Übersicht zu behalten. Eine einfache Regel ist: Jedes Kindelement ist ein Tab weiter eingerückt als sein Elternelement. Wie das genau gemeint ist, kannst du dir an Hand des Quelltextes dieser Seite anschauen: Messdiener St. Jakobus und St. Martin • Home
3. Validität
Dein Code ist syntaktisch nicht korrekt, wie dir dieses Tool hier zeigt: [Invalid] Markup Validation of http://www.moritz-morgenstern.de/sites/home.html - W3C Markup Validator Korrigiere diese Fehler!
4. Barrierefreiheit
Barrierefreiheit kommt immer mehr in Mode und das ist auch gut so. Es hilft, dass sich auch sehbehinderte Menschen im Internet bewegen können. Sehbehindert kann dabei bedeuten, dass die Person blind ist und z. B. einen Screenreader benutzt, aber auch, dass sie nur eingeschränkt sehen kann, weil sie zum Beispiel nur schlecht sieht oder bestimmte Farben nur sehr schlecht erkennen kann, geringe Kontraste können dann stören.
Allein schon der Anstand und die Rücksicht auf solche Menschen bringt ein paar Regeln mit. Wichtig ist die korrekte Auszeichnung des Codes. Eine Überschrift wird mit <hx></hx> (x für die Zahl der Ordnung) ausgezeichnet. Dies sieht man bei dir leider nicht, denn du hast gar keine Überschrift. Deine Kopfgrafik wird als Hintergrundbild eingebunden. Das kann man zwar machen, allerdings beinhaltet sie doch wichtigen Inhalt, oder? Nämlich deine Überschrift. Gut wäre also folgender Code:
Wichtig dabei ist das alt-Attribut, denn es ermöglicht auch Nutzern mit Screenreadern zu wissen, welche Information das Bild beinhaltet.Code:<h1><img src="pfad/zum/bild.png" alt="Moritz Morgenstern"></h1>
Zur korrekten Auszeichnung gehört auch dazu, dass man eine Navigation mittels <ul>, also einer Liste darstellt und nicht in einer Tabelle. Tabellen sind für tabellarische Daten da. Für nichts anderes!
Es gibt sicher noch mehr zu erklären, aber das soll erst einmal reichen. Wenn du noch Fragen hast, dann einfach fragen. Wir helfen gerne…
Meine Zwischenablage wurde gerade geputzt ;)Zwischenablage schrieb:
und viele andere Stichworte, die mir mermshaus super im Webchat erklärt hat. ;)JVM
101101110001
A8D324
Regular Expression für Email-Prüfung...^^Code:^[a-z0-9]+([-_\.]?[a-z0-9])+@[a-z0-9]+([-_\.]?[a-z0-9])+\.[a-z]{2,4}^
'/^(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){255,})(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){65,}@)(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22))(?:\\.(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22)))*@(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*\\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-[a-z0-9]+)*)|(?:\\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\\]))$/iD'
public function getCSS(){
$out = '#mygallery *{margin:0;padding:0;border:0 none;}'.
'#mygallery{padding:0 '.round(($this->gWidth - $this->width)/2, 0).'px;width:'.$this->width.'px;background:#888888;}'.
'#mythumbs{width:'.$this->width.'px;overflow:hidden;}'.
'#mythumbs ul{list-style:none;}'.
'.mythumb{width:'.$this->thumbWidth.'px;height:auto;position:relative;}'.
'#mythumbs div{width:'.$this->thumbWidth.'px;height:'.$this->maxHeight * ($this->thumbWidth / $this->width).'px;float:left;clear:right;padding:3px;}'.
'#mypreview{width:'.$this->width.'px;overflow:hidden;height:'.$this->maxHeight.'px;}';
foreach($this->pics as $index => $pic){
$out .= '#mythumbs .'.$index.'{height:'.round(($this->thumbWidth * $pic['relation']), 0).'px;}';
}
return $out;
}
213690-store
select
count(mc.message_id) `count`,
users.user_id,
users.username
from
message_content mc
inner join
message_users mu
left join
users users
on
users.user_id = mc.user_id
where
mc.message_id = 1 and
mc.user_id = mu.user_id and
mu.message_id = mc.message_id
group by
mc.user_id
order by
`count` desc,
users.username