SlideShare ist ein Scribd-Unternehmen logo
Frontend Coding
   Guidelines
Ein Baustein zur Qualitätssicherung
Michael Kühnel

• Macht Internet seit Netscape 4.7
• Frontend Developer bei der SMA Solar
  Technology AG
• Twitter: @mkuehnel
• Website: www.michael-kuehnel.de
Frontend Coding
   Guidelines
Frontend Coding
       Guidelines

• Markup (HTML)
• CSS
• JavaScript
Frontend Coding
   Guidelines
Frontend Coding
       Guidelines
• Für wen?
Frontend Coding
       Guidelines
• Für wen?
• Warum?
Frontend Coding
        Guidelines
• Für wen?
• Warum?
• Was sollte enthalten sein?
Frontend Coding
        Guidelines
• Für wen?
• Warum?
• Was sollte enthalten sein?
• Tools zur Überprüfung
Sinnvoll für
Sinnvoll für

• Alle Projekte an denen nicht alleine
  gearbeitet wird:
Sinnvoll für

• Alle Projekte an denen nicht alleine
  gearbeitet wird:
    • Teams. Auch in kleineren Firmen
Sinnvoll für

• Alle Projekte an denen nicht alleine
  gearbeitet wird:
    • Teams. Auch in kleineren Firmen
    • Firmen die Dienstleister beauftragen
Sinnvoll für

• Alle Projekte an denen nicht alleine
  gearbeitet wird:
    • Teams. Auch in kleineren Firmen
    • Firmen die Dienstleister beauftragen
• Übergabe von Projekten an Kunden
Warum?
Warum?
• Qualität fördern:
Warum?
• Qualität fördern:
   • Webstandards
Warum?
• Qualität fördern:
   • Webstandards
   • Barrierefreiheit
Warum?
• Qualität fördern:
   • Webstandards
   • Barrierefreiheit
   • Wartbarkeit
Warum?
• Qualität fördern:
   • Webstandards
   • Barrierefreiheit
   • Wartbarkeit
   • Lesbarkeit
Warum?
• Qualität fördern:
   • Webstandards
   • Barrierefreiheit
   • Wartbarkeit
   • Lesbarkeit
 • Vereinheitlichung über Projektgrenzen
Inhalte (Allgemein)
Inhalte (Allgemein)
•   Encoding von Dateien
Inhalte (Allgemein)
•   Encoding von Dateien

•   Line endings (Unix vs.
    Mac vs. Windows)
Inhalte (Allgemein)
•   Encoding von Dateien

•   Line endings (Unix vs.
    Mac vs. Windows)

•   Einrückungen
Inhalte (Allgemein)
•   Encoding von Dateien

•   Line endings (Unix vs.
    Mac vs. Windows)

•   Einrückungen

•   Schreibweisen
    (lowerCamelCase vs.
    benutzung-von-
    bindestrichen)
Inhalte (Allgemein)
•   Encoding von Dateien

•   Line endings (Unix vs.
    Mac vs. Windows)

•   Einrückungen

•   Schreibweisen
    (lowerCamelCase vs.
    benutzung-von-
    bindestrichen)

•   Verpflichtung zur
    Validierung
Inhalte (Allgemein)
•   Encoding von Dateien     •   Code-Beispiele
                                 (Dos and Don’ts)
•   Line endings (Unix vs.
    Mac vs. Windows)

•   Einrückungen

•   Schreibweisen
    (lowerCamelCase vs.
    benutzung-von-
    bindestrichen)

•   Verpflichtung zur
    Validierung
Inhalte (Allgemein)
•   Encoding von Dateien     •   Code-Beispiele
                                 (Dos and Don’ts)
•   Line endings (Unix vs.
    Mac vs. Windows)         •   Anhang mit Best
                                 Practices
•   Einrückungen

•   Schreibweisen
    (lowerCamelCase vs.
    benutzung-von-
    bindestrichen)

•   Verpflichtung zur
    Validierung
Inhalte (Allgemein)
•   Encoding von Dateien     •   Code-Beispiele
                                 (Dos and Don’ts)
•   Line endings (Unix vs.
    Mac vs. Windows)         •   Anhang mit Best
                                 Practices
