Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir ensemble, pas à pas, comment intégrer un site One Page de A à Z. Un site One Page n'a pas de rechargement de page et toute la navigation se fait grâce à un scroll fluide entre chaque rubrique. A la fin de cette formation, vous serez en mesure de créer un site complet qui peut être mis en ligne tout de suite.
Je vous propose de regarder l'extrait personnalisé de 10 minutes que j'ai réalisé pour vous rendre compte de ce que l'on va apprendre dans cette formation de 4h30.
Sommaire de la formation :
- Découpage des images dans Photoshop : technique de découpage, formats d'images à choisir, création de sprites
- Mise en place d'un slider de plusieurs images sur le background en full page
- Intégration de la sidebar : logo, menu, réseaux sociaux, copyright & un bouton permettant de la cacher/montrer
- Création des 3 rubriques + mise en place du système one page avec scroll entre les rubriques
- Intégration de la partie "News" : Carousel responsive, déploiement d'une nouvelle sidebar pour lire le contenu de la news sélectionnée
- Intégration de la partie "About Us" : Colonnes CSS3, blockquote personnalisé
- Intégration de la partir "Contact" : Formulaire 3 champs, google map
- Développement du formulaire en Ajax/PHP avec test d'envoi sur une boîte email
- Création d'un lecteur MP3 personnalisé en jQuery
- Ajout d'interactions avec les touches du clavier (cacher tout le contenu du site et mettre le site en pause, puis l'inverse) & aussi quelques conseils pour mettre en ligne le site créé (logiciel FTP, hébergement)
TOUT le site est inclus dans les sources, ainsi que l'intégration de départ pour vous permettre de suivre la formation dans les meilleurs conditions et refaire petit à petit le site one page en même temps que vous regardez la vidéo.
Bon tuto !
Jetez un oeil à ces autres tuto HTML 5, CSS 3, jQuery 1.8
Créer un jeu de type Portal…
Ce tuto HTML5/JS vous permettra de découvrir comment réaliser…
Apprendre le Responsive Design…
Dans cette formation Responsive Design signée Elephorm, vous…
Administration en AJAX et…
Dans ce tuto AJAX en vidéo, nous verrons comment ajouter, supprimer…
Formation Html5 et CSS3
Voici une formation à la découverte de l'HTML5 et du CSS3.…
Créer un portfolio full responsive…
Voici une formation pour apprendre à créer un portfolio full…
Videojs : Player vidéo HTML…
Dans ce tuto HTML 5 et Jquery en vidéo, nous découvrirons…
Cette formation contient 10 leçons en vidéo pour une durée totale de 4h36.
Voici le programme complet abordé au cours de cette formation :
- Découpage des images00:21:23
- Background full page00:14:06
- Sidebar mouvante00:46:41
- Mise en place contenu et pagescroller00:32:11
- Partie NEWS00:56:30
- Partie ABOUT US00:10:05
- Partie CONTACT00:18:12
- Formulaire Ajax/PHP00:31:15
- Lecteur MP3 en jQuery00:36:01
- Interactions touches clavier et mot de la fin00:09:46
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto HTML 5, CSS 3, jQuery 1.8 de 4 heures 36 minutes est proposée dans une résolution plus grande que l’extrait suivant :
spykrew07
, formateur certifié
Salut à tous !
Je m'apelle Adrien j’ai 28 ans et je suis Webdesigner spécialiste WordPress depuis plus de 6 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant plus de 3 ans et depuis 1 an et demi je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ...
Ma devise : Webdesign is not a job, it’s a passion !
Toutes les formations de Spykrew07
Témoignage des clients de spykrew07
![]()
Rien à dire, tuto expliqué de manière claire. Formateur Pro, allez-y.
![]()
extrêmement complet ! très pédagogique ! Top !
![]()
Je trouve très intéressante votre vidéo sur la création d'un site OnePage. Je l'ai vu plusieurs fois et vais me lancer bientôt dans la création d'un site en m'inspirant de vos idées. Pour le reste "Jquery, css, ...) cela ne me fait plus peur . Merci.
![]()
Du très bon travail ! Encore merci pour ces formations nécessaires à mon apprentissage dans le graphisme.
![]()
Tutos simples et efficaces !
Lire les autres témoignages
D'autres tuto de spykrew07
Créer une mini boutique ecommerce avec WordPress & Paypal
Dans ce tuto vidéo, nous allons voir comment créer un mini site ecommerce pour vendre…
Créer un portfolio filtrable avec historique de navigation
Dans ce tuto vidéo PHOTOSHOP, HTML5, CSS3 et JQUERY nous allons voir comment créer…
Créer un badge simplement
Dans ce tuto Illustrator, en vidéo, nous allons voir ensemble, pas à pas, comment créer…
Designer un site one page moderne
Dans cette formation Photoshop en vidéo de 10 chapitres, nous allons voir, pas à pas,…
Notes attribuées par les utilisateurs (39 votes)
Les avis / Questions des utilisateurs (154)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto HTML 5, CSS 3, jQuery 1.8 d’une durée de 4 heures 36 minutes a été acheté 606 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 5 septembre 2012 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto HTML Formation.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Cette formation qui se présente sous la forme de plusieurs vidéos, vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.

























