Your SlideShare is downloading. ×
0
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung

1,779

Published on

Präsentation im Rahmen des ersten Marburger Webmontags (http://webmontag.de/location/marburg/index). …

Präsentation im Rahmen des ersten Marburger Webmontags (http://webmontag.de/location/marburg/index).

Diese Präsentation beantwortet die folgenden Fragen:
- Für wen sind Coding Guidelines sinnvoll?
- Warum?
- Was sollte enthalten sein?

Des weiteren werden Links zu Tools zur Überprüfung der Einhaltung genannt.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,779
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Frontend Coding GuidelinesEin 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
    • 10. Sinnvoll für
    • 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
    • 15. Warum?
    • 16. Warum?• Qualität fördern:
    • 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
    • 22. Inhalte (Allgemein)
    • 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
    • 32. Inhalte (HTML)
    • 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
    • 39. Inhalte (CSS)
    • 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
    • 49. Inhalte (JavaScript)
    • 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: @mkuehnelE-Mail: mail@michael-kuehnel.de

    ×