Par Khaled DJEBLOUN<br />
Khaled DJEBLOUN<br />Artisan web !<br />Book : Djebloun.com<br />kdjebloun@gmail.com<br />Twitter : @djebloun<br />
Webdesign<br />Définition !<br />
« Le web design désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’ar...
Webdesigner<br />Ou plus tôt, ce que nous <br />ne sommes pas<br />
<ul><li> Intégrateur
 Développeur
 Infographe
 Webmaster
 Ergonome
 Et surtout pas un artiste !</li></li></ul><li>Le Webdesigner<br />«  Designer ayant des notions  en : infographie, Intégr...
Le Webdesign<br />C’est aussi des tendances<br />
Les tendances<br />
<ul><li> Fan de photoshop !
 Maquette
 Design
 Conception
 Effet
 … Graphisme</li></li></ul><li>Pas de panique !<br />On parlera de HTML5/CSS3<br />Je vous promais.<br />
<ul><li> Fan de notepad ++
 HTML
 CSS
 JavaScript (Jquery, prototype … )
Php/MySql
Graphisme</li></li></ul><li>
Webdesign/<br />Front end Code<br />         Incompatible<br />mais complémentaire<br />
Front end Code<br />
Pour résumé …<br />HypertextMarkupLanguage<br />Cascading Style Sheets<br />HTML<br />CSS<br />Structure <br />d’informati...
Upcoming SlideShare
Loading in …5
×

HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)

2,755
-1

Published on

HTML 5, CSS3

Published in: Design
1 Comment
1 Like
Statistics
Notes
  • c'est une nouveauté aussi les fautes d’orthographe ? wella ça rentre dans le cadre du Web 2.0 ?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,755
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
78
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)

  1. 1. Par Khaled DJEBLOUN<br />
  2. 2. Khaled DJEBLOUN<br />Artisan web !<br />Book : Djebloun.com<br />kdjebloun@gmail.com<br />Twitter : @djebloun<br />
  3. 3. Webdesign<br />Définition !<br />
  4. 4. « Le web design désigne la conception de l'interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web »<br />Wikipedia France<br />
  5. 5. Webdesigner<br />Ou plus tôt, ce que nous <br />ne sommes pas<br />
  6. 6. <ul><li> Intégrateur
  7. 7. Développeur
  8. 8. Infographe
  9. 9. Webmaster
  10. 10. Ergonome
  11. 11. Et surtout pas un artiste !</li></li></ul><li>Le Webdesigner<br />«  Designer ayant des notions en : infographie, Intégration, développement, webmastering et aussi en ergonomie  »<br />Moi-même <br />
  12. 12. Le Webdesign<br />C’est aussi des tendances<br />
  13. 13. Les tendances<br />
  14. 14. <ul><li> Fan de photoshop !
  15. 15. Maquette
  16. 16. Design
  17. 17. Conception
  18. 18. Effet
  19. 19. … Graphisme</li></li></ul><li>Pas de panique !<br />On parlera de HTML5/CSS3<br />Je vous promais.<br />
  20. 20. <ul><li> Fan de notepad ++
  21. 21. HTML
  22. 22. CSS
  23. 23. JavaScript (Jquery, prototype … )
  24. 24. Php/MySql
  25. 25. Graphisme</li></li></ul><li>
  26. 26. Webdesign/<br />Front end Code<br /> Incompatible<br />mais complémentaire<br />
  27. 27. Front end Code<br />
  28. 28. Pour résumé …<br />HypertextMarkupLanguage<br />Cascading Style Sheets<br />HTML<br />CSS<br />Structure <br />d’information<br />Mise en forme<br />
  29. 29. Pause gourmandise<br />HTML4, XHTML … /CSS<br />
  30. 30. Pause gourmandise<br />HTML5/CSS<br />
  31. 31. L’innovation HTML5<br /><ul><li>Un web sémantique
  32. 32. Plate-forme de développement à part entière
  33. 33. Le navigateur sera l'application, HTML5 le système d'exploitation</li></li></ul><li>L’innovation css3<br />Moins d’image, <br /> plus de Code <br />Réduire les coups de maintenance<br />
  34. 34. HTML5 : les nouveautés<br /><ul><li>Doctype : <!DOCTYPE html>
  35. 35. Nouvelles balises : section, article, header, footer, audio, video …
  36. 36. Api’s : Canvas, Web Forms 2.0, Drag&Drop … </li></li></ul><li>CSS3 : les nouveautés<br /><ul><li>border-radius
  37. 37. La gestion de l'opacité
  38. 38. De la P.A.O. sur le Web avec column-width, column-gap.
  39. 39. Les polices exotiques avec @font-face
  40. 40. Les dégradés avec gradient </li></li></ul><li>IE 6 Dans tous ça !<br />En Algérie environ 11% des internautes utilise IE6<br />Source : Google Analytics Joowala.com<br />
  41. 41. Flash <br />Vs<br />HTML5<br />
  42. 42. Flash <br />Vs<br />HTML5<br />
  43. 43. Se poser des questions …<br /><ul><li>Le R.O.I. (quelle solution est la plus viable en terme de coûts de développement / intégration / maintenance ?) ;
  44. 44. L’expérience utilisateur que vous allez proposer à vos visiteurs (qui se moquent éperdument de la technologie employée)</li></li></ul><li>Pour conclure<br />Les technos sont à notre service au service de l’utilisateur; Un bon choix technologique tout en prenant compte des contraintes/avantages de chaque solution donnera plus d’élant à vos projets web. <br />
  45. 45. Merci pour votre attention<br /><Questions><br /><Réponses><br />DJEBLOUN.COM<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×