more

Bienvenue,

avant toute chose, je tenais à signaler que ce site est avant la version html d'un portfolio full flash en cours de développement, qui devrait voir le jour courant octobre 2010.

A travers cette version du portfolio, vous pourrez partager mes derniers créations (direction artistique, photos, webdesign, musique, bannières flash...) mais aussi ma veille technologique, ma veille sur les tendances du webdesign et ainsi que quelques tutoriaux.

Biographie

suivant precedent

Dates clés :

Mes premiers pas sur le web, furent assez similaires que ceux d'Amonstrong sur la Lune, poussez par cette euphorie j'ai créer ma première page tel le planté de drapeau en symbole de conquête.

Ce fût en l'an 1999 sous Frontpage... Quelle horreur !!! Aïe aïe que tout a changé.

Cette première expérience m'a orienté très vite vers la technologie flash, qui était à ce moment-là, la seule alternative pour concilier le web et le graphisme en détournant les contraintes techniques liées aux navigateurs.

Après quelques essaies, en 2005 je mets en ligne mon premier site full flash toujours accessible, celui de jeunes artistes indépendants Unsuitable For Use. Ce premier site a quelque part, propulsé la suite.

En 2007, je sors diplômé de l'institut Ingémédia formation pluridisciplinaire autour du web préparant avant au management de projet web et multimédia.

Début 2008 je rentre chez M6 Web (filiale web du groupe M6) et en parallèle je me lance en tant que Freelance.

Expreriences Professionnelles

suivant precedent
  • Novembre 2008 à Décembre 2009 : Créatif web / Designer Flash - M6 Web

    Projets pour : m6mobile.fr, m6jeux.fr...

  • Depuis Août 2008 : Directeur artistique web - Freelance

    Projets pour : Hurtwear, OmegaTV, Pizz@s.com, Trip Tribes...

    Management projets Créations des cahiers des charges avec les clients Création d'identités web (DA, logos, ergonomie, animations, jeux en ligne, illustration...) Refontes graphiques de site internet Conception d'application flash Création de supports publicitaires web

  • Janvier 2008 à Novembre 2008 : Webdesigner – M6 Web

    Projets pour : deco.fr, teva.fr, turbo.fr, clubic.com...

Competences

suivant precedent
    • Photoshop : 9 ans d'utilisation

    • Flash : 7 ans d'utilisation

    • After Effect : 5 ans d'utilisation

    • Dreamweaver : 7 ans d'utilisation

    • Illustrator : 6 ans d'utilisation

    • Premiere : 9 ans d'utilisation

    • Audition / Cubase : 8 ans d'utilisation

    • 3Ds Max / Maya : 4 ans d'utilisation

Connaissances

precedent

En cours d'écriture

more

Tuto : Mini moteur de recherche en CSS et Jquery

Publié le par David dans les catégories : Tutoriaux // Webdesign et css
  • facebook
  • twitter
  • démo
  • télécharger

A travers ce tutorial, je vais vous montrer comment utiliser des astuces d’intégrations (css), celles de Jquery et de jqueryUI, pour réaliser un mini moteur de recherche.
Jquery UI est l’interface utilisateur de Jquery qui met à profit un grand nombre fonctions telles que addClass, removeClass qui comme leurs nom l’indiquent, elles permettent de modifier la class d’une balise, dans ce tutorial nous allons se servir de leur filleul switchClass qui permet de cibler une classe dans une page html et de la remplacer.

C’est avec ce même switchClass que j’ai créé sur ce site les changements d’affichage dans l’index des différentes rubriques.

Outils nécessaire, à se munir avant toutes choses :

- Jquery : ICI
- JqueryUI : ICI

