Front-end development - The basic flow 2016

Basic flow of front-end development within Aviva Solutions workflow.

Transcript

1. FRONT-END DEVELOPMENT Jeffrey de Graaf
2. “ Als je jezelf als vrouw een beetje leuk kunt stylen, dan kun je ook websites bouwen. - Capgemini IT Woordvoerdster
4. FRAMEWORKS & PLUGINS ➤ Helpen de content managers
 ➤ Structuur
 ➤ Open Source getest
 ➤ Snel up-to-speed
5. ONDERDELEN VAN FRONT-END
6. “ To infinity and beyond! -Toy Story 1995
7. ➤ HTML (Document Object Model) ➤ CSS (Cascading Style Sheets) ➤ JavaScript
8. ➤ HTML (Document Object Model) ➤ HTML ➤ XHTML ➤ HTML 5 ➤ CSS (Cascading Style Sheets) ➤ CSS ➤ CSS 3 ➤ JavaScript ➤ EcmaScript 5 / EcmaScript 6 / jQuery
10. HTML ➤ Documentstructuur
 ➤ HTML 5 ➤ Semantisch
 ➤ Input attributes
12. “ Search Engines Love HTML
13. SEMANTISCHE HTML5 ELEMENTEN ➤ <header> – Defines the header of the document or section ➤ <main> – Defines the main content of a document, excluding global items like nav or footer ➤ <nav> – Defines navigation links ➤ <article> – Defines a self-contained piece of content within a document (blog posts, comments, etc.) ➤ <section> – Defines a section within a document ➤ <aside> – Defines content that is aside from main content; should be related to surrounding content ➤ <figure> – Defines self-contained content that is independent (photos, illustrations, videos, etc.) ➤ <mark> – Defines highlighted or important content ➤ <figcaption> – Defines the caption for the figure ➤ <hgroup> – Defines a group of header tags ➤ <footer> – Defines the footer of a document ➤ <time> – Defines the time
14. SCHEMA.ORG <div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/ Person"> Director: <span itemprop="name">James Cameron</span> 
 (born <span itemprop="birthDate">August 16, 1954</span>) </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>
15. HTML5 FORMS ➤ <input type="text" name="name" required> ➤ <input type="url" name="website" required pattern=“https?://.+"> ➤ <input type="number" size="6" name="age" min="18" max="99" value="21">
16. CSS
17. STYLING ➤ CSS = Cascading Style Sheets
 ➤ CSS beschrijft hoe HTML elementen getoond worden
 ➤ CSS maakt het mogelijk om styling voor verschillende elementen te herbruiken
18. https://specificity.keegan.st/
19. SASS ➤ CSS Preprocessor
 ➤ Modules
 ➤ Variables
 ➤ Mixins, functions, extends, placeholder classes
 ➤ D(on’t) R(epeat) Y(ourself)
20. Sass demo time!
21. JAVASCRIPT ➤ Niet te verwarren met Java
22. JAVASCRIPT ➤ Interactie
 ➤ State changes / Ajax calls
 ➤ DOM manipulaties
23. ECMASCRIPT ➤ ECMAScript is de standaard voor scripting languages
 ➤ Talen zoals Javascript zijn gebaseerd op de ECMAScript standaard
 ➤ ECMAScript 5 is voltooid in December 2009, alle laatste versie van de populaire browsers (Chrome, Safari, Firefox, and IE) hebben ES5
 ➤ ES2015 (6) is de laatste versie van ECMAScript
24. JQUERY ➤ Abstractie laag op Javascript / ECMAScript
 ➤ Cross-browser ondersteuning
 ➤ Sizzle engine maakt doorzoekbaarheid DOM eenvoudig
25. Function changeBachground(color) {
 Document.body.style.background = color;
 } Onload=”changeBackground (‘red’);” $ (‘body’) .css (‘background’, ‘#ccc’);
26. JQUERY NADELEN ➤ Sizzle engine performance
 
 ➤ Eenvoud creëert valkuilen ➤ Abstractielaag ➤ Verliest steeds meer waarde door HTML5, CSS3 en ES6