•   Einrückungen
                             •   ggf. Definition der zu
•   Schreibweisen                unterstützenden
                                 Browser
    (lowerCamelCase vs.
    benutzung-von-
    bindestrichen)

•   Verpflichtung zur
    Validierung
Inhalte (Allgemein)
•   Encoding von Dateien     •   Code-Beispiele
                                 (Dos and Don’ts)
•   Line endings (Unix vs.
    Mac vs. Windows)         •   Anhang mit Best
                                 Practices
•   Einrückungen
                             •   ggf. Definition der zu
•   Schreibweisen                unterstützenden
                                 Browser
    (lowerCamelCase vs.
    benutzung-von-
    bindestrichen)           •   ggf. Merging von Dateien

•   Verpflichtung zur
    Validierung
Inhalte (HTML)
Inhalte (HTML)
•   Validierung nach
    welchem Standard?
Inhalte (HTML)
•   Validierung nach
    welchem Standard?

•   Bei HTML5: Welche
    Schreibweise? (XHTML
    vs. HTML)
Inhalte (HTML)
•   Validierung nach
    welchem Standard?

•   Bei HTML5: Welche
    Schreibweise? (XHTML
    vs. HTML)

•   Trennung von Inhalt und
    Design
Inhalte (HTML)
•   Validierung nach
    welchem Standard?

•   Bei HTML5: Welche
    Schreibweise? (XHTML
    vs. HTML)

•   Trennung von Inhalt und
    Design

•   IDs vs. Klassen
Inhalte (HTML)
•   Validierung nach          •   Spans vs. Divs
    welchem Standard?

•   Bei HTML5: Welche
    Schreibweise? (XHTML
    vs. HTML)

•   Trennung von Inhalt und
    Design

•   IDs vs. Klassen
Inhalte (HTML)
•   Validierung nach          •   Spans vs. Divs
    welchem Standard?
                              •   Semantisches HTML
•   Bei HTML5: Welche
    Schreibweise? (XHTML
    vs. HTML)

•   Trennung von Inhalt und
    Design

•   IDs vs. Klassen
Inhalte (CSS)
Inhalte (CSS)
•   Inline CSS verbieten
Inhalte (CSS)
•   Inline CSS verbieten

•   Vor !important warnen
Inhalte (CSS)
•   Inline CSS verbieten

•   Vor !important warnen

•   Hinweis auf den Umgang
    mit dem Internet
    Explorer
Inhalte (CSS)
•   Inline CSS verbieten

•   Vor !important warnen

•   Hinweis auf den Umgang
    mit dem Internet
    Explorer

•   Schreibweise von
    Selektoren,
    Eigenschaften und
    Werten
Inhalte (CSS)
•   Inline CSS verbieten     •   Kommentare

•   Vor !important warnen

•   Hinweis auf den Umgang
    mit dem Internet
    Explorer

•   Schreibweise von
    Selektoren,
    Eigenschaften und
    Werten
Inhalte (CSS)
•   Inline CSS verbieten     •   Kommentare

•   Vor !important warnen    •   Verwendung von CSS3

•   Hinweis auf den Umgang
    mit dem Internet
    Explorer

•   Schreibweise von
    Selektoren,
    Eigenschaften und
    Werten
Inhalte (CSS)
•   Inline CSS verbieten     •   Kommentare

•   Vor !important warnen    •   Verwendung von CSS3

•   Hinweis auf den Umgang   •   ggf. Infos zur
    mit dem Internet             Verwendung von CSS
    Explorer                     präprozessoren

•   Schreibweise von
    Selektoren,
    Eigenschaften und
    Werten
Inhalte (CSS)
•   Inline CSS verbieten     •   Kommentare

•   Vor !important warnen    •   Verwendung von CSS3

•   Hinweis auf den Umgang   •   ggf. Infos zur
    mit dem Internet             Verwendung von CSS
    Explorer                     präprozessoren

•   Schreibweise von         •   ggf. zu verwendende
    Selektoren,                  Frameworks
    Eigenschaften und
    Werten
Inhalte (CSS)
•   Inline CSS verbieten     •   Kommentare

•   Vor !important warnen    •   Verwendung von CSS3

