Interface Graphique : Camera Shop
Acheter ce kit sur kitgrafik.com : 99 euros
Incroyable et multifonctions, voila les deux mots qui pourraient définir à merveille le Kitgraphique CameraShop. Ce kit graphique dépasse les fonctions simples de la traditionnelle charte graphique puisque nous vous proposons aujourd’hui un site clés en main composé de 6 pages en HTML (exploitables en l’état) avec des fonctions comme menu CSS dynamique, onglet de survol et de situation, page de contact et d’envoi d’emails (en PHP), une page produits avec spécificités, fiche technique et zoom de l’image via le script JS lightbox, galerie de photos par effet glissant et reflet Web2.0… Mais surtout nous vous proposons un logo créé rien que pour vous, exploitable avec simplicité. Nous fournissons même les fichiers sources Photoshop et un tutorial pour le personnaliser.
De plus CameraShop est tout à fait adapté aux sites de e-commerces (multidomaines), rien ne vous empêche d’utiliser ce kit pour un site autre qu’e-commerce (pour un blog par exemple). CameraShop est multifonctions et saura s’adapter à la publication de vos contenus.
Pas la peine d’être un as de l’informatique, ni même d’avoir de grandes connaissances en programmation pour adapter ce kit graphique. De plus une assistance vous ai proposée : pour les débutants nous proposons via le site wks.fr plusieurs tutoriaux pour vous aider à personnaliser les kits graphiques achetés dans notre galerie. Voyez par vous-même sur ces pages : http://www.wks.fr/kitgrafik/light2/
Votre site ne mérite-t-il pas d’être le plus beau ? Habillez le votre avec CameraShop, c’est acquérir un aspect professionnel, intuitif, et tendance. N’oubliez pas que c’est via l’aspect graphique de votre site que vos internautes jugeront de votre sérieux.

Présentation graphique du kit graphique Caméra Shop :

Description des fonctionnalités communes à chaque page
Description de l’interface graphique CameraShop du haut vers la bas (page standard).
En haut à droite, un logo original et nouvellement créé pour l’interface graphique CameraShop (source et explication pour personnalisation avec le kitgraphique). Sur sa droite, un menu CSS par onglet avec état actif !
Dessous nous avons une side barre contenant des blocs qui s’affichent en glissant de gauche à droite, la navigation se fait avec les petits chiffres se trouvant en dessous (voir la description vidéo pour plus de détails sur cette fonctionnalité).
Ensuite, nous avons sur les parties gauche et droite un menu vertical textuel avec son header (effet de survol sur les liens) et enfin en dessous se trouve des blocs graphiques pour afficher les derniers produits ajoutés à la boutique (nous avons ajouté le fichier source Photoshop pour que vous puissiez vous aussi exporter vos propres images).
Pour les contenus il y a un header affichant le titre de l’article et en dessous le texte.
Et enfin, un footer pour appliquer vos copyright et autres crédits de créations. Rappel du logo en bas de page.
Description des fonctionnalités page par page
Page 1 : index.html
Elle correspond très bien à une page d’accueil type e-commerce : affichage d’un produit en zoom, liste de nouveaux produits. Description des frais de ports etc…
Page 2 : page2.html
Cette page est une page dite standard.
Page 3 : page3.html
Cette page correspond à la galerie, elle s’affiche sous forme de plusieurs vignettes qui se suivent et s’affichent avec un effet glissant. Très facile d’utilisation, vous pourrez y placer autant d’images que vous le voudrez !
Page 4 : page4.html
Cette page est une page dite standard.
Page 5 : page5.html
Cette page est une page dite standard possédant une présentation Blog. Elle vous permet de constater à quelle point cette interface est flexible et adaptable à tout type de site internet.
Page 6 : page6.html
Page de contact : cette page contient un formulaire validé par JavaScript et envoyé via PHP, vous pourrez donc recevoir des messages de vos internautes / clients sans donner pour autant votre adresse email personnelle !
Programmation de l’interface dark corporate
Full CSS :
Toute l’interface est codée en strict XHTML CSS
Les menus sont sous forme de listes / facilement paramétrables Les styles de textes et de mises en page sont placés sur une feuille css externe
Galerie effet glissant + miroir (type Apple)
Galerie CSS + PHP présentant plusieurs photos sous forme de vignettes, celles-ci glissent et se présentent avec un reflet à la Web 2.0 ! Cette galerie est tout simplement délicieuse : vous pouvez en voir un exemple sur http://www.wks.fr/kitgrafik/light2/
Zoom de vos images par surimpression de l’écran
Images dynamiques : placez vos vignettes dans une balise div spéciale et vos images s’ouvriront en grand grâce à une animation surprenante. Voir un exemple sur cette page : http://www.wks.fr/kitgrafik/light1/
Un formulaire de contact
Géré en JavaScript pour sécuriser le formulaire et en PHP pour traiter l’envoi du mail vers votre boîte mail. Ce script et paramétrable en deux minutes.
Une side bar de naviguation
Présentation de news ou produits par blocs qui défilent de gauche à droite selon le clic effectué sur les numéros de pagination ; effet très agréable et intéressant pour présenter beaucoup de contenus dans un espace restreint.
Informations complémentaires sur le design
Un header avec un logo original pour votre futur site internet (header vierge disponible + fichier PSD du logo)
Un menu horizontal avec effet de rollover + bouton onglet pour faciliter la navigation sur le site, chaque page à sa propre couleur !
Présence d’images vierges : logo, header, bouton.
Présence du fichier PSD de l’interface complète pour vous aidez à modifier en profondeur votre prochain site.
Ajout du script : Light box à l’interface : http://leandrovieira.com/projects/jquery/lightbox/
INSCRIVEZ VOUS AU FLUX RSS WONKASTUDIO
|








