1 / 25

Pas à pas: HTML5 et CSS3 Les bases pour des sites simples

Pas à pas: HTML5 et CSS3 Les bases pour des sites simples. Christian Pagé CERFACS, 8 janvier 2013. Tendances actuelles Web. Design simple mais professionnel : focus sur l'information Guides graphiques simples et discrets Schéma de couleurs

ailsa
Download Presentation

Pas à pas: HTML5 et CSS3 Les bases pour des sites simples

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pas à pas: HTML5 et CSS3Les bases pour des sites simples Christian Pagé CERFACS, 8 janvier 2013

  2. Tendancesactuelles Web • Design simple maisprofessionnel: focus surl'information • Guides graphiques simples et discrets • Schéma de couleurs • Multi-plateformes, multi-résolutions • Rapidité, simplicité

  3. Pré-requis Site du zéro http://www.siteduzero.com/tutoriel-3-13475-comment-fait-on-pour-creer-des-sites-web.html

  4. Le design du Web en exemples4 "époques" • 1993

  5. Le design du Web en exemples4 "époques" • 1995

  6. Le design du Web en exemples4 "époques" • 1998

  7. Le design du Web en exemples4 "époques" • 2000

  8. Le design du Web en exemples4 "époques" • 2010

  9. Référence pour les tendancesWeb design http://www.webdesignertrends.com/2012/01/tendances-du-webdesign-pour-2012/

  10. Le choix des couleurs • Site de référence http://colorschemedesigner.com • Déterminer un schéma de couleurs • Couleursapparentées • Couleurscomplémentaires • Tons foncésou pastels • Visualisation de pages web type

  11. Les nouveaux standards • IN • HTML 5 • CSS 3 • Javascript • (Java et PHP) Serveur • Géolocalisation • OUT • HTML 3 et 4 • XHTML • Flash • Java Client

  12. Le "Hello World" du HTML5/CSS3 <!DOCTYPE html> <html> <head> <title>Hello World</title> <link rel="css/stylesheet.css"> </head> <body> <h1>Hello world</h1> </body> </html>

  13. Choisir un bon éditeur......

  14. Vérification de la conformité • HTML: W3C Validator http://validator.w3.org • CSS: W3C CSS Validator http://jigsaw.w3.org/css-validator/

  15. Pourquoi le CSS? • Séparationcontenu / présentation • Multi-résolutions • Menus • Modifier l'aspect d'un site en quelquessecondes • Interactivité simple sans Java ouJavascript • Menus • Liens • Affichage de blocs

  16. La puissance du CSSExemples • Interactivité simple: liens a:link {color:#FF0000;}      /* unvisited link */ a:visited {color:#00FF00;}  /* visited link */ a:hover {color:#FF00FF;}  /* mouse over link */ a:active {color:#0000FF;}  /* selected link */

  17. La puissance du CSSExemples • Interactivité simple: menus verticaux

  18. Les blocsLes concepts de base • Le tag "div" et sespropriétés http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

  19. Les bonnespratiques"Layout" • Les pages "fluides", "semi-fluides", élastiques... http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

  20. Les bonnespratiques"Layout" • Les pages "semi-fluides"

  21. Un premier site simpleAu travail!! • Premier "template" • Unefeuille de style CSS, avec quelques feedbacks utilisateur • Deuxfichiers html, un pour la version françaiseindex_fr.html, l'autre pour la version anglaiseindex_en.html, + lien symbolique • Quelques images • Un menu simple vertical • Un bandeau header, un bandeau footer • Un espace central pour l'information • Semi-fluide : taille fixe menu vertical gauche et taillemaximaleespace central

  22. Un premier site simpleAu travail!! • Déterminer les couleurs • Élaborer la structure • L'agencement des blocs • Établir la navigation

  23. Un premier site simpleAu travail!! • Ajouter des "feedbacks" àl'utilisateur • Aider l'utilisateurà se repérer • L'affichagede l'information • Ergonomie, ergonomie... quandtu nous tiens!

  24. Quelquesméthodes un peu plus avancées • Un menu déroulant CSS • Affichagesur la verticale pour navigateurs de base et robots (google, etc.) • Affichage de blocs interactif <div> avec CSS

  25. Pour aller plus loin • Javascript (client) • Interactivitéavancée (JQuery, qtip, JSON, etc.) • Géolocalisation et plans : OpenStreet et OpenLayers • PHP (serveur) • Codagesimilaire au C • Interprété par le serveuravantd'envoyer le résultat au client • Possibilitéstrèsétendues • Java servlet (serveur)

More Related