•   Hinweis auf den Umgang   •   ggf. Infos zur
    mit dem Internet             Verwendung von CSS
    Explorer                     präprozessoren

•   Schreibweise von         •   ggf. zu verwendende
    Selektoren,                  Frameworks
    Eigenschaften und
    Werten                   •   ggf. Umgang mit mobilen
                                 Endgeräten
Inhalte (JavaScript)
Inhalte (JavaScript)
•   Schreibweisen
Inhalte (JavaScript)
•   Schreibweisen

•   Schützen des Globalen
    Scopes
Inhalte (JavaScript)
•   Schreibweisen

•   Schützen des Globalen
    Scopes

•   Standards für
    Kommentare
Inhalte (JavaScript)
•   Schreibweisen

•   Schützen des Globalen
    Scopes

•   Standards für
    Kommentare

•   JS Code Placement
Inhalte (JavaScript)
•   Schreibweisen

•   Schützen des Globalen
    Scopes

•   Standards für
    Kommentare

•   JS Code Placement

•   Zu verwendende
    Vergleichsoperatoren
Inhalte (JavaScript)
•   Schreibweisen           •   eval is evil

•   Schützen des Globalen
    Scopes

•   Standards für
    Kommentare

•   JS Code Placement

•   Zu verwendende
    Vergleichsoperatoren
Inhalte (JavaScript)
•   Schreibweisen           •   eval is evil

•   Schützen des Globalen   •   Zu verwendende
    Scopes                      Frameworks

•   Standards für
    Kommentare

•   JS Code Placement

•   Zu verwendende
    Vergleichsoperatoren
Inhalte (JavaScript)
•   Schreibweisen           •   eval is evil

•   Schützen des Globalen   •   Zu verwendende
    Scopes                      Frameworks

•   Standards für           •   ggf. Infos zu
    Kommentare                  jQuery.noConflict()

•   JS Code Placement

•   Zu verwendende
    Vergleichsoperatoren
Inhalte (JavaScript)
•   Schreibweisen           •   eval is evil

•   Schützen des Globalen   •   Zu verwendende
    Scopes                      Frameworks

•   Standards für           •   ggf. Infos zu
    Kommentare                  jQuery.noConflict()

•   JS Code Placement       •   Fehlervermeidung
                                (JSHint vs. JSLint)
•   Zu verwendende
    Vergleichsoperatoren
Inhalte (JavaScript)
•   Schreibweisen           •   eval is evil

•   Schützen des Globalen   •   Zu verwendende
    Scopes                      Frameworks

•   Standards für           •   ggf. Infos zu
    Kommentare                  jQuery.noConflict()

•   JS Code Placement       •   Fehlervermeidung
                                (JSHint vs. JSLint)
•   Zu verwendende
    Vergleichsoperatoren    •   ggf. Anhang mit Best
                                Practices
Tools
Tools

• JSHint: http://www.jshint.com/about
• Sonar: http://www.sonarsource.org
• PMD: http://pmd.sourceforge.net
• Checkstyle: http://
  checkstyle.sourceforge.net
Das wars ; )



Fragen?
Twitter: @mkuehnel
E-Mail: mail@michael-kuehnel.de

Weitere ähnliche Inhalte

Ähnlich wie Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
Michael Oeser
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
Jens Grochtdreis
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
Alexander Schmidt
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
Ulrich Schmidt
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
Eric Eggert
 
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Andreas Wissel
 
Bi testing media_factory_0.10
Bi testing media_factory_0.10Bi testing media_factory_0.10
Bi testing media_factory_0.10
inovex GmbH
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
Eric Eggert
 
Was Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wolltenWas Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wollten
Markus Erle
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
Hussein Morsy
 
Testen von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.js
Testen von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.jsTesten von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.js
Testen von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.js
Sebastian Helzle
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Kai Donato
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Community ITmitte.de
 
20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge
20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge
20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge
Karin Patenge
 
Modern Lightweight Enterprise Architectures mit Java
Modern Lightweight Enterprise Architectures mit JavaModern Lightweight Enterprise Architectures mit Java
Modern Lightweight Enterprise Architectures mit Java
OPEN KNOWLEDGE GmbH
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)
djesse
 
MongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows AzureMongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows Azure
Jan Hentschel
 
