Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Séminaire
Web
eaa – 28.04.2017 session 1 / 5
Manuel Schmalstieg
Manuel
Schmalstieg
HEAD
ERACOM
cours-web.ch
CSS
Un rapide état des lieux
1996
contenu
≠
présentation
CSS1 =
essentiellement les
propriétés de rendu
typographique du
texte
1998
CSS 2 =
~ 70 propriétés
supplémentaires
CSS3
CSS 3 =
modules
indépendants
p.ex.
WebFonts,
Media Queries,
Flexbox,
Backgrounds &
Borders
2010Révolution CSS3
CSS Bling
CSS Bling
• Les dégradés de couleurs
• Les ombres portées (box-shadow)
• L’opacité (opacity)
• Les bords arrondis (border-...
Do websites need to
look exactly the
same in every
browser?
http://dowebsites

needtolookexactly

thesameinevery

browser.com/
Do websites need to
be experienced
exactly the same in
every browser?
http://dowebsites
needtobeexperienced
exactlythesamein
everybrowser.com/
Webfonts
Rencontres de
Lure (2012)
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ( ; : ? ! $ ¢ £ ¥ & * ) { ö ü å ø ç }
a b c d e f g h i j k l m n o p q r s t u v w x y z
1 2 3 4 5 6 7 8 9 0 ( ; : ? ! $ ¢ £ ¥ & * ) { ö ü å ø ç }
Metaflop,
Metapolator,
Prototypo
OSP.kitchen
Mise en page & CSS
2000 - 2004 :
table  float
Responsive Web
Design
Concepts et implications
CSS Grid Systems
Flexbox
“Working Draft”
(depuis 2009)

 

“Candidate
Recommendation”
Flexbox
bien supporté
par les
navigateurs en
2016!
Flexbox
GSS
Grid Style Sheets
GSS
Grid Style Sheets
GSS is a CSS
preprocessor & JS
runtime that
harnesses
Cassowary.js
Technologie liée
à la startup
The Grid
Slogan:
“The Grid Is
The Website
Of The Future:
It Builds Itself”
CSS Grid Layout
CSS Grid Layout
proposé en 2011 par
Microsoft
CSS Grid Layout
implémenté
à fins de test
dans IE 10 et 11
CSS Grid Layout
repris par le W3C,
en cours de
développement
CSS Grid Layout
cours-web.ch
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Seminaire web EAA 2017
Upcoming SlideShare
Loading in …5
×

Seminaire web EAA 2017

72 views

Published on

Cours du 28 avril 2017, http://www.eaa-la-chaux-de-fonds.ch/

Published in: Design
  • Be the first to comment

  • Be the first to like this

Seminaire web EAA 2017

  1. 1. Séminaire Web eaa – 28.04.2017 session 1 / 5 Manuel Schmalstieg
  2. 2. Manuel Schmalstieg HEAD ERACOM
  3. 3. cours-web.ch
  4. 4. CSS Un rapide état des lieux
  5. 5. 1996
  6. 6. contenu ≠ présentation
  7. 7. CSS1 = essentiellement les propriétés de rendu typographique du texte
  8. 8. 1998
  9. 9. CSS 2 = ~ 70 propriétés supplémentaires
  10. 10. CSS3
  11. 11. CSS 3 = modules indépendants
  12. 12. p.ex. WebFonts, Media Queries, Flexbox, Backgrounds & Borders
  13. 13. 2010Révolution CSS3
  14. 14. CSS Bling
  15. 15. CSS Bling • Les dégradés de couleurs • Les ombres portées (box-shadow) • L’opacité (opacity) • Les bords arrondis (border-radius) • Les fontes web (@fontface)
  16. 16. Do websites need to look exactly the same in every browser?
  17. 17. http://dowebsites
 needtolookexactly
 thesameinevery
 browser.com/
  18. 18. Do websites need to be experienced exactly the same in every browser?
  19. 19. http://dowebsites needtobeexperienced exactlythesamein everybrowser.com/
  20. 20. Webfonts
  21. 21. Rencontres de Lure (2012)
  22. 22. a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ( ; : ? ! $ ¢ £ ¥ & * ) { ö ü å ø ç }
  23. 23. a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 ( ; : ? ! $ ¢ £ ¥ & * ) { ö ü å ø ç }
  24. 24. Metaflop, Metapolator, Prototypo
  25. 25. OSP.kitchen
  26. 26. Mise en page & CSS
  27. 27. 2000 - 2004 : table  float
  28. 28. Responsive Web Design Concepts et implications
  29. 29. CSS Grid Systems
  30. 30. Flexbox
  31. 31. “Working Draft” (depuis 2009)
  
 “Candidate Recommendation” Flexbox
  32. 32. bien supporté par les navigateurs en 2016! Flexbox
  33. 33. GSS Grid Style Sheets
  34. 34. GSS Grid Style Sheets
  35. 35. GSS is a CSS preprocessor & JS runtime that harnesses Cassowary.js
  36. 36. Technologie liée à la startup The Grid
  37. 37. Slogan: “The Grid Is The Website Of The Future: It Builds Itself”
  38. 38. CSS Grid Layout
  39. 39. CSS Grid Layout proposé en 2011 par Microsoft
  40. 40. CSS Grid Layout implémenté à fins de test dans IE 10 et 11
  41. 41. CSS Grid Layout repris par le W3C, en cours de développement
  42. 42. CSS Grid Layout
  43. 43. cours-web.ch

×