(auteur de ce tuto - 22 mai 2013)
" @shyalin Alors c'est génial !! Bonne continuation :D "
(a acheté ce tuto - 21 mai 2013)
" Bravo pour ce tuto spykrew07! , c'est très bien expliqué pour une débutante comme moi et ta voix est très agréable et posée, c'est rassurant quand on ne sais pas où on met les pieds ;-). Grâce à ce tuto je viens de réaliser mon premier site web en code! "
(a acheté ce tuto - 13 mai 2013)
" 5/5.
mais le son gagnerait a etre de meilleure qualité. "
(a acheté ce tuto - 11 mai 2013)
" encore une fois trés clair,
très efficace, très bien ! "
(a acheté ce tuto - 06 mai 2013)
" Bonjour et merci pour ce tuto vraiment très bien réalisé. Le formateur vous accompagne pas à pas à construire un site one page très efficace.
PAr contre, j'ai remarqué que la réception d'email ne se fée pas à chaque fois ?! Quelqu'un aurait il rencontré le même problème que moi ?
Merci beaucoup. "
(auteur de ce tuto - 24 avril 2013)
" @phil9173 Pourquoi veux tu qu'il disparaisse ? Le mail a été envoyé donc on affiche un message de succès. Sinon tu ne fait pas partir le formulaire et tu vide les champs quand tu envoi le mail si tu préfères. Merci du retour ;) "
(a acheté ce tuto - 23 avril 2013)
" Tres bien mais il manque la disparition du message bien envoyé "
(a acheté ce tuto - 19 avril 2013)
" Très bon tuto, j'adore le style.
J'attend un prochain tuto sur paypal que je pourais inclure. Merci d'avance. "
(auteur de ce tuto - 12 avril 2013)
" @DimC Je suis content que tu es pu trouver ton erreur tout seul ;) Au plaisir de te revoir sur mes prochains tutos ! Bonne continuation ! "
(a acheté ce tuto - 11 avril 2013)
" Bon j'ai finalement résolu mon souci.
En fait c'était à cause du noms de mes variables.
"form_nom", "form_prenom" etc...
Le underscore foutait le boxon. Sans doute à cause du "strip_tags" :)
Du coup j'ai mis des variables plus simples et bingo. "
(auteur de ce tuto - 10 avril 2013)
" @DimC Oui j'ai bien reçu et j'ai jeté un oeil rapidement. Pour l'instant je n'ai pas trouvé d'erreurs... dès que j'ai un moment je regarderai encore. "
(a acheté ce tuto - 10 avril 2013)
" Juste pour information, avez-vous bien reçu mon email ?
Cordialement "
(auteur de ce tuto - 10 avril 2013)
" @Maxouel Ton site est bien sur un serveur local ? As-tu bien installé Easyphp ? "
(auteur de ce tuto - 10 avril 2013)
" @Diamond Merci beaucoup pour ton retour très positif et à bientôt pour de nouveaux tutos ;) "
(a acheté ce tuto - 09 avril 2013)
" Vos tutos sont très très bien faits, avec méthode, rigueur et pédagogie. Merci encore ! "
(a acheté ce tuto - 09 avril 2013)
" Merci pour ce tuto qui m'a permis pour la premiere fois de toucher a du code.
Bon j'ai un soucis avec le formulaire, je ne recois jamais les mails (oui j'ai mis mon adresse mail dans le index.php ^^).
De plus le paragraphe <?php?> je suis oblige de le mettre tout a la fin de index.php sinon le site se s'affiche plus dans mon navigateur et je n'ai que le code brut qui apparait.
Peut etre que ces problemes sont lies..
Merci pour votre aide.
Julien "
(a acheté ce tuto - 09 avril 2013)
" J'ai tout envoyé sur votre email, merci d'avance pour l'aide :) "
(auteur de ce tuto - 08 avril 2013)
" @DimC Envoi moi ton site dans un .zip ainsi que l'adresse du site en ligne sur OVH je vais jeter un coup d'oeil ;) "
(a acheté ce tuto - 08 avril 2013)
" Bonjour et merci pour ce tuto fort agréable. J'ai quasiment fini mon portfolio One Page grâce à vous.
Néanmoins j'ai un problème actuellement. Je ne reçois pas les mails de mon formulaire de contact :/
Si je ne mets que le php, ça fonctionne. Mais dès que j'ajoute la partie ajax je ne reçois plus rien.
Pourtant j'ai tout comme vous excepté un champs "prénom" en plus.
Le loading et le message "bien transmis" fonctionnent très bien. Et j'ai mis une alerte pour voir ce qu'il y avait dans la variable "donnees", tout semble OK.
J'avoue ne pas comprendre où ça cloche.
(site hébergé sur ovh)
Merci pour votre aide
Dimitri "
(a acheté ce tuto - 31 mars 2013)
" Bonjour et merci pour ce très bon tutoriel. J'ai cependant une petite requête : Comment peut-on s'y prendre pour créer un effet de transition sur l'affichage/disparition (ou un déplacement) de la barre du menu sur lequel on clique ? J'ai essayé d'ajouter un paramètre de temps sur le addClass et le removeClass, mais ça ne fonctionne pas... De plus, lorsque l'on charge la dernière version de JS (la 1.9.1), le bouton Hide disparaît en fade dès lors que l'on charge la page.
Merci d'avance ! "
(auteur de ce tuto - 29 mars 2013)
" @sampabs Je vais surement te décevoir mais je ne pense pas faire un tuto wordpress à partir de cette maquette désolé :/ Mais comme c'est un onepage il te suffit d'aller chercher le contenus de toutes tes pages et de les afficher les uns à la suite des autres. Bon courage à toi ;) "
(n'a pas acheté ce tuto - 29 mars 2013)
" Je n'ai pas acheté la vidéo. Ce qui pourrait me convaincre c'est que tu réalises un tuto pour le transformer en thème wordpress ^^
Merci "
(a acheté ce tuto - 24 mars 2013)
" Salut, tout d'abord c'est un excellent tuto.
je ne suis pas dév mais je suis très satisfait de cette formation.
en revanche je n'arrive pas a obtenir le plug pagescroll, même après avoir entré mon mail ?
serait il possible que quelque me le fasse parvenir ?
à vous les tut's
nanard2000 "
(auteur de ce tuto - 21 mars 2013)
" @dreamdesign Il ne faut pas chercher loin, Internet Explorer ne connait pas cette propriété css pour faire des textes en colonnes. Il faut trouver un subterfuge en jquery pour que ça marche. Tu as ceci par exemple : http://welcome.totheinter.net/columnizer-jquery-plugin/ Après je ne sais pas si ça vaut le coup que tu t’embêtes à trouver une solution pour ie car le texte apparaîtra comme un paragraphe normal donc c'est pas si terrible. Bon courage, bye ;) "
(a acheté ce tuto - 20 mars 2013)
" Salut, non je n'ai plus ce soucis semblerai que ce soucis vient de mon cache firefox encore, cela dit j'ai un petit soucis sous IE dans la section About us & News le texte ne se met pas en colonne ! je ne trouve pas le soucis
http://dreamdesignagency.comyr.com/client/Fleurdorient/web/
".col
{-webkit-column-count:3;
-webkit-column-gap:50px;
-webkit-column-rule:1px dotted #d60000;
-moz-column-count:3;
-moz-column-gap:50px;
-moz-column-rule:1px dotted #d60000;
-o-column-count:3;
-o-column-gap:50px;
-o-column-rule:1px dotted #d60000;
column-count:3;
column-gap:50px;}"
et j'ai aussi dit dans ma feuille index.php deprendre le google.js
" "
(auteur de ce tuto - 19 mars 2013)
" @dreamdesign Je ne comprends pas trop ton problème. Normalement le code qui il y a en début de page entre les balises php ne devrait prendre aucune place visuellement. Et ça m'étonne qu'il y est le même problème sur mes fichiers sources. Tu as un exemple en ligne ? "
(a acheté ce tuto - 19 mars 2013)
" tout d'abord je tien a te remercier pour ce tutorial, cela ma permis de me remettre dans le bain après quelque année d'abandon je dirai :D
cela dit j'ai un petit soucis quand j'ai mis le codage tout au dessus de mon fichier index.php j'ai mon menu_active.png qui se décale vers le bas et donc n'est plus centrer comme au début ? j'ai vérifié le dossier source et c'est pareil!! auriez vous une petit solution ?
Merci encore pour cette formation
Bien à vous, "
(a acheté ce tuto - 04 mars 2013)
" Bonjour spykrew07,
J'ai repris ton code et j'ai toujours ce comportement étrange de bouton qui disparait vers le haut de la page. Je vais donc utiliser click plutôt que toggle. Mais, pourrais-tu, STP, m'expliquer comment utiliser Click pour faire réapparaître le bouton, une fois que je l'ai fait disparaître ?
La partie suivante fonctionne correctement :
$('#cacher').click(function() {
// Animation CSS de la sideBar via les boutons Afficher/Cacher
$('#sideBar').animate({left:'-230'});
$('#cacher').animate({right:'-70'});
$('#cacher').addClass('afficher');//permutation du bckg
$('.contenu').animate({'margin-left':'160'});
});
J'ai voulu créer une deuxième fonction pour l'affichage en remplaçant #cacher par #afficher mais cela ne fonctionne pas !
Encore merci pour ton aide.
Bluedevil "
(auteur de ce tuto - 01 mars 2013)
" @bluedevil J'utilise Toggle au lieu de Click car ça gère le 2ème click qui permet de faire l'action inverse. Si tu veux utiliser Click il faut cacher ton bouton et en faire réapparaître un nouveau avec une nouvelle action qui permet de faire le remontrer. Et pour el fait qu'il remonte vers le haut je ne pense pas que ce soit le comportement normal ... tu as regardé les fichiers sources pour voir si tu avais fais une petite erreur quelque part ? "
(a acheté ce tuto - 28 février 2013)
" Excellent travail. J'ai juste une question concernant le bouton show/hide car sur mon site celui-ci disparait vers le haut de la page. Pour cacher le menu, cela fonctionne avec click pas avec toggle. Y a-t-il une astuce ?
Merci de ton aide "
(auteur de ce tuto - 22 février 2013)
" @vincentguinand Répondu par email ;) "
(a acheté ce tuto - 21 février 2013)
" Hello,
Merci pour ce tuto ! Parfait !
J'ai ajouté des rubriques, tout fonctionne mais en ce qui concerne la rubrique PHOTOS, je coince... En effet, j'ai ajouté Fancybox, mes images apparaissent et l'animation fonctionne correctement mis à par que lorsque l'image s'agrandit, je reviens automatiquement à la rubrique Home (la première alors que la rubrique PHOTOS et la septième rubrique.) Evidemment, lorsque je clique sur une image je veux rester dans la rubrique PHOTOS.
Que dois-je faire ?
Merci d'avance "
(auteur de ce tuto - 13 février 2013)
" @Capu Envoi moi ton site complet par email, je jetterai un oeil la-dessus parce que sans voir les fichiers c'est difficile de t'aider : contact[a]adriengazaix.fr "
(a acheté ce tuto - 13 février 2013)
" @spykrew Le site que je fais en suivant ta vidéo mais en partant de tes fichiers sources pour gagner du temps en évitant de les télécharger... Ça vient de là?
et maintenant mon background ne s'affiche plus quand j'ai commencé la partie pageslide (avec ton fichier source) je réussi toujours à trouver d'où vient l'erreur rapidement mais la je suis perdue depuis 4h je n'arrive pas à voir ou est le problème pour ça non plus!
pardon de t’embêter..
Merci beaucoup pour ta réactivité en tout cas, c'est top. super tuto.
"
(auteur de ce tuto - 13 février 2013)
" @Capu Le bug tu l'as sur le site que tu as fait toi en suivant la vidéo ? ou bien sur le site que je fourni dans les sources du tuto ? "
(a acheté ce tuto - 13 février 2013)
" @Spykrew, je suis désolé qu'entends-tu par tester les fichiers sources? "
(auteur de ce tuto - 13 février 2013)
" @Capu Quand tu testes les fichiers sources tu as le même problème ? "
(a acheté ce tuto - 13 février 2013)
" Merci beaucoup pour ce tuto!
Petite question: j'ai un bug sur mes news, quand ma souris sors de la news, le H2 disparait et revient quand la souris passe sur une autre news..
Un problème de cufon refresh sans doute mais je n'ai pas trouvé la solution !
Quelqu'un a une idée?
Merci beaucoup en tout cas, premier tuto et hâte de découvrir tous tes autres! "
(a acheté ce tuto - 12 février 2013)
" Tuto très clair et très bien fait! Le formateur s'exprime de façon claire et fluide. Merci! "
(auteur de ce tuto - 02 février 2013)
" @biibz Content que ça t'es plu ;) "
(a acheté ce tuto - 31 janvier 2013)
" Bon, ca fait plaisir de voir des tuto pas pour les débutants débutants... "
(a acheté ce tuto - 20 janvier 2013)
" premiere prog pour moi (enfin prog..........) ca marche nickel "
(a acheté ce tuto - 10 janvier 2013)
" Très bien mais un peu rapide. Merci pour le travail fourni. "
(n'a pas acheté ce tuto - 09 janvier 2013)
" J'avais exactement la même question quant à la compatibilité avec les iPad.
Y a t-il un endroit où on peut voir ton site de démo en ligne pour pouvoir le tester sur tablettes ?
Merci d'avance,
Gildas. "
(a acheté ce tuto - 05 janvier 2013)
" Bonjour,
Félicitations pour ce tuto, il est extra. A partir du tuto, j'ai réalisé un site qui n'utilise pas un slider fullscreen, mais une image fixe par section. Ces images sont étirées en fullscreen grâce à la propriété css background-size:cover. Le site est bien affiché sur tous les systèmes que j'ai pu utiliser (tant les pc que les tablettes)...sauf sur ipad. Ma question s'éloigne un peu du tuto, mais tu sembles maîtriser le sujet...sais-tu comment je peux rendre mon site compatible ipad? Aurais-tu (par hasard) rédiger un tuto à ce sujet?
Voici le site dont je parle: http://www.perspectif.be
Merci d'avance et encore bravo! "
(a acheté ce tuto - 05 janvier 2013)
" excellent tuto...clair, complet, très bien expliqué! Bravo "
(auteur de ce tuto - 27 décembre 2012)
" @GeekDesigner Content que ça t'es plu ;) Bonne continuation !! "
(a acheté ce tuto - 26 décembre 2012)
" De la bombe! :) J'ai rencontré des difficultlés, étant donné que c'est la toute première fois que je touche au code, mais je suis arrivé à toutes les résoudre, super formateur! "
(a acheté ce tuto - 20 décembre 2012)
" J'ai réglé mon soucis, désolé du dérangement :) "
(a acheté ce tuto - 20 décembre 2012)
" Super tuto, il m'a fait apprendre pleins de choses. Merci à toi et continue :) "
(a acheté ce tuto - 20 décembre 2012)
" Bonjour et un grand merci pour ce tuto qui me fait apprendre pas mal même beaucoup de chose :)
Cependant j'ai un soucis avec le pluggin pageScroller.
quand je clique sur mes liens dans la barre de nav, le sroll descent bien et mon focus reste bien sur mes liens, par contre si je manipule le scroll moi même que je le fasse monté ou descendre, arrivé a ma section le focus dans ma barre de navigation ne prend pas.
auriez vous une idée pour me sortir de la?
Merci d'avance :) "
(a acheté ce tuto - 19 décembre 2012)
" bonjour, j'ai un petit problem quand je cliques sur une news j'ai bien la news change de couleur et la page a droite qui bascule. mais quand je ferme la barre a droite, la news reste de couleur et mon caroufre de mes autre page ne fonctionne plus, sauf si j ouvre une news dans le menu different. pouvez vous m'aider? "
(a acheté ce tuto - 13 décembre 2012)
" Bonjour,
Oui, vraiment super ce tuto, c'est déjà du lourd et je vois tout le chemin qu'il me reste à faire !...
Merci pour tes excellents tutos !
Une question : lorsque je suis sur la section about ou contact et que je refresh la page, le "menu active" remonte bien sur home, par contre, le contenu de ma page reste sur la rubrique (par exemple contact). Je me casse la tête sur la question depuis 1 jour !
Quelqu'un à une idée géniale pour résoudre la question ?
Merciiiiii "
(auteur de ce tuto - 12 décembre 2012)
" @meletwil Génial alors !! Merci à toi pour tous ces compliments ;) "
(a acheté ce tuto - 11 décembre 2012)
" je ne m'en lasse pas, un vrai régal, la progrssion du tuto est très bien faite, les explications sont claires encore merci ..... ;) "
(auteur de ce tuto - 20 novembre 2012)
" @benji9 Très content que ça t'es plu !! Merci pour ce super compliment ;) "
(a acheté ce tuto - 20 novembre 2012)
" Excellentissime tuto, clair et très bien fait.
Bravo! "
(a acheté ce tuto - 19 novembre 2012)
" @spykrew07 : C'est bon tu avais raison c'était juste que cela ne fonctionnait pas en local.
je l'ai mis sur le serveur et tout fonctionne !
Merci beaucoup pour ton aide!
"
(auteur de ce tuto - 16 novembre 2012)
" @dianeCaroff Vous avez bien mis votre email dans le fichier PHP ? Si oui et si ça ne marche toujours pas c'est que dans Apache (php.ini) il faut entrer le SMTP de ton fournisseur d'accès (ex : smtp.free.fr) J'espère que tu trouveras une réponse à ton problème sinon normalement si tu envoi ton site sur un vrai serveur tout devrait fonctionner comme sur des roulettes ! Merci pour ton retour ;) "
(a acheté ce tuto - 16 novembre 2012)
" Merci pour ce tuto ! excellent travail !
J'ai juste un petit problème... je ne reçois pas les demandes de contact via le formulaire sur ma boite mail.
J'ai bien regardé les sources et je ne vois pas ce qui pose problème.
Une idée ? :)
Merci d'avance pour ta réponse. "
(auteur de ce tuto - 13 novembre 2012)
" @calysse Essayes de mettre un !important à côté de ta règle CSS comme ça par exemple :
#bg { background:#000!important; }
Bon courage et merci de ton retour ;) "
(a acheté ce tuto - 13 novembre 2012)
" Super tuto très bien expliqué; Merci:!!!
J'ai pratiquement fini mon site, seul pb; je n'arrive pas à modifier la couleur du fond des News à droite. Je suis allée dans pageslide.css, et tentée de remplacer un background, mais sans succès...
Une solution?
"
(a acheté ce tuto - 12 novembre 2012)
" Merci c'est très bien pour la methode de decoupe de design. "
(auteur de ce tuto - 11 novembre 2012)
" @Greg1 Regardes bien les sources du tuto tu as du faire une petite erreur, un point virgule oublié... souvent ce n'est pas grand chose. "
(a acheté ce tuto - 10 novembre 2012)
" " Bonjour , en fait mes images n apparaissent pas ,l ecran reste noir ,j ai un soucis au niveau de la programmation aux back ground full page, a 9 min 46 ,j ai fait tout a lettre ,sur firebug j ai cela :
(function(a){a(document).ready(function(){a("body").append('<div id="supersized-loader"></div><ul id="supersized"></ul>')});a.supersized=function(b){var c="#supersized",d=t......
a ma droite sur firebug cela:
toString
function()
Closure Scope
Closure Scope { arguments=[1], b={...}, c=
"#supersized"
}
Closure Scope
Closure Scope { toString=function()}
Fenêtre
Window index.php
,je pensais que c etait le chemin de mes images ,quand je les mets dans l index.php ,ca fonctionne!! donc mon chemin est bon
le favicon fonctionne aussi
pourrais tu m aider
merci "
(a acheté ce tuto - 09 novembre 2012)
" sepohk il suffit de modifier un peu la partie "news" pour avoir ce que tu recherches.
J'ai moi utilisé le d=code pour la partie galerie. J'ai toutefois un bug, en dehors d'une redimension manuelle de la page (cliqué déplacé) les images sont coupées sur la hauteur comme si le navigateur n'actualisait pas.
Merci spykrew07 pour ce tuto ;) "
(a acheté ce tuto - 04 novembre 2012)
" " Bonjour spykrew07 et Merci pour ce tutorial.
J'aurais une question, je voudrais intégrer a ce site une galerie, j'ai crée un nouvelle onglet dans le menu, "galerie" et j'aimerais a présent y intégrer une galerie avec la possibilité d'afficher 5, 10 lignes de commentaire quand on clique sur l'image et que celle-ci apparaît en plus grand.
Je voudrais avoir ton avis sur la réalisation d'une galerie et si tu connaissais un plugin jQuery qui pourrait s'intégrer au site ?
contact_a_adriengazaix.fr avec le @ à la place de _a_ pour te contacter ? " "
(auteur de ce tuto - 31 octobre 2012)
" @Greg1 J'ai pas compris ta question désolé. Tu l'enregistres en quel format ? Si tu veux de la transparence il faut choisir PNG, sinon du JPG. Bon courage ;) "
(a acheté ce tuto - 31 octobre 2012)
" Bonjour, quand je selectionne avec alt et le logo,juste avant le rognage, il me le sauve en noir ,je ne vois quasi rien ,comment puis je le mettre sur fond blanc ou en blanc. "
merci "
(auteur de ce tuto - 25 octobre 2012)
" @steph15 Si ça va trop vite je te suggère de repasser sur la formation html en 2 parties et de poursuivre avec celle sur le css. Après normalement tu pourra revenir sur celle-ci plus facilement ;) Bonne continuation ! "
(a acheté ce tuto - 24 octobre 2012)
" dur à suivre pour un presque novice mais on progresse. "
(auteur de ce tuto - 16 octobre 2012)
" @cid5420 C'est le UTF-8 (sans BOM) qu'il faut choisir si tu ne veux pas avoir de problème par la suite. "
(a acheté ce tuto - 16 octobre 2012)
" lorsque j'encode en utf8, toujours le même problème, en revenche en utf8 (sans DOM) je n'ai pas de problème, pourquoi? "
(auteur de ce tuto - 12 octobre 2012)
" @cid5420 Tes fichiers ne sont tout simplement pas encodés en UTF-8 ;) "
(a acheté ce tuto - 11 octobre 2012)
" bon encore pas mal de problème du côté des caractère spéciaux.
J'aimerais un peu d'aide.
De plus j'ai adapté le tuto infobox sur ce site, je dois dire que c'est excellent !
Mais je rencontre un prolème de redirection ! :(
Bon bah je regarderais demain. Je suis mort lol ! "
(a acheté ce tuto - 11 octobre 2012)
" ok merci de cette réponse très rapide !
bon au niveau fluidité ça va, j'ai gagné en rapidité en farfouillant a droite et a gauche.
Cependant, pour finalisé mon site, il me reste un petit problème, lors de l'envoi du message, mon message d'envoi est bien présent, mais les "é" sont sous forme "?"
Pour mon index.php, j'avais le même problème pour la pageslide mais résolut grâce à un encodage différent. donc le site.js doit t-il être encodé?
et mon loading ne fonctionne pas "
(auteur de ce tuto - 11 octobre 2012)
" @cid5420 Certains navigateurs ont besoin de + de ressources et sont beaucoup plus lourd à exécuter. Moi j'utilise Chrome parce qu’il est très léger et que tout s'excute assez rapidement. Il n'y a pas beaucoup de solutions pour améliorer la fluidité hormis de minifier tous les fichiers .js dans un seul et de créer un fichier le plus petit possible. Désolé de ne pas plus pouvoir t'aider sur ce point la. Bonne continuation. "
(auteur de ce tuto - 11 octobre 2012)
" @aiborion Jolie trouvaille pour ceux qui cherchaient à faire fonctionner le lecteur sous Firefox. Je pensais que c'était du au format .mp3 non pris en charge. Merci à toi ;) "
(a acheté ce tuto - 11 octobre 2012)
" Pour faire fonctionner le lecteur audio sous Firefox, allez savoir pourquoi, mais tout fonctionne bien si vous supprimez cette ligne: swfPath: "/js" "
(a acheté ce tuto - 11 octobre 2012)
" encore une foi bon tuto mais j'ai des problème de fluidité et rapidité. Comment corriger le problème?
J'ai mis les script js entre head hormis le pageslide sinon ça ne marche pas! j'ai gagné une nette amélioration sur chrome mais mozilla et IE sont très lent "
(a acheté ce tuto - 10 octobre 2012)
" Très beau tuto !
Je réalise mon site sur cette base qui est très sympa.
Cependant, je rencontre un gros problème, mon paragraphe dans la pageslide ne prend pas en charge les caractères spéciaux. De plus, si je lui applique la police cufon, le texte est invisible dans la pageslide.
Une dernière question, lorsque l'on a un texte très long, comment peut-on faire? j'ai pensé a une scroll bar mais celle-ci va t-elle pas entrer en conflit avec celle window?
je sais pas si je suis clair mais si vous pouvez m'aider.
Merci "
(a acheté ce tuto - 09 octobre 2012)
" Comme Grassel j'ai également un problème sur Firefox avec les cufon.refresh sur les single _news lorsque ma souris sort d'une news, le titre ne se remet pas en noir "
(a acheté ce tuto - 09 octobre 2012)
" Petite question cher spykrew07 : n'est il pas plus judicieux de placer les scripts Jquery dans le header afin de gagner en temps de chargement et pour ne pas attendre le téléchargement de tout l'index pour lancer la machine? Merci pour ta réponse ! A bientot "
(a acheté ce tuto - 09 octobre 2012)
" Tout simplement parfait !!! Excellente formation avec un formateur très technique !!! Impeccable. "
(auteur de ce tuto - 05 octobre 2012)
" @Dario67 Tout est possible. Mais je ne pense faire un tuto la dessus par contre. Je te renvoi donc vers le site officiel du plugin pour créer ton système. Bonne continuation. "
(a acheté ce tuto - 04 octobre 2012)
" Et moi pas de réponse? Est-ce possible ou non? créer plusieurs gallérie. "
(auteur de ce tuto - 03 octobre 2012)
" @khyriana J'ai répondu par email ;) "
(a acheté ce tuto - 03 octobre 2012)
" Je comprends que l'on soit tous rush, mais j'aimerai savoir si je peux espérer une réponse suite à l'envoi de mes fichiers il y a une semaine…
Merci de votre compréhension
"
(a acheté ce tuto - 30 septembre 2012)
" Très bon tuto j'ai même commencer à créer mon site web sur cette base. Par contre Spykrew07 si tu pouvais aller plus loin dans la gestion du plug in supersized ce serait génial. Comment créer une gallérie avec différent thème comme gallérie portrait, paysage etc. Mon projet et de créer un système de commande de mes photos ou un thumbs avec un bouton sur la droite qui permette de choisir chaque thème et qu'en fonction des thème les photos qui défilent en background soit différentes. "
(a acheté ce tuto - 28 septembre 2012)
" super reactivité ,ca s appelle du professionalisme ! merci pour l info et je la prend de suite ;)
"
(a acheté ce tuto - 28 septembre 2012)
" Merci spykrew07 pour cette formation, très claire et très instructive!
Juste une petite question : Pourrais-tu donner les dimensions que tu utilises pour ta maquette sous Photoshop pour ceux qui n'ont pas suivi la précédente formation?
Je connais très bien le logiciel par contre je suis un peu moins à jour au niveau des formats.. Vu que tu parles d'images Full HD pour le Bg je me suis dit que c'était du 1920px*1080px en 72dpi mais je n'en suis vraiment pas sûr.. "
(auteur de ce tuto - 28 septembre 2012)
" @Greg1 Tu n'as besoin de rien de payant ;) Notepad++ te suffit pour coder, et les plugins jQuery que l'on utilise dans le tuto sont gratuits aussi. Bonne formation à toi !! "
(a acheté ce tuto - 28 septembre 2012)
" bonjour, quelles sont les logiciels dont j ai besoin pour la formation ?et combien coutent ils? et ou puis je les acheter?
merci "
(auteur de ce tuto - 28 septembre 2012)
" @grassel Pour le cufon.refresh sur les news je n'ai pas de problème de mon côté.
Pour le jPlayer sur firefox quelqu'un m'a aussi posé la question et je pense que firefox ne prend pas en compte le format mp3 donc il faut aller voir sur le site officiel du plugin pour ajouter une extension comme .ogg, .wma ... et convertir la musique en plusieurs formats pour que ça passe partout. Bonne continuation. "
(a acheté ce tuto - 28 septembre 2012)
" Toujours hyper performant ! bravo !
Sous Firefox, pas moyen de faire démarrer le jplayer...
PB avec cufon.refresh sur les single _news comme je te le disais en mail..
As-tu une idée pour résoudre le soucis ? "
(auteur de ce tuto - 26 septembre 2012)
" @M@nu Le site est utilisable partout même sur internet explorer à condition de mettre le script html5.js dans le head, ainsi qu'un display:block sur les balises html5 : article, section ... "
(a acheté ce tuto - 26 septembre 2012)
" Le fait que tu utilises pas mal de balises HTML5 a t'il une influence importante sur les browsers compatibles? Si oui, à partir de quels versions le site fonctionne t'il et passe t'il en version "dégradée mais utilisable" sur les autres?
Merci pour ta réponse "
(a acheté ce tuto - 26 septembre 2012)
" mon tuto bonnes explications que dire d'autre perfect ! "
(a acheté ce tuto - 22 septembre 2012)
" Excellent chapitre, bien expliqué, avec calme et précision... Je n'y connais presque rien en Jquery et javascript et pourtant, j'ai réussi très simplement à mettre en place et adapter le slide en fullsize. Super ! "
(auteur de ce tuto - 21 septembre 2012)
" @samellite Je viens de vérifier et si on le fait. Regardes bien les sources du tuto... "
(a acheté ce tuto - 20 septembre 2012)
" C'est bon Adrien, juste une petite erreur de ma part :
en fait, je fermais la section "single news" avant la div modal au lieu d'après, ce qui me provoquait ce bug...
Merci encore "
(auteur de ce tuto - 20 septembre 2012)
" @samellite C'est ce qu'on fait dans le tuto avec le background noir. Tu rajoutes un border dans le css sur la news qui la classe .news_active. "
(a acheté ce tuto - 20 septembre 2012)
" Comment faire en sorte de spécifier la "News sélectionnée", par un effet, par exemple avec un encadré d'une autre couleur qui ne disparait que quand on passe à une autre news, qui sera sélectionnée et encadrée à son tour. J'ai beau cherché, je ne trouve pas.
merci "
(auteur de ce tuto - 20 septembre 2012)
" @MJVH Essayes de regarder sur le site officiel du plugin si tu trouves la réponses à ta question. Normalement avec le code qu'il y a dans les sources il ne devrait pas y avoir de problème. Si tu ne trouves vraiment pas, je peux jeter un oeil à tes fichiers quand j'aurai un petit moment. Merci de ton achat ;) "
(a acheté ce tuto - 20 septembre 2012)
" Salut à toi Spykrew07
Très bon tuto, bien expliqué... mais j'ai un problème avec le carrousel de news
Le carroussel se déplace de 2 news (belle animation) puis recule de 1 (pas d'animation). Comme je trouvais pas, j'ai recopié ton code et ça fait pareil...
vois tu d'où ça peut provenir ??
Merci "
(auteur de ce tuto - 19 septembre 2012)
" @marinellamartin Merci du compliment ça fait plaisir ;) "
(a acheté ce tuto - 18 septembre 2012)
" Tuto très bien expliqué dans les moindres détails. En suivant le tuto on sait ce qu'on fait et pourquoi on le fait! Un grand merci. "
(a acheté ce tuto - 18 septembre 2012)
" Très ardu pour la novice que je suis, mais vachement bien enseigné. Je m'accroche pour la suite ! "
(a acheté ce tuto - 17 septembre 2012)
" OK merci. En attendant avec impatience un bon gros tuto PHP !!! "
(auteur de ce tuto - 17 septembre 2012)
" @Rocca0909 J'ai fait une formation complète pour créer son site avec WordPress donc tu peux avoir un site dynamique avec un back office déja créé et adaptable à tout type de projet.
Sinon je n'ai pas encore fait de tuto sur comment créer un site dynamique avec php/mysql mais c'est envisageable ;) Peut-être que je ferai une formation pour acquérir les bases du PHP d'abord.
Bonne continuation ! "
(a acheté ce tuto - 17 septembre 2012)
" as tu déjà fait un tuto sur la conception d'un site dynamique ? "
(auteur de ce tuto - 17 septembre 2012)
" @Rocca0909 Non ce site n'est pas dynamique, il faut connaître les bases du html pour modifier le contenu. Je n'ai pas prévu de suite pour le moment. "
(a acheté ce tuto - 17 septembre 2012)
" Je n'ai pas encore fini le tuto mais déjà bravo ! grand merci a toi !
J'ai une question cependant : ce site est il dynamique ?
une personne extérieure pourra t elle le modifier sans toucher au code ?
Si non, as tu un tuto qui expliquerai cette partie ?
Merci d'avance "
(auteur de ce tuto - 17 septembre 2012)
" @khyriana Si tu as un soucis, envoi moi tes fichiers par email je regarderai ça dès que j'ai un moment ;) "
(auteur de ce tuto - 12 septembre 2012)
" @samellite Mets ton site en ligne quelque part ou envoi moi tes fichiers par email, j'y jetterai un oeil dans la journée ;) "
(a acheté ce tuto - 12 septembre 2012)
" Je n'arrive toujours pas à régler le problème du padding - top, j'ai bien rajouté la class.content pour chaque rubrique que j'ai rajoutée, mais pour chaque rubrique tout se colle en haut de page, comme si le padding est = o
Une idée ?
Merci encore ! "
(a acheté ce tuto - 11 septembre 2012)
" @spykrew07 : Merci beaucoup ! Je viens de te faire parvenir le mail justement ... Merci encore ! "
(auteur de ce tuto - 11 septembre 2012)
" @Driamar Mon email c'est : contact_a_adriengazaix.fr Remplace le _a_ par le @ ;) "
(a acheté ce tuto - 11 septembre 2012)
" @spykrew je vais avoir besoin de tes lumières je pense ... Impossible, même en mettant la même chose que toi que dans les sources, d'avoir l'effet scroller ... je me prends la tête depuis ce matin pour essayer de trouver mon erreur mais impossible :/ Peux-tu me donner ton mail ? si c'est possible bien sur ... "
(a acheté ce tuto - 11 septembre 2012)
" Bonjour, vu mon age j'ai souvent un train de retard mais grace à des tutos tels que les votres j'arrive à voir les lumières du wagon de queue ...
Merci "
(auteur de ce tuto - 11 septembre 2012)
" @Boak Merci à toi, et je suis très content qu'elle t'es plu ;) "
(a acheté ce tuto - 11 septembre 2012)
" merci pour cette demonstration elle est bien, et tres comprehensible "
(auteur de ce tuto - 11 septembre 2012)
" @Driamar Essayes de comparer avec les sources fournies avec le tuto et si vraiment tu trouves pas d'ou vient le problème, envoi moi un email avec tes fichiers zippé ;) "
(a acheté ce tuto - 10 septembre 2012)
" Désoler de t’embêter encore une fois, mais mon effet scroll lorsque je clique sur le menu ne fonctionne pas et il me dérègle mon menu sur les deux derniers choix :/ "
(a acheté ce tuto - 10 septembre 2012)
" Cela faisait 10 minutes que j'étais dessus, mais je ne trouvais pas l'erreur ... Et puis finalement si ! j'avais mis des " " au lieu des parenthèses :/ donc maintenant tout fonctionne !! Merci encore en tout cas ! "
(auteur de ce tuto - 10 septembre 2012)
" @Driamar Tu as mis height:100% sur ton html, body dans le css ? Ton div .points il est bien en position:fixed ? "
(auteur de ce tuto - 10 septembre 2012)
" @soso-rug Je n'y est pas pensé, mais si plusieurs personnes me le demande je peux envisager faire un tuto pour créer un thème WordPress à partir de cette intégration. "
(a acheté ce tuto - 10 septembre 2012)
" j'ai enfin attaquer l'intégration ! Juste un petit souci ... Je n'arrive pas à faire apparaitre les points sur l bg ... J'ai beau faire tout ce que tu dis, il ne se passe rien :/ "
(a acheté ce tuto - 10 septembre 2012)
" Bonjour, allez vous faire un tuto sur l'intégration de ce site onepage dans wordpress ? "
(a acheté ce tuto - 10 septembre 2012)
" une bonne technique pour rogner les images d'un layout. merci "
(auteur de ce tuto - 09 septembre 2012)
" @samellite t'as du oublier de rajouter la class .content sur ta nouvelle rubrique qui lui donnera une height de 100% et un padding-top ;) "
(a acheté ce tuto - 09 septembre 2012)
" Petit souci !
Quand je rajoute d'autres sections, je n'ai plus la marge sup, les titres se collent en haut de page.
Quelle solution ?
Merci ! "
(a acheté ce tuto - 08 septembre 2012)
" Ai eu pbm de telechargement egalement, ai donc visionné en ligne et tjs aussi satisfait des tutos de Spykrew....
Attends le suivant avec impatience....
Bonne continuation
José "
(a acheté ce tuto - 08 septembre 2012)
" super tuto, complet et accessible pour beaucoup.
En plus ce tuto offre deaucoup de possibilités de dévellopement (design et codes).
Merci et BravO "
(auteur de ce tuto - 08 septembre 2012)
" @Driamar Oui on peut rajouter facilement d'autres rubriques, tu verras j'en parle à un moment dans la formation. Merci de ton retour ;) "
(a acheté ce tuto - 08 septembre 2012)
" Merci beaucoup ! Je viens juste de finir avec celle concernant le design :D j'ai hâte de commencer !
Petite question : en plus de "Home, About Us et Contact" peut-on rajouter facilement d'autres choix ?
Merci encore !!!!! "
(a acheté ce tuto - 07 septembre 2012)
" De retour pour cette rentrée pour continuer a suivre de prés les formations de Spykrew.
Juste un survol de la formation très complète avant de m'attaquer de façon plus concrète. "
(a acheté ce tuto - 06 septembre 2012)
" Ah je l'attendais avec impatience !!! J'ai hâte d'attaquer la partie intégration, pour avoir suivi pas mal de tes tuto, je sens que je vais prendre un abonnement également ^_^
D'ailleurs, j'an ai repéré plusieurs qui vont bientôt faire partie de mon panier (façon de parler ;) ). "
(a acheté ce tuto - 06 septembre 2012)
" Tout est ok aussi par chez moi!! Merci pour la réactivité les gars et maintenant au travail!!... "
(auteur de ce tuto - 06 septembre 2012)
" @samellite @bass33 Merci du retour et bonne formation !!
@Pumbostar Le staff de tuto.com a réglé le soucis, régales toi bien ;) "
(a acheté ce tuto - 06 septembre 2012)
" Un petit retour téléchargement : C'est ok pour moi, merci pour votre réactivité ;) "
(a acheté ce tuto - 06 septembre 2012)
" No stress ;)
J'en suis au design pour l'instant, j'adapte mon design. Par exemple, a la place des news j'aurais des catégories services, à propos, contact ce qui me fera un menu des plus simple avec un Home et un portfolio, je rajouterais certainement au menu les icônes réseaux, mentions légales et plan du site.
Par contre, je me demande si je peux dans le portfolio intégré ton tuto Portfolio filtrable ?
Sinon merci pour ton partage de connaissance, si je me débrouille en graphisme ce n'ai pas vraiment le cas en intégration, mais à force de suivre tes tuto je vais bien finir par m'en sortir ^^ "
(auteur de ce tuto - 06 septembre 2012)
" @bass33 @lottaviani J'ai fait la demande au support, je suis désolé pour ce petit problème. "
(a acheté ce tuto - 06 septembre 2012)
" Salut Spykrew. Même galère chez moi, la dernière et la première impossible à télécharger depuis le player. "
(a acheté ce tuto - 06 septembre 2012)
" Le problème persiste chez moi ;) "
(a acheté ce tuto - 06 septembre 2012)
" Idem avec la dernière vidéo... "
(a acheté ce tuto - 06 septembre 2012)
" Même problème de téléchargement mais sur 4ème vidéo cette fois ci! "
(auteur de ce tuto - 06 septembre 2012)
" @LoFics @neelo @samellite Je demande tout de suite d'ou peut venir le problème pour que ce soit réglé très rapidement ;) Merci de votre achat en tout cas, ça me fait plaisir d'avoir un fan club aussi passionné :D "
(a acheté ce tuto - 06 septembre 2012)
" Idem même problème, impossible de télécharger le premier et dernier fichier, plusieurs essais et toujours rien.
"
(a acheté ce tuto - 06 septembre 2012)
" De même, toujours ce problème de telechargements! "
(a acheté ce tuto - 06 septembre 2012)
" Je confirme qu'il y a un problème de téléchargement avec le player. "
(auteur de ce tuto - 06 septembre 2012)
" @bass33 Tu as réussi à télécharger toutes les parties du tuto finalement ? Ou dois-je contacter le support pour que le problème soit réglé ? "
(a acheté ce tuto - 06 septembre 2012)
" Merci également, juste un souci de téléchargement du 1er et dernier fichier via le tutoplayer ;) "
(a acheté ce tuto - 05 septembre 2012)
" Merci pour ce tutorial! Très attendu pour beaucoup de membre de tuto.com! Mais en tout cas génial. Merci a toi "