Your SlideShare is downloading. ×
  • Like
  • Save
NL Front-end Guidelines (HTML,CSS,Javascript)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 877 views
Published

Visie op semantiek, techniek, structuur en werkwijze anno 2012. …

Visie op semantiek, techniek, structuur en werkwijze anno 2012.
Hoe schrijf je toegankelijke en herbruikbare HTML, CSS en Javascript?
Wat is Modular CSS?
Deze workshop geeft je de argumenten.

Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
877
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

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
  • HR als horizontal rule

Transcript

  • 1. 2012 Frontend Guidelinesvisie op semantiek, techniekstructuur en werkwijze
  • 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. Frontend GuidelinesWat te verwachten?• Handrijkingen: ontwikkel ZELF een visie• Pakket argumenten en best practices anno 2012• Update omtrent ontwikkelingen HTML5, CSS3• “Footprint”  UniformiteitDoel:Vind balans tussen guidelines (regels) en pragmatisch denken
  • 4. Frontend GuidelinesWorkshop topicsIs: 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. Frontend Guidelines2012 Frontend Developer “Tasks”• HTML(5)• CSS• Images (GIF, JPEG, PNG, SVG, Scalable)• Canvas• Video / Audio• Webfonts• Javascript• DOM API‟s• WebGL• Devices2002 HTML‟er Tasks:• HTML• CSS• Images (GIF,JPEG)• Javascript (low level)• Browsers
  • 6. Frontend GuidelinesStelling• Visual Design moet pixel-perfect zijn in elke browser
  • 7. Frontend GuidelinesSemantiekWat is semantiek?
  • 8. Frontend GuidelinesSemantiek is niet belangrijk“Het werkt toch wel”“Browsers zijn net mensen – ze interpreteren”
  • 9. Frontend GuidelinesSemantiek is niet belangrijk
  • 10. Frontend GuidelinesCommunicatieEen afspraak om met elkaar te kunnen praten(mens-mens, mens-machine, machine-machine)Semantiek = Betekenisvolle en duidelijke inhoud
  • 11. Frontend GuidelinesMVC FrontendModel View Controller interpretatieHTML: ModelCSS: ViewJavascript: “Controller”HTML vertegenwoordigt data modelMarkup Language“Aanbrengen van structuur in complexe documenten”Scheiding Inhoud, Opmaak en GedragHTML: InhoudCSS: Opmaak, Animaties, Visueel GedragJavascript: Inhoud, (Rijke) Opmaak, (Rijke) Animaties, VisueelGedrag, Logica
  • 12. Frontend GuidelinesHTML elementen zonder betekenisdivspantablecanvas (HTML5)Geef betekenis door:class attributeBeschrijf inhoud, niet vormMaar…Class = “”• CSS• Javascript• State
  • 13. Frontend GuidelinesClass of ID<div id=“” />Meestal gegenereerd vanuit een backend taal (maar ook XSLT)Unieke identifier voor een elementdus: komt 1x voorDynamische elementen“Instantie van”  class“Speficiek component”  id
  • 14. Frontend GuidelinesHTML5 DocType + ElementenHTML5: “semantic web”(X)HTML 1.1 “visual web” * 2001 † 2010HTML5 blijft voortdurend „under construction‟• “The best closest thing”• Browsers volgen de Recommendation• Gebouwd op de blijvende ontwikkeling van het web
  • 15. Frontend GuidelinesHTML5: What have we done
  • 16. Frontend GuidelinesHTML5: What have we done Thx, MS Word…
  • 17. Frontend GuidelinesHTML5 Nieuwe “semantische” elementen• article• section• header• footer• mark• aside• meter• audio• nav• canvas• output• details• progress• figcaption• figure• summary• time• video• hgroup
  • 18. Frontend GuidelinesHTML5 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. Frontend GuidelinesBest 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. Frontend GuidelinesStellingFormulieren: Horizontale groepen velden als UL LI is beter dan DIVs
  • 21. Frontend GuidelinesCSS3 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. Frontend GuidelinesBest 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. Frontend GuidelinesProgressive Enhancement “Focus op Content” Zet Javascript, CSS, Images, etc uit. Is je toepassing nog steeds bruikbaar?
  • 24. Frontend GuidelinesProgressive 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:HTMLHTML + ImagesHTML + Images + CSS (2.1)HTML + Images + CSS (2.1) + JavascriptHTML + Images + CSS (2.1) + Javascript + CSS3HTML + Images + CSS (2.1) + Javascript + CSS3 + HTML5 „features‟
  • 25. Frontend GuidelinesModular / 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. Frontend GuidelinesModular / Scalable / Re-Usable HTML+CSSBlokken 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. Frontend GuidelinesModular / Scalable / Re-Usable HTML+CSSRe-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. Frontend GuidelinesResponsive VS Adaptive
  • 29. Frontend GuidelinesStelling• Responsive Design moet je altijd implementeren
  • 30. Frontend GuidelinesResponsive: 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. Frontend GuidelinesJavascript: 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. Frontend GuidelinesJavascript: 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. Frontend GuidelinesStelling• Native Javascript / HTML5 APIs zijn sneller dan jQuery
  • 34. Frontend GuidelinesPerformanceHTML• 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. Frontend GuidelinesPerformanceCSS / 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. Frontend GuidelinesStelling• CSS Image Sprites: Automatisch of Handwerk?
  • 37. Frontend GuidelinesWeb StyleguidesKwaliteitscontrole / OnderhoudbaarheidProof 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. Frontend GuidelinesWeb Styleguides
  • 39. Frontend GuidelinesStandards Guidelines DocumentInterne brede development standaarden vastgelegd• Javascript Frameworks: API documentatie• Coding Conventions• HTML / CSS Structuren• Proof of Concepts• Visie• KennisoverdrachtInspiratie• BBC• Mozilla• Opera• GitHub• Isobar
  • 40. Frontend GuidelinesTools & Resourceshttp://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)