Akzeptieren

Diese Website verwendet Cookies. Durch die Nutzung dieser Webseite erklären Sie sich damit einverstanden, dass Cookies gesetzt werden. Mehr erfahren

Du bist hier:  Seitenreport    Forum    Web-Entwicklung    (X)HTML & CSS    Google Style Guide

Google Style Guide

Verfasst am: 25. 04. 2012 [12:40]
UFOMelkor
353 Beiträge
Student
Dabei seit: 20.10.2009

☆ Content Bringer
Themenersteller

Beitrag hilfreich?

Vielleicht ganz interessant für den ein oder anderen: Google HTML/CSS Style Guide

Google listet da ein wenig auf, was sie als empfehlenswert bzw. nicht empfehlenswert betrachten. Sind einige alt-bekannte Dinge dabei, aber manches war mir auch neu. Ob alles sinnvoll ist, ist dann noch eine andere Frage wink.gif



Verfasst am: 25. 04. 2012 [15:30]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo Oskar

Du da dreht sich bei einigen Punkten bei mir aber was.

Nutze HTML5 und nicht XHTML.

Soweit so gut dann kommt aber das man was eh schon XHTML zum Standard erklärt das man einigees klein schreiben sollte.

Dann sei valide was auch zum XHTML Standard gehört.

Dann setze keine Entitäten ein. Warum nicht? Unter HTML sind sie erlaubt nehmen nur halt eben mehr Zeichen ein. Unter XML und XHTML benötigt man auch manchmal 5 Stück. Okay ersetzbar durch UTF-8 aber wenn ich htmlspecialchars in PHP einsetze bin ich mir jetzt nicht sicher ob ich gleich durch ein Flag UTF-8 und nicht die Entität erreichen kann.

Okay kurz gesagt ich bleibe dann mal bei XHTML5 und sehe diese Forderungen von Google damit als erfüllt an. Nur frage ich mich warum die so ein Verwirrspiel treiben.

Also das mit dem HTML5 kann ich nachvollziehen weil es zukunfstorientiert, Semantischer, Barrierearmer wenn valide und Benutzerfreundlicher letztendlich dann ist.

XHTML5 hat dagegen den Vorteil das man einige Dinge jetzt schon verwenden kann für die man sonst einen HTML Parser haben müsste wie SVG in den Quellcode direkt einbinden.

Mir ist momentan kein HTML Parser integriert in einem Browser bekannt.

Lachen musste ich bei zwei Punkten besonders. Setze valides CSS nach dem W3C Validator ein. Nicht nur das ein Beispiel erscheint was browserspezifisch ist und damit vom sogenannten Validator als unvalide deklariert wird.

Mit setze syntaktisch richtiges CSS ein wäre ich ja schon zufrieden.

Dann wollen die noch das man alphabethisch die Eigenschaften angibt.

Welchen Sinn soll sowas haben?

Gruß
Jörg




Verfasst am: 25. 04. 2012 [16:39]
kermit767
29 Beiträge
Dabei seit: 27.01.2011

Hat schonmal was geschrieben

Beitrag hilfreich?

Der Sinn der alphabetischen Angabe wird darin liegen, dass es ein festes Vorgehen in der Reihenfolge gibt. Es bringt natürlich keinen Vorteil, aber Struktur.

Ähnlich wie die Einrückung. Einrücken erklärt sich wirklich schnell, aber warum genau zwei spaces? Theoretisch könnten es auch 3 oder 4 sein. Bei diesen Punkten (also auch der alphabetischen Sortierung) geht es doch darum einen Prozess (den der Code-Erstellung) theoretisch definieren zu können.

Ich glaube diese Punkte muss jeder für sich selbst entscheiden. Je nach dem wie ordentlich/kleinkarriert er ist.

Erfährt man irgendwo, von wann die Revision 2.1 ist?


Mich würde mal interessieren, wie weit verbreitet manche Vorschläge sind.
Wie handhabt Ihr es?
Beispiel:
h1,
h2,
h3 {
font-weight: normal;
}

oder

h1, h2, h3 {
font-weight: normal;
}





Den einzigen Punkt, den ich nicht verstanden habe ist dieser:
"
For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

(This approach may require a grace period to be established as a wider guideline as it is significantly different from what web developers are typically taught. For consistency and simplicity reasons it is best served omitting all optional tags, not just a selection.)

<!-- Not recommended -->
<!DOCTYPE html>
<html>
<head>
<title>Spending money, spending bytes</title>
</head>
<body>
<p>Sic.</p>
</body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
"

Wie soll man diesen interpretieren?

Gruß



Verfasst am: 25. 04. 2012 [19:31]
UFOMelkor
353 Beiträge
Student
Dabei seit: 20.10.2009

☆ Content Bringer
Themenersteller

Beitrag hilfreich?

Hallo Kermit,

Im Grunde ist das Beispiel ganz einfach zu verstehen. In HTML5 sind viele Tags optional, so können der html-, der head- und der body-Tag z.B. komplett wegfallen. Bei anderen Tags wie dem p-Tag wird unter Umständen nur der öffnende Tag benötigt.