Von Test nach live mit Rex
Von Test nach live mit RexVon Test nach live mit Rex
Von Test nach live mit Rex
inovex GmbH
 
Von Test nach Live mit Rex
Von Test nach Live mit RexVon Test nach Live mit Rex
Von Test nach Live mit Rex
Jan Gehring
 

Ähnlich wie Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung (20)

There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
Von Windows Forms zu Web Components: robuste und flexible User Experience mit...
 
Bi testing media_factory_0.10
Bi testing media_factory_0.10Bi testing media_factory_0.10
Bi testing media_factory_0.10
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Was Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wolltenWas Sie schon immer über barrierefreie PDFs wissen wollten
Was Sie schon immer über barrierefreie PDFs wissen wollten
 
Agile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit RailsAgile Softwareentwicklung mit Rails
Agile Softwareentwicklung mit Rails
 
Testen von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.js
Testen von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.jsTesten von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.js
Testen von TYPO3 CMS/Flow/Neos Anwendungen mit Behat und Dalek.js
 
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven EinsatzNode.js - Von der Entwicklugn bis zum produktiven Einsatz
Node.js - Von der Entwicklugn bis zum produktiven Einsatz
 
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
Ringvorlesung: FIO Systems AG stellt Projektziel zum Thema Software Design Pa...
 
20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge
20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge
20171121_DOAGKonferenz_JSON_OracleNoSQL_KPatenge
 
Modern Lightweight Enterprise Architectures mit Java
Modern Lightweight Enterprise Architectures mit JavaModern Lightweight Enterprise Architectures mit Java
Modern Lightweight Enterprise Architectures mit Java
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)
 
MongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows AzureMongoDB on Linux VM in Windows Azure
MongoDB on Linux VM in Windows Azure
 
Von Test nach live mit Rex
Von Test nach live mit RexVon Test nach live mit Rex
Von Test nach live mit Rex
 
