CreatiQ.fr

Une Communauté

Plus de 4672 membres !

S'inscrire et progresser

Devenir membre sur creatiq.fr

Une recherche ?

Découper et intégrer une maquette de blog

Ce tutoriel a été réalisé en collaboration avec Grafikart. Nous allons créer un blog, avec une partie portfolio, sous la plateforme wordpress. En ce qui me concerne, j'ai réalisé la partie design/découpage et intégration HTML/CSS. La partie Wordpress est disponible chez Grafikart. Les fichiers sources sont disponibles (PSD + HTML / CSS ), il suffit juste de créer un compte et de devenir premium. Les pages sont valides w3c.

54 Commentaires
Billywes
mercredi 23 mars 2011
Super tutoriel comme d'hab !!!!
supprof
jeudi 24 mars 2011
merci pour cet excellent travail complet
vous avez l'air de savoir exactement ce que les gens veulent
JEi
jeudi 24 mars 2011
Merci ^^
Je l'ai réalisé, car il n'y a pas vraiment de tutoriel concernant ce sujet-là, soit ce sont des articles, soit des tutoriels vidéos, mais payant^^. Ici c'est gratuit :)
ethanmtl
mardi 29 mars 2011
exactement ce qu'il me fallait !
ethanmtl
mardi 29 mars 2011
Pour te rappeler des coordoonnées X ou Y tu tire un trait en premier de gauche à droite ( dans ta tête) et c'est toujours le (x) abscisse et de haut en bas c'est toujours le (y)

Mémo technique qui marche toujours
JEi
mardi 29 mars 2011
@Ethanmtl

Merci pour le conseil :)
ethanmtl
mardi 29 mars 2011
De rien mon cher et merci à toi pour le développement single line, par contre le tuto grafrikart n'est pas trouvable même avec abonnement ?
Quant au CSS, je suis agréablement surpris de voir que tu développes tout en .class et non en #id ? Est-ce volontaire ? Pour ma part les éléments comme wrap header content footer sont toujours en #id et les mise en forme internes en .class.... Bref, chacun son style mais ta façon me paraît vraiment plus ergonomique
JEi
mardi 29 mars 2011
@Ethanmtl

Yes j'utilise que les .class, et les #id pour du Javascript/jQuery, une question d'habitude.
En ce qui concerne la partie Wordpress de Grafikart, elle arrive d'ici la fin de la semaine prochaine, un article est prévu sur son blog :)
Xeron
samedi 02 avril 2011
Salut, très bon tutos, le design est beau et je suis ravi de cette collaboration avec Grafikart :). Un très bon tutoriel final nous attend ;). en plus tes erreurs c'est sympa ça nous montre que même les meilleurs ne sont pas à l’abri de rien :)

Bonne contination et je vais voir cette partie N°2 ce soir ^^
JEi
samedi 02 avril 2011
@Xeron
Surtout que l'enregistrement n'a pas été préparer (from sratch) et les erreurs même les meilleurs ne sont pas à l’abri, comme tu dis :)
Xeron
samedi 02 avril 2011
Perso. je préfère voir les meilleurs faire des erreurs, ça rappel aux apprentis qu'on en est pas à l'abri justement et c'est bien :).
croque
jeudi 14 avril 2011
Une question: je me suis inscrit et je ne trouve pas comment récupérer les source ?
merci
JEi
jeudi 14 avril 2011
@Croque
Juste en dessous de la vidéo sur la droite, FICHIERS SOURCES, lorsque tu es connecté sur le site.
croque
jeudi 14 avril 2011
ok je me logue quand je me logue j'arrive sur tutoriel
sur tutoriel je choisi celui-ci et la
quand je clique à droite sur télécharger les sources
j'arrive tjs sur devenez membre
y acomme un défaut ?
JEi
jeudi 14 avril 2011
@Croque
Vraiment bizarre, tu es le seul à avoir ce problème... sous quelle navigateur es-tu ?
croque
jeudi 14 avril 2011
Mozilla Firefox
JEi
jeudi 14 avril 2011
@Coque
Vraiment bizarre ...
croque
jeudi 14 avril 2011
Oui, je pense que mon inscription n'est pas valider
si tel était le cas je pense que le menu en bas de la video

changerait
?
là j"essai avec internet explorer
?
JEi
jeudi 14 avril 2011
@Croque
Il n'y a pas de compte Croque dans la BDD. Crées toi un compte ^^
Joha
dimanche 17 avril 2011
Bonjour, super tuto !! On en apprend beaucoup ! ;)

Petite question : quelqu'un aurait une idée du raccourcis équivalent sur Mac de "alt+clic droit" pour sélectionner directement un calque selon l'élément sur lequel on a cliqué ?

Par avance merci.
JEi
dimanche 17 avril 2011
@Joha
Tu as la réponse dans ta question -> alt + clic droit, pareil que sur Windows :)
Joha
lundi 18 avril 2011
Oui j'ai quand même essayé avant de poser la question ^^ et ça ne marche pas :( peut-être que mon raccourcis est désactivé ?
JEi
lundi 18 avril 2011
@Joha
Oui car chez moi cela marche bien ^^
Joha
mardi 19 avril 2011
Je dois être aveugle j'ai cherché mais n'ai pas trouvé le raccourcis.
Jloupf
mercredi 27 avril 2011
Salut et merci pour le tuto !

Excellent cette collaboration avec Grafikart, cela ma permis de découvrir ton blog.

Pour les background avec des repeat, je travaille souvent avec des images de 1px de haut (ou de large pour les repeat-x) les images sont plus légères surtout pour les gros sites.

Sinon, impeccable !
créfics
samedi 07 mai 2011
Super tuto merci !