Xhtml :
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/fonction.js"></script>
Javascript :
$(document).ready(function() {
		$("#menu-filtres li a").click(function(){
			$("#menu-filtres li a").switchClass('active', 'off', 0);
			$(this).switchClass('off', 'active', 0);
			return false;
		});
		$("#category-all").click(function(){
			$("#loader").switchClass('close', 'open', 0);
			$("#liste-resultats li").switchClass('off', 'on', 0);
			$("#loader").switchClass('open', 'close', 1200);
			return false;
		});
		$("#category-1").click(function(){
			$("#loader").switchClass('close', 'open', 0);
			$("#liste-resultats .item-category-1").switchClass('off', 'on', 0);
			$("#liste-resultats .item-category-2").switchClass('on', 'off', 0);
			$("#liste-resultats .item-category-3").switchClass('on', 'off', 0);
			$("#loader").switchClass('open', 'close', 1200);
			return false;
		});
		$("#category-2").click(function(){
			$("#loader").switchClass('close', 'open', 0);
			$("#liste-resultats .item-category-1").switchClass('on', 'off', 0);
			$("#liste-resultats .item-category-2").switchClass('off', 'on', 0);
			$("#liste-resultats .item-category-3").switchClass('on', 'off', 0);
			$("#loader").switchClass('open', 'close', 1200);
			return false;
		});
		$("#category-3").click(function(){
			$("#loader").switchClass('close', 'open', 0);
			$("#liste-resultats .item-category-1").switchClass('on', 'off', 0);
			$("#liste-resultats .item-category-2").switchClass('on', 'off', 0);
			$("#liste-resultats .item-category-3").switchClass('off', 'on', 0);
			$("#loader").switchClass('open', 'close', 1200);
			return false;
		});
});
CSS :
body {font-family:Arial;font-size:11px;color:#fefefe;background:#2b2c2e url(http://www.david-vincent.fr/css/skin/bg_mainContent.jpg) no-repeat 50% bottom;background-attachment:fixed;padding:0;margin:0;text-align:center;}
h1 {font-size:22px;}
h2 a {font-size:12px;text-align:center;color:#000;}
h5 {text-align:right;font-size:10px;margin:4px 7px 0 0;}
.content {width:1000px;margin:0 auto;}
#menu-filtres {width:993px;height:30px;margin:30px auto 12px auto;background:#2b2c2e;padding:7px 0 0 7px;}
#menu-filtres li {background:#666666;padding:4px;float:left;}
#menu-filtres li a { background:url(skin/bg_li-filtre.png) no-repeat 0 -26px;padding-left:20px;}
#menu-filtres li a:hover, #menu-filtres li a.off:hover {background-position: 0 1px;}
#menu-filtres li a.off {background-position: 0 -26px;}
#menu-filtres li a.active {background-position: 0 1px;}
#menu-filtres li.vide {background:none;padding:0;margin:0;float:right;}
#menu-filtres li.vide a {background:none;padding:0;margin:0;}
#liste-resultats {position:relative;width:1000px;margin:0 auto;background:#2b2c2e;margin-bottom:160px;}
#liste-resultats #loader {width:100%;height:100%;background:#2b2c2e;position:absolute;top:0;left:0;z-index:9999;}
#liste-resultats #loader p {margin-top:120px;width:100%;text-align:center;}
#liste-resultats #loader p span {display:inline-block;width:100%;}
#liste-resultats #loader.open {visibility:visible;}
#liste-resultats #loader.close {visibility:hidden;}
#liste-resultats li.item {float:left;background:#444444;margin:10px 8px;height:150px;overflow:hidden;}
#liste-resultats li.on {display:block;}
#liste-resultats li.off {display:none;}
#liste-resultats li .picture {}
#liste-resultats li .picture span {}
#liste-resultats li .picture span img {width:220px;margin:7px 7px 0 7px;}
#liste-resultats li .title {text-align:left;margin: 0 7px;padding-top:4px;}
#liste-resultats li .title h3 {font-size:12;font-weight:bold;}
#liste-resultats li .title h4 {font-size:10px;}
  • démo
  • télécharger
  • facebook
  • twitter

Catégories de l'article :

  • w3c valid
  • w3c valid

Le contenu de cette page nécessite une version plus récente d’Adobe Flash Player.

Obtenir le lecteur Adobe Flash

  • 06 34 50 37 44
  • Email : infos@david-vincent.fr
  • Paris 9eme