Von Test nach Live mit Rex
Von Test nach Live mit RexVon Test nach Live mit Rex
Von Test nach Live mit Rex
 

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

  • 1. Frontend Coding Guidelines Ein Baustein zur Qualitätssicherung
  • 2. Michael Kühnel • Macht Internet seit Netscape 4.7 • Frontend Developer bei der SMA Solar Technology AG • Twitter: @mkuehnel • Website: www.michael-kuehnel.de
  • 3. Frontend Coding Guidelines
  • 4. Frontend Coding Guidelines • Markup (HTML) • CSS • JavaScript
  • 5. Frontend Coding Guidelines
  • 6. Frontend Coding Guidelines • Für wen?
  • 7. Frontend Coding Guidelines • Für wen? • Warum?
  • 8. Frontend Coding Guidelines • Für wen? • Warum? • Was sollte enthalten sein?
  • 9. Frontend Coding Guidelines • Für wen? • Warum? • Was sollte enthalten sein? • Tools zur Überprüfung
  • 11. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird:
  • 12. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen
  • 13. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen • Firmen die Dienstleister beauftragen
  • 14. Sinnvoll für • Alle Projekte an denen nicht alleine gearbeitet wird: • Teams. Auch in kleineren Firmen • Firmen die Dienstleister beauftragen • Übergabe von Projekten an Kunden
  • 17. Warum? • Qualität fördern: • Webstandards
  • 18. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit
  • 19. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit
  • 20. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit
  • 21. Warum? • Qualität fördern: • Webstandards • Barrierefreiheit • Wartbarkeit • Lesbarkeit • Vereinheitlichung über Projektgrenzen
  • 23. Inhalte (Allgemein) • Encoding von Dateien
  • 24. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows)
  • 25. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows) • Einrückungen
  • 26. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows) • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen)
  • 27. Inhalte (Allgemein) • Encoding von Dateien • Line endings (Unix vs. Mac vs. Windows) • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
  • 28. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
  • 29. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices • Einrückungen • Schreibweisen (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
  • 30. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices • Einrückungen • ggf. Definition der zu • Schreibweisen unterstützenden Browser (lowerCamelCase vs. benutzung-von- bindestrichen) • Verpflichtung zur Validierung
  • 31. Inhalte (Allgemein) • Encoding von Dateien • Code-Beispiele (Dos and Don’ts) • Line endings (Unix vs. Mac vs. Windows) • Anhang mit Best Practices • Einrückungen • ggf. Definition der zu • Schreibweisen unterstützenden Browser (lowerCamelCase vs. benutzung-von- bindestrichen) • ggf. Merging von Dateien • Verpflichtung zur Validierung
  • 33. Inhalte (HTML) • Validierung nach welchem Standard?
  • 34. Inhalte (HTML) • Validierung nach welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML)
  • 35. Inhalte (HTML) • Validierung nach welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design
  • 36. Inhalte (HTML) • Validierung nach welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design • IDs vs. Klassen
  • 37. Inhalte (HTML) • Validierung nach • Spans vs. Divs welchem Standard? • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design • IDs vs. Klassen
  • 38. Inhalte (HTML) • Validierung nach • Spans vs. Divs welchem Standard? • Semantisches HTML • Bei HTML5: Welche Schreibweise? (XHTML vs. HTML) • Trennung von Inhalt und Design • IDs vs. Klassen
  • 40. Inhalte (CSS) • Inline CSS verbieten
  • 41. Inhalte (CSS) • Inline CSS verbieten • Vor !important warnen
  • 42. Inhalte (CSS) • Inline CSS verbieten • Vor !important warnen • Hinweis auf den Umgang mit dem Internet Explorer
  • 43. Inhalte (CSS) • Inline CSS verbieten • Vor !important warnen • Hinweis auf den Umgang mit dem Internet Explorer • Schreibweise von Selektoren, Eigenschaften und Werten
  • 44. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Hinweis auf den Umgang mit dem Internet Explorer • Schreibweise von Selektoren, Eigenschaften und Werten
  • 45. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang mit dem Internet Explorer • Schreibweise von Selektoren, Eigenschaften und Werten
  • 46. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren • Schreibweise von Selektoren, Eigenschaften und Werten
  • 47. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren • Schreibweise von • ggf. zu verwendende Selektoren, Frameworks Eigenschaften und Werten
  • 48. Inhalte (CSS) • Inline CSS verbieten • Kommentare • Vor !important warnen • Verwendung von CSS3 • Hinweis auf den Umgang • ggf. Infos zur mit dem Internet Verwendung von CSS Explorer präprozessoren • Schreibweise von • ggf. zu verwendende Selektoren, Frameworks Eigenschaften und Werten • ggf. Umgang mit mobilen Endgeräten
  • 50. Inhalte (JavaScript) • Schreibweisen
  • 51. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes
  • 52. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes • Standards für Kommentare
  • 53. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes • Standards für Kommentare • JS Code Placement
  • 54. Inhalte (JavaScript) • Schreibweisen • Schützen des Globalen Scopes • Standards für Kommentare • JS Code Placement • Zu verwendende Vergleichsoperatoren
  • 55. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen Scopes • Standards für Kommentare • JS Code Placement • Zu verwendende Vergleichsoperatoren
  • 56. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für Kommentare • JS Code Placement • Zu verwendende Vergleichsoperatoren
  • 57. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für • ggf. Infos zu Kommentare jQuery.noConflict() • JS Code Placement • Zu verwendende Vergleichsoperatoren
  • 58. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für • ggf. Infos zu Kommentare jQuery.noConflict() • JS Code Placement • Fehlervermeidung (JSHint vs. JSLint) • Zu verwendende Vergleichsoperatoren
  • 59. Inhalte (JavaScript) • Schreibweisen • eval is evil • Schützen des Globalen • Zu verwendende Scopes Frameworks • Standards für • ggf. Infos zu Kommentare jQuery.noConflict() • JS Code Placement • Fehlervermeidung (JSHint vs. JSLint) • Zu verwendende Vergleichsoperatoren • ggf. Anhang mit Best Practices
  • 60. Tools
  • 61. Tools • JSHint: http://www.jshint.com/about • Sonar: http://www.sonarsource.org • PMD: http://pmd.sourceforge.net • Checkstyle: http:// checkstyle.sourceforge.net
  • 62. Das wars ; ) Fragen? Twitter: @mkuehnel E-Mail: mail@michael-kuehnel.de

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n