PS : quel éditeur HTML/CCS ... utilisez-vous? Merci d'avance
JEi
samedi 07 mai 2011
@Créfics
J'utilise Netbeans .
créfics
dimanche 08 mai 2011
D'accord, merci !
7am
mardi 17 mai 2011
Quelques suggestions :
- Google donne des explications sur l'optimisation de ses pages qui sont très intéressantes :
http://code.google.com/intl/fr/speed/articles/optimizing-images.html
http://code.google.com/intl/fr/speed/articles/reflow.html
http://code.google.com/intl/fr/speed/articles/optimizing-css.html
- Pixel Perfect est un addons à firebug très intéressant pour régler précisément des distances comme son psd

;)
JEi
mercredi 18 mai 2011
@7am
Merci pour tes suggestions ^^
sofun
jeudi 26 mai 2011
Merci beaucoup pour votre partage de connaissance.
damienlvka
mardi 07 juin 2011
Salut à toi et merci beaucoup pour ce tuto que je suis avec un réel plaisir !
Mais voilà, je me retrouve confronté à un problème que je n'ai encore jamais rencontré. C'est au sujet de mon menu. Il se trouve quand fait sur ma page , l'ordre de mon menu est inversé :
"contact, liens, archives, a propos, artistes, news"
au lieu d'avoir :
"news, artistes, a propos, archives, liens, contact"...
Je me demande bien d'où peut venir ma faute.

Voici mon code html:
<div class="menu">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Artistes</a></li>
<li><a href="#">A propos</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

CSS:
.menu{float:right; width:461px; height:50;}
.menu ul li{float:right; padding-right:15px;}
.menu ul li a {font-family: 'CargoTwoSFRegular'; font-size:25px; color:#cccccc; line-height:50px; text-decoration:none;}

Si quelqu'un pouvait éclairer ma lanterne, ça m'enlèverai une belle épine du pied...

Merci beaucoup ;-)
damienlvka
mardi 07 juin 2011
J'aurai dut creuser un peu avant de poster un message.
Mon .menu ul li était en float right et non en float left...

Désolé
;-)
mardi 07 juin 2011
Génial !! merci a toi ! Super Tuto !
slimane13005
dimanche 12 juin 2011
bonjour

comment obtenir le fichier psd ainsi
que le fichier sources pour intégrer
cordialement
JEi
dimanche 12 juin 2011
@Slimane13005
Il suffit de t'inscrire sur CreatiQ;
lepotanmiko
mercredi 22 juin 2011
Le fichier source n'est plus disponible en basique...
creatiq
vendredi 24 juin 2011
Le fichier source n'est plus disponible en basique..
JEi
vendredi 24 juin 2011
Oui il faut être membre premium désormais.
creatiq
vendredi 24 juin 2011
inscrire mais pas de fichier source !!! pas gentil :(
creatiq
vendredi 24 juin 2011
mais le tutoriel est super , rien a dire.
lobotomised
vendredi 01 juillet 2011
Pas très sympa d'annoncer les sources disponibles après inscription, et de ne plus les proposer ...
RodLeg
jeudi 07 juillet 2011
Bonjour,

Je viens de débuter votre tuto j'en suis a 35min et ça laisse déjà présager d'une excellente formation.
Ça change des vidéos payantes avec des qualités sonores et didactiques misérables que l'on peut trouver sur certain sites que je ne citerait pas.
Alors même si je vous donnerais un avis plus complet une foi le tuto terminé, je tiens déjà à vous remercier pour cette 1ere 1/2 heure

Rodleg
RodLeg
samedi 09 juillet 2011
Et voila vidéo vue dans son entièreté ...
résultat...

Excellent !!!

Comme dit dans le précèdent message (désolé du doublon) les tutos d'une telle qualité sont rares et certain acteurs du secteur du tutoriels qui vendent des formations (soit-disant a petit prix +/-5euros), de qualité déplorable, devrait prendre exemple sur vous

Pour conclure je n'aurais qu'une seul chose à dire MERCI

RodLeg
JEi
samedi 09 juillet 2011
@RodLeg
Merci beaucoup :)
Dams20
mercredi 13 juillet 2011
Moi qui me suis dit : Cool enfin LE tuto qui va m'apprendre, ba non ya plus les sources !
JEi
mercredi 13 juillet 2011
@obotomised @Dams20
Il suffit d'être premium pour avoir accès au sources des tutoriels .
Rtransat
mercredi 28 septembre 2011
Bonsoir,

Très bon tuto :)
La ou j'en suis il y a un problème, en étant attentif au background (bkg-body) on voit que c'est décalé. Peut-on régler cela ? (et avec un zoom on voit nettement que c'est décalé).
Philouelgeek
mercredi 19 octobre 2011
Super tuto ! Simple, clair ...

Par contre j'ai une petite question : j'ai utilisé la police Lobster comme dans le tuto et sous Chrome, elle n'est pas lisse comme sous IE ou FF. Est-ce que tu saurais d'où ça vient ? (J'ai également utilisé FontSquirel)

Merci.
kamel
dimanche 25 décembre 2011
merciiiii,
svp le fichier psd
sorcerer38
mercredi 08 février 2012
Merci, super tuto !!
salahDev
mercredi 08 février 2012
C'est bizarre, je n'arrive pas a telecharger les ressources de cette vidéo et je ne vois aucun boutton de télechargement en dessous de la vidéo
salahDev
mercredi 08 février 2012
C'est bizarre, je n'arrive pas a telecharger les ressources de cette vidéo et je ne vois aucun boutton de télechargement en dessous de la vidéo
tricepad1
vendredi 17 février 2012
Les ressources sont payantes !??
Votre Pseudo :
Votre Email :
Votre Website :
Votre Message :