Daher lässt sich nachfolgender Quelltext
HTML
<!-- Not recommended -->
<!DOCTYPE html>
<html>
 <head>
 <title>Spending money, spending bytes</title>
 </head>
 <body>
 <p>Sic.</p>
 </body>
</html>


ohne Verlust in Folgenden umwandeln:
HTML
<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.



Hallo Jörg:
"joerg" schrieb:
Nutze HTML5 und nicht XHTML

Ich finde die Begründung von Google hier eigentlich gar nicht so schlecht. XHTML benötigt zwingend den application/xhtml+xml Header, schließt also alte IEs aus. Ob es das wert ist, ohne dass (in den meisten Fällen) man wirklich einen großen Mehrwert erhält, ist zumindest Auslegungssache.

"joerg" schrieb:
Dann setze keine Entitäten ein.

Du gibst dir die Antwort schon selbst:
"joerg" schrieb:
Okay ersetzbar durch UTF-8

Was PHP angeht: htmlspecialchars ersetzt nur Zeichen, die weiterhin als Entitäten geschrieben werden müssen.

Das mit der alphabetischen Reihenfolge ist mir auch ein Rätsel. Der Ansatz von Kermit wäre hier eine Ãœberlegung, aber ob das dadurch wirklich eine Verbesserung darstellt …
Ich werde mir jedenfalls die Rosinen rauspicken und den Rest einfach wieder vergessen wink.gif



Verfasst am: 25. 04. 2012 [22:20]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

"UFOMelkor" schrieb:

"joerg" schrieb:
Nutze HTML5 und nicht XHTML

Ich finde die Begründung von Google hier eigentlich gar nicht so schlecht. XHTML benötigt zwingend den application/xhtml+xml Header, schließt also alte IEs aus. Ob es das wert ist, ohne dass (in den meisten Fällen) man wirklich einen großen Mehrwert erhält, ist zumindest Auslegungssache.


Hallo Oskar

Du das möchte ich nicht so stehenlassen. Ich gebe per Browserweiche meine Seite entweder als XHMTL5 oder als HTML5 aus. Zumindest in der Regel und nehme jetzt einfach mal die mobilen Versionen und sonstige Experimente aus.

Also schliesse ich mit dieser Kombination keine älteren IE aus. Ich unterstütze sie aber nur durch Javascript für die neuen Elemente und fahre auch kein spezielles CSS für sie.

SVG als Image eingebunden können dann Nutzer von älteren IE nicht sehen. SVG Einbindungen nehme ich nur für die XHTML Ausgabe vor und nicht für die Ausgabe als HTML.

Ich denke das ich schon einen Mehrwert durch SVG erhalte wenn ich das direkt einbinde.

Warum soll ich also nicht gleich den letzten Schritt tun den Google mehr oder weniger fordert bis auf den angesprochenden Punkt am HTML Code sparen, wo es nur geht und wo HTML sich gerade noch valide erklärt.

Prinzipiell kann ich die Ablehnung anderer XHTML Versionen nachvollziehen, denn was man da teilweise sieht das geht an XHTML so was von stark daneben vorbei das es sich im Grunde nur noch mit HTML bezeichnen kann.

Deshalb bin ich aber auch den Schritt gegangen bei den mobilen Versionen die ich angelegt habe auf die Version in HTML5 umzuleiten wenn der Browser auf der Gegenseite das nicht verkraftet.

Was ich damit klar zu machen versuche es ist möglich mit relativ geringen Aufwand das alles in ein Konzept was funktioniert zu bringen.

Nachzulesen ist mein Konzept auf dieser Seite.

http://joerghuelsermann.de/artikel/xhtml5-html5.php

Gruß
Jörg



Verfasst am: 26. 04. 2012 [11:15]
kermit767
29 Beiträge
Dabei seit: 27.01.2011

Hat schonmal was geschrieben

Beitrag hilfreich?

soll heißen <head> <body> und <html> tags werden/sind in html5 komplett überflüssig? Daran muss man sich aber erstmal geoöhnen, ebenso die nicht mehr zu schließenden Tags.



Verfasst am: 26. 04. 2012 [12:11]
joerg
1984 Beiträge
Fachinformatiker Anwendungsentwicklung
Dabei seit: 09.06.2009

✶✶ Sehr aktiver Seitenreport Vorantreiber

Beitrag hilfreich?

Hallo

Ich würde sie nicht als überflüssig bezeichnen.

HTML5 ist von der Spezifikation her die alles erlaubt. Eine Ausgabe in der XHTML und HTML Variante.

Alle bisherigen Spezifikationen von HTML ermöglichten das Weglassen von gewissen Elementen. Das ist aber in XHTML nicht der Fall.

Also ich finden den Nachteil diese paar Elemente einzusparen das der grösser ist als halt eben die Möglichkeit in nahezu jedem Format von XHTML die Seite ausgeben zu können.
Entitäten setze ich nur die in XML erlaubten ein. Und benutze auch die XML Syntax für die Elemente und Attribute.

Vielleicht dir dir das eher an diesem Beispiel deutlich

http://joerghuelsermann.de/artikel/seo/
http://joerghuelsermann.de/artikel/seo/mobil

Dazu müsste ich die in der .htaccess befindliche Zeile mal aufführen.

RewriteRule ^artikel/seo/mobil$ /artikel/seo/ [QSA]

So also gebe ich mit einer Seite 3 verschiedende Versionene aus durch ein paar Unterscheidungen unter PHP.

Da steht im Grunde noch mehr drin weil ich auch URL Manipulation damit auch abfange um Duplicate Content zu vermeiden.

PHP
<?php
if (preg_match('#^/artikel/seo/mobil$#',$_SERVER['REQUEST_URI'])) {
if ((isset($_SERVER['HTTP_ACCEPT']) and strpos($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')!==false)){
header('Content-Type: application/xhtml+xml; charset=UTF-8');
}
else {header('Location:http://joerghuelsermann.de/artikel/seo/',true,301);exit;}
}
else {
if (isset($_SERVER['HTTP_ACCEPT']) and strpos($_SERVER['HTTP_ACCEPT'], 'application/xhtml+xml')!==false)
{
header('Content-Type: application/xhtml+xml; charset=UTF-8');
}
else
{
header('Content-Type: text/html; charset=UTF-8');
}
}
?>



So jetzt bekommen alle Browser die nur text/html ausgeben können die HTML5 Version.

Alle anderen Browser bekommen je nach URL dann halt eben XHTML5 oder halt eben die mobile Version mit XHTML Mobile 1.2 als Doctype.

So und alle Versionen funktionieren einwandfrei weil ich auf die beiden vorher genannten Punkte für mich als beste Optimierung gesehen habe.

Kannst du aber auch überprüfen mit zwei meiner Tools die da mit reinspielen.

http://joerghuelsermann.de/tool/xhtml/ zur Erkennung ob wirklich XHTML gesendet wird.

http://joerghuelsermann.de/tool/element/ damit kannst du dann anhand der Elemente in der Ãœbersicht auch erkennen das mein Konzept variert.

Wahrscheinlich funktioniert nicht die Ausgabe als HTML4.01 oder darunter aber das ist auch noch möglich das da halbwegs was gescheites erscheint durch das was alles die HTML Spezifikation erlaubt.

So würde ich die HTML5 Version jetzt noch abspecken nach diesen Vorgaben von Google wäre das auch noch möglich das in diesem Konzept zu realisieren.

Aber warum sollte ich mir wegen vielleicht einem Prozent mehr an Ãœbertragung an der Stelle noch diese Mühe machen.

Und deshalb betrachte ich diesen Punkt weil es meine Möglichkeiten zur Erstellung von Webseiten vermindert als etwas sehr einsichtig von Google gedacht.

Dagegen beachte ich wohl die Punkte Entitäten zu vermeiden.
Okay vielleicht wäre an dieser Stelle ein Tool von mir hilfreich zum Entdecken der Schwachstellen in diesem Punkt.

http://joerghuelsermann.de/tool/entitaeten/

Und bin durch XHTML schon gezwungen zwei weitere genannte Punkte wie valide und kleine Schreibweise immer zu beachten.

So abschliessend sei noch angemerkt es ist schwieriger zu wissen was alles in HTML überflüssig ist und dabei noch valide als valide Seiten nach XHTML Standards zu erstellen.

So ich hoffe mit dieser Ausführung habe ich dir diesen Schwachsinn ausgeredet.

Gruß
Jörg






to Top to Top

Du bist nicht eingeloggt. Bitte beachte, dass Du eingeloggt sein musst, um Themen zu erstellen oder auf Beiträge zu antworten.

RSS Feed abonnieren

Werde in Echtzeit über neue Foren-Beiträge informiert:

RSS Feed abonnieren


0 Mitglieder waren innerhalb der letzten 15 Minuten online (5 heute gesamt):
[keine]

Administratoren und Moderatoren:
[keine]

Seitenreport hat 47724 registrierte Mitglieder, 4358 Themen und 37794 Beiträge.
Der aktuelle Mitgliederzuwachs liegt bei durchschnittlich 0 bestätigten Neuregistrierungen pro Tag.
Pro Tag werden im Seitenreport Forum durchschnittlich 0 neue Themen und 0 Beiträge erstellt.
Die Durchschnittszahlen berechnen sich aus den letzten 7 Tagen.

Mehrfach empfohlen

Seitenreport ist einer der bekanntesten SEO und Website Analyse Dienste im deutschsprachigen Raum und wurde u.a. schon empfohlen:
von Mr. Wong im Wong Letter
vom Leserservice der Deutschen Post
vom Technik Blog SiN
und vielen anderen

Seitenreport API

Verfolge die SERP Positionen Deiner Keywords und erhalte Informationen über verwendete Mikroformate, frage die Ergebnisse unserer Analysen live ab oder greife auf unsere History-Datenbank zu. Dies alles bietet Dir die neue Seitenreport API. Kontaktiere uns, um weitere Infos zu erhalten.