S'il y avait un site et un livre [auteur] de référence francophone à citer, ce serait certainement alsacreations avec le livre css avancée html5 vers CSS3 de Raphaël Goetter : CSS avancée html5 vers CSS3

Ce post n'a donc pas pour but de spoiler ces références, mais plutôt de vous présenter quelques outils & techniques à utiliser dans des intégrations de chartes graphiques (en sachant qu'il y a plusieurs chemins pour un même résultat je laisserai les puristes seul juge de leurs préférences). Ce sera aussi l'occasion pour moi de partager mon expérience en tant que formateur web & vous faire découvrir quelques sites de prédilections.

La théorie c'est bien mais la pratique c'est mieux, que soit pour intégrer votre charte graphique, (re)découvrir les langages xHtml / css2 / css3, ou encore intégrer un site mobile, n'hésitez pas à solliciter une formation intégration xHtml-CSS

Commençons par de la veille technologique, voici une liste des sites ultimes à bookmarker (la liste n'est certainement pas exhaustive) :

- http://www.alsacreations.com/ (la référence incontournable)
- http://www.devzone.fr/
- http://www.smashingmagazine.com/
- http://net.tutsplus.com/

Environnement de travail > tester son site sous différents navigateurs :

- http://spoon.net/browsers/ (émulation, n'est pas fiable à 100%)
- https://addons.mozilla.org/en-US/firefox/addon/ie-tab/ (émulation, n'est pas fiable à 100%)
- http://www.my-debugbar.com/wiki/IETester/HomePage (émulation, n'est pas fiable à 100%)
- http://www.vmware.com/fr/ (machine virtuelle)
- http://www.parallels.com/fr/products/ (machine virtuelle)

WebMobile :

- http://www.appcelerator.com/ (plate-forme de création d'application mobile)
- http://jquerymobile.com/ (plug-in jquery pour décliner votre site web en site mobile)
- http://jqtouch.com/ (plug-in jquery pour décliner votre site web en site mobile)

Scripts / Plug-in jQuery :

- http://jqueryui.com/
- http://ajaxdaddy.com/
- http://net.tutsplus.com/
- http://www.ajaxrain.com/
- http://www.dhteumeuleu.com/
- http://www.webcssdesign.com/


Polices exotiques (compatible IE6+) :

- http://www.google.com/webfonts : permet d'ajouter une police spécifique sur son site web en 2 clics
- http://www.fontsquirrel.com/ : pour récupérer des packs polices compatible multi-navigateurs
- http://www.dafont.com/fr/ : pour télécharger sa police type (.ttf ou .otf) puis générer son pack via fontsquirrel.com

CSS3 (compatible IE6+) :

- http://caniuse.com/ : permet de tester le support d'une propriété CSS3 sur les différents navigateurs
- http://css3.me/ : pour créer en ligne des effets css3
- http://css3pie.com/ : du CSS3 sur ie6+ c'est possible
- http://selectivizr.com/ : des pseudos-classes sur IE6+ avec appui jQuery

HTML5 :

- http://www.apple.com/html5/
- http://videojs.com/ : player vidéo html5
- http://html5gallery.com/category/personal/ : gallery HTML5
- http://html5demos.com/
- https://developer.mozilla.org/en-US/demos/tag/tech:html5/

Compatibilité HTML5/CSS3

- http://fmbip.com/ : permet de tester la compatibilité de son environnement de travail via son adresse ip & son navigateur
- http://html5boilerplate.com/ : template pour une structure HTML5
- http://code.google.com/p/html5shim/ : en avant vers la compatibilité multi-navigateurs
- http://www.initializr.com/ : en avant vers la compatibilité multi-navigateurs

Référencement

- http://on-air.hiseo.fr/
- http://www.webrankinfo.com/
- http://www.abondance.com/
- http://gs.statcounter.com/ : permet entre autre d'avoir des statistiques détaillées des navigateurs utilisés (versions comprises)

Merci pour ce topic Manuel.

Cela fait un moment que l'intégration de balises HTML5 me taraude...
Dans cet optique, pourrait-on envisager de modifier le doctype xHTML d'e-majine en un doctype HTML 5 ?

Les balises mx fonctionneraient-elles toujours ?

Bonjour Guillaume,

Oui tout à fait, il n'y a aucun problème pour modifier le doctype ;) Les balises mx seront bien interprétées. Tu souhaite utiliser quelles fonctionnalités HTML5 ?

@+
Manuel

Moi j'ai une autre question, le joli template HTML 5 que tu m'as montré, sera dispo quand ?

Essentiellement des balises pour les contenus multimédias (canvas, audio, video, etc.).
C'est une bonne nouvelle !

J'apprends qu'il y a un template HTML5 ?!
Dispo quand ?!

Bonjour,

Le modèle de projet HTML5 sera disponible dès la semaine prochaine ;) Vous le retrouverez sur le webo-shop.

Bien à vous.

Bonjour,

Le modèle Html5 est désormais disponible en téléchargement sur le webo-shop : http://webo-shop.medialibs.com/modeles-du-webo-shop/187-modele-html5.html

Vous pouvez consulter directement la démo sur : http://modelehtml5.s4653.medialibs49.atester.fr/

Amicalement

Salut Manuel,
un petit post à propos de PIE.

- Première question, est-ce que PIE est intégré par défaut à e-majine comme l'est par exemple jQuery ?
- Si oui, par quelle url faut-il l'appeler via behavior ?
- Si non, je lis sur ce tuto (paragraphe "Comment faire fonctionner CSS3 Pie ?", j'ai mis une ancre dans l'url) qu'il est conseillé de lancer PIE.php plutôt que PIE.htc, selon les configurations du serveur. Qu'en est-il sur les serveurs principalement utilisés par e-majine, et est-il possible d'appeler directement un fichier .php via un template ou une feuille de style, il serait bien interprété sur e-majine ?

Ça fait beaucoup de questions en fait, mais selon les réponses des unes ou des autres ça supprime les questions suivantes d'elles-même ^^

Merci, à bientôt !

Alexandre,

Pour "déterrer" ce post, CSS3Pie n'est pas directement intégré à e-majine. Le fonctionnement étant plutôt côté client et pas forcément nécessaire pour tout type de projet. Concernant l'appel, effectivement l'appel vers le fichier php est conseillé. J'ai eu l'occasion de tester cette méthode sur un site e-majine (appel du fichier php depuis une feuille de style) et de mémoire cela fonctionner plutôt bien. (le fichier php est tout simplement appelé depuis l'espace FTP)

N'hésites pas à me faire tes retours sur le sujet

A bientôt

[Tutoriel] Apprendre les mises en page CSS

LearnLayout est un mini-site d'apprentissage dédié au positionnement en CSS.

Parfaitement adapté aux débutants (display, modèle de boîte, float, position, inline-block), le tutoriel n'exclut pas les intégrateurs chevronnés puisqu'il aborde des sujets avancés tels que clearfix, box-sizing, media queries, multicolonnes, flexbox et les frameworks CSS.

[Source] http://www.alsacreations.com/outils/lire/1573-learnlayout.html

Ok, merci pour l'info Manuel !
Par contre je sais plus pour quel projet j'avais besoin de ça, du coup j'ai pas encore de retours mais si l'occasion se représente je repasserai me renseigner sur ce topic :)