Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

NL Front-end Guidelines (HTML,CSS,Javascript)

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Cargando en…3
×

Eche un vistazo a continuación

1 de 40 Anuncio
Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (14)

Similares a NL Front-end Guidelines (HTML,CSS,Javascript) (20)

Anuncio

Más reciente (20)

NL Front-end Guidelines (HTML,CSS,Javascript)

  1. 1. 2012 Frontend Guidelines visie op semantiek, techniek structuur en werkwijze
  2. 2. Frontend Guidelines @mathijsdejong – Frontend Purist nl.linkedin.com/in/dejongmathijs twitter.com/#!/mathijsdejong onbeperktmedia.nl “ Zeg wat je bedoelt, doe wat je zegt ”
  3. 3. Frontend Guidelines Wat te verwachten? • Handrijkingen: ontwikkel ZELF een visie • Pakket argumenten en best practices anno 2012 • Update omtrent ontwikkelingen HTML5, CSS3 • “Footprint”  Uniformiteit Doel: Vind balans tussen guidelines (regels) en pragmatisch denken
  4. 4. Frontend Guidelines Workshop topics Is: Is niet: • Semantiek en HTML5, DOM • Handleiding HTML • CSS3 in 2012 • Handleiding Javascript OOP • Progressive Enhancement • Hapklare brokken • Modulair / Scalable / Re-Usable • Responsive vs Adaptive – Mobile First • Native Javascript vs jQuery • Performance • Styleguides • Frontend Standards Guidelines Document • Tools en Resources • Follow @people twitter
  5. 5. Frontend Guidelines 2012 Frontend Developer “Tasks” • HTML(5) • CSS • Images (GIF, JPEG, PNG, SVG, Scalable) • Canvas • Video / Audio • Webfonts • Javascript • DOM API‟s • WebGL • Devices 2002 HTML‟er Tasks: • HTML • CSS • Images (GIF,JPEG) • Javascript (low level) • Browsers
  6. 6. Frontend Guidelines Stelling • Visual Design moet pixel-perfect zijn in elke browser
  7. 7. Frontend Guidelines Semantiek Wat is semantiek?
  8. 8. Frontend Guidelines Semantiek is niet belangrijk “Het werkt toch wel” “Browsers zijn net mensen – ze interpreteren”
  9. 9. Frontend Guidelines Semantiek is niet belangrijk
  10. 10. Frontend Guidelines Communicatie Een afspraak om met elkaar te kunnen praten (mens-mens, mens-machine, machine-machine) Semantiek = Betekenisvolle en duidelijke inhoud
  11. 11. Frontend Guidelines MVC Frontend Model View Controller interpretatie HTML: Model CSS: View Javascript: “Controller” HTML vertegenwoordigt data model Markup Language “Aanbrengen van structuur in complexe documenten” Scheiding Inhoud, Opmaak en Gedrag HTML: Inhoud CSS: Opmaak, Animaties, Visueel Gedrag Javascript: Inhoud, (Rijke) Opmaak, (Rijke) Animaties, Visueel Gedrag, Logica
  12. 12. Frontend Guidelines HTML elementen zonder betekenis div span table canvas (HTML5) Geef betekenis door: class attribute Beschrijf inhoud, niet vorm Maar… Class = “” • CSS • Javascript • State
  13. 13. Frontend Guidelines Class of ID <div id=“” /> Meestal gegenereerd vanuit een backend taal (maar ook XSLT) Unieke identifier voor een element dus: komt 1x voor Dynamische elementen “Instantie van”  class “Speficiek component”  id
  14. 14. Frontend Guidelines HTML5 DocType + Elementen HTML5: “semantic web” (X)HTML 1.1 “visual web” * 2001 † 2010 HTML5 blijft voortdurend „under construction‟ • “The best closest thing” • Browsers volgen de Recommendation • Gebouwd op de blijvende ontwikkeling van het web
  15. 15. Frontend Guidelines HTML5: What have we done
  16. 16. Frontend Guidelines HTML5: What have we done Thx, MS Word…
  17. 17. Frontend Guidelines HTML5 Nieuwe “semantische” elementen • article • section • header • footer • mark • aside • meter • audio • nav • canvas • output • details • progress • figcaption • figure • summary • time • video • hgroup
  18. 18. Frontend Guidelines HTML5 Tags vernieuwd • <u> - unarticulated • <i> - alternate voice or mood • <b> - extra attention without extra importance • <em> - emphasis • <strong> - importance • Betekenis Headings (h1…h6): • Geen meerdere H1‟s • article h1, article h1, section h3 • Content Level dependent headings • Geen “page” headings
  19. 19. Frontend Guidelines Best Practices HTML(5) „Model‟ • Class: omschrijf inhoud, niet vorm • ARIA roles (WAI-ARIA) • INPUT types (email, color, date, range, …) • Content = King: relevant content first (nav / header?) • “divitis” / “classitis” • div‟s niet toevoegen voor design • niet voor alle elems een className • Progressive Enhancement: pure HTML fallback (AJAX) • Inline documentatie
  20. 20. Frontend Guidelines Stelling Formulieren: Horizontale groepen velden als UL LI is beter dan DIV's
  21. 21. Frontend Guidelines CSS3 in 2012 • Property Support? • caniuse.com/#cats=CSS • css3test.com • lea.verou.me  • Webkit (Chrome) eats CSS3! (experimental) • Animaties, animaties, animaties • Vermijd „vendor prefixes‟ (webkit- / mox- ) • CSS3 is niet stable • check altijd de Specification W3.org/TR/CSS/#css3 • Kortom: • Gebruik verstandig: only implemented features Altijd „fallback‟ (PNG/SVG/Javascript) voor IEx/FF/Mobile
  22. 22. Frontend Guidelines Best Practices CSS • Structuur: • Reset / Normalize • Blueprint • Typografie • Globale elementen (common) • Componenten • Media queries? • IE - fixes • Inline documentatie • Reset vs Normalize CSS • Reset: 0‟ing (remove ALL default styling) • Normalize: Level out (consistent) default styling •  Geen standaard design? Reset • Inhoudsopgave (grote) CSS files • Shorthand CSS properties (margin/padding: TRouBLe) • 0 appels, 0 peren, 0 px === 0 dus: geen units • „Hack free‟ (IE x specific CSS files) • Propery volgorde: box-model-convention (?) • Eigen inzicht: logica
  23. 23. Frontend Guidelines Progressive Enhancement “Focus op Content” Zet Javascript, CSS, Images, etc uit. Is je toepassing nog steeds bruikbaar?
  24. 24. Frontend Guidelines Progressive Enhancement praktisch: • AJAX fallback: Link naar „isolated‟ content pagina • Denk in Layers • Basis layer (content) ook stylen en toegankelijk bouwen • Complexe UI elementen gebouwd met Javascript hebben altijd een „basic‟ equivalent • “Beloon” de user met een “rijkere ervaring” Dus: HTML HTML + Images HTML + Images + CSS (2.1) HTML + Images + CSS (2.1) + Javascript HTML + Images + CSS (2.1) + Javascript + CSS3 HTML + Images + CSS (2.1) + Javascript + CSS3 + HTML5 „features‟
  25. 25. Frontend Guidelines Modular / Scalable / Re-Usable HTML+CSS • Bouw componenten op basis van inhoud • Vermijd Presentational Class names • Denk in “states” (modus varianten van een component) • Generated / iteratief (houd je .Net developer te vriend!) • class=“module article-list” of “component article-list” • “module + module-name + content-variant / state” • Denk aan CSS inheritance en specificity • SHTML / server side includes (Apache/IIS) binnen templates • Onderhoudbare CSS met Frameworks: • SMACSS • Compass CSS • Blueprint CSS • OOCSS • “Skinnable” / “Theming” • Base Skin • Theme Skins • Theme varianten (“theme-1” (semantic?)
  26. 26. Frontend Guidelines Modular / Scalable / Re-Usable HTML+CSS Blokken en Grids • Columns / Rows / Gridmaten (units) • .col.size1of4”  niet heel flexibel (vast stramien) • .col.single / .col.double / .col.triple  flexibel, vast stramien • .col.size1 / .col.sizeX -> flexibel, dynamisch grid • Responsive Layouts: fluid grids • Nested Columns: inheritance / over-ruling • Float VS inline-block • CSS Grid Frameworks (960 / Yui CSS Grid Builder / Blueprint)
  27. 27. Frontend Guidelines Modular / Scalable / Re-Usable HTML+CSS Re-Usable CSS • Verzamel alle veelgebruikte CSS (+fixes) in een (eigen) Framework • Bouw je „Styleguide‟ met deze CSS, specifieke aanpassingen opnemen • Documenteer globale én specifieke blokken CSS • Duidelijke CSS Selectors (specificity) & nested componenten • Eenduidige stijl classNames en notatie • Laat niet zien dat er 3 developers code hebben geschreven • Single line selectors / multiline / cascading • Orphan Components • Niet afhankelijk van parent of layout • Uitzonderingen mogelijk als specifieke rules • Als een „los‟ component  outer layout breekt niet (overflow: hidden!) • Vermijd _vendor-prefixes (toekomstig support)
  28. 28. Frontend Guidelines Responsive VS Adaptive
  29. 29. Frontend Guidelines Stelling • Responsive Design moet je altijd implementeren
  30. 30. Frontend Guidelines Responsive: CSS3 Media Queries • CSS Render Engine: • width / height (browser window object) • device width / height • orientation (landscape/portrait (iOS !== Android) • resolution (dpi) (retina “the New iPad”) • Semi-fluid design • fluid grids (= minder queries) • Detecteer “devices” Desktop + Tablet + Mobile • Werkwijze: • Mobile First (beter: Structured Content First) • query „min-width / max-width‟ specifieke styles • Globale selectors • “One size fits all –fix” : Complexe designs vereisen oa JS / Conditional CSS • Gebruikers „dwingen‟ je om enige vorm van Responsive te
  31. 31. Frontend Guidelines Javascript: jQuery VS Native • Feiten: • jQuery file size: (1.7 .min.js) = 91kB • jQuery hosted (Google/MSN/…) vaker gecached • Moderne browsers kunnen meer „native‟ • Waarom is jQuery (e.a.) ontstaan? • CSS DOM Selectors support • Browser verschillen uitvlakken (AJAX/DOM/Styles/Manipulatie) • Makkelijk Methods / Properties (“Write Less, Do More”) • JS Animaties + easing • Plugins / Community • Native Javascript • 2012: Minder browser verschillen in HTML5/ EScript implementatie • jQuery Nadelen: • Expensive jQuery {Object} • Geen OO Design Patterns (zie plugin authoring) • Trager dan Native JS
  32. 32. Frontend Guidelines Javascript: jQuery VS Native • $(DOMElem) CSdocument.querySelectorAll(DOMElem) • Support: Moderne browsers (incl IE8 (CSS2.1)) • Native For loops VS $.each() • OOP Design Patterns wél te combineren met jQuery • “Is het gewicht van jQuery {} het resultaat waard?” http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/ $('#container').find('li');
  33. 33. Frontend Guidelines Stelling • Native Javascript / HTML5 API's zijn sneller dan jQuery
  34. 34. Frontend Guidelines Performance HTML • Minimum aantal HTML elementen • Scheiding Inhoud, Opmaak, Gedrag • Verwijder <!– comments --> in Production HTML • CSS includes boven in <head> CSS • Snelheid in CSS Rendering: • #id Selectors • elem.className (CSS DOM Traversing) • Minify / Combineer CSS files (Production) • Voorkom „dubbele declaraties‟ (optimize Base + Skin) Javascript • Script includes onder in <body> • Laadt Hosted Libraries (Google/MSND) • Deferred / Lazy loading (a-synchroon, non-blocking) • Minify / Compress JS files • Geen DOM / Style modifcaties bij DOM Traversing • Null‟ing / Deleting Objects (Garbage Cleaning)
  35. 35. Frontend Guidelines Performance CSS / Images • Spriten in PNG • SVG voor Scalable / Gradients • Compress JPEG / PNG / GIF • Webfont Glyphs voor Scalable Iconen • Cache Control • Moderne Browsers: CSS3 / Fallback ONLY: Images • Gebruik de Network / Timeline in Firebug / Dev Toolbar • Gebruik timeOuts voor AJAX calls (jsonP is problematisch) • YSlow (Yahoo) • Google Page Speed
  36. 36. Frontend Guidelines Stelling • CSS Image Sprites: Automatisch of Handwerk?
  37. 37. Frontend Guidelines Web Styleguides Kwaliteitscontrole / Onderhoudbaarheid Proof of Concept: • Layout • Grids • Pagina Typen • Componenten + States • “Real World” Content • AJAX? Dummy content of jQuery Mockjax Plugin (mocking requests) Inspiratie • github • Starbucks • https://gimmebar.com/loves/maban/collection/front-end-styleguides
  38. 38. Frontend Guidelines Web Styleguides
  39. 39. Frontend Guidelines Standards Guidelines Document Interne brede development standaarden vastgelegd • Javascript Frameworks: API documentatie • Coding Conventions • HTML / CSS Structuren • Proof of Concepts • Visie • Kennisoverdracht Inspiratie • BBC • Mozilla • Opera • GitHub • Isobar
  40. 40. Frontend Guidelines Tools & Resources http://bit.ly/HeMmiI “Let me Google That for You” Achtergrond artikelen: • AlistApart • Smashing Magazine • Fronteers • Mozilla / Opera / MSDN Developer Docs • DiveInToHTML5.info • .Net Magazine / Web Designer (NL/EN) Specifieke issues • StackOverflow • HTML5Doctor.com • Fronteers Conf (download slides)

Notas del editor

  • HR als horizontal rule

×