Issuu on Google+

Vivien Cormier Digital Publishing Webdesign

d

e v e

lo

p

p

e

r

Dev


« Je m’appelle Vivien Cormier, j’ai 20 ans et je souhaite rejoindre votre formation en tant que développeur. Je suis une personne curieuse et très avide de nouvelles technologies. Je suis attiré par les tablettes tactiles qui sont pour moi un nouveau moyen de communication exceptionnelle pour rendre des contenus ludiques et interactifs »


Mon Portfolio - http://www.viviencormier.fr/

Pour dynamiser le site, j’ai décidé d’ajouter une animation lors de l’ouverture de celui-ci. L’iPad arrive sur la page après une chute, pour réaliser cet effet j’ai utiliser du Html5, css3 et jQuery. Les tablettes tactiles prenant de plus en plus de place dans notre vie, j’ai décidé de rendre ce site compatible sur ces périphériques. C’est pour cette raison que je n’ai pas conçu ce site en Falsh. Le serveur qui héberge le site n’étant pas très performant, je devais précharger les images avant de jouer l’animation. Pour réaliser cette fonction, j’ai utilisé «html5Preloader».


Préchargement à l’aide de html5Preloader() Cette fonction est assez simple à utiliser, il suffit de déclarer un objet et d’y ajouter les images à charger. Ensuite, je lance mon animation avec une méthode qui détecte la fin du chargement. Avec ce code, mon animation ne se lancera pas sans mes images. $(document).ready(function() { //Déclaration de l'instance qui contiendra les images. var myLoader = new html5Preloader(); //Je charge les images de mon animation myLoader.addFiles('./animation-ipad/app-store-indosponible.png'); myLoader.addFiles('./animation-ipad/fissure.png'); myLoader.addFiles('./animation-ipad/ipad.png'); myLoader.addFiles('./animation-ipad/ombre.png'); myLoader.addFiles('./animation-ipad/reflet.png'); myLoader.addFiles('./animation-ipad/telecharge-apercu.png'); myLoader.addFiles('./animation-ipad/titre.png'); myLoader.addFiles('./animation-ipad/trait-cyan.png'); myLoader.addFiles('./animation-ipad/fond.jpg'); //Quand toutes mes images sont chargées je lance l'animation' myLoader.on('finish', function(){ animation(); }); }); function animation(){ //Je cache la div qui contient une image illustrant le chargement $("#preLoader").css("display", "none"); //J'affiche la div contenant l'animation' $(".animationiPad").css("display", "block"); //Je lance les animations ipad(); reflet(); ombre(); fissure(); setTimeout(function(){ titre(); trait(); }, 1500); }

Image contenue dans la div «preloader» et qui est affichée pendant le chargement de l’animation.

Pour améliorer ce code, je pourrais récupérer l’avancement du chargement pour le répercuter sur l’image du preloader. Nous pouvons imaginer que le preloader affiche le pourcentage du chargement.


Note Mon Site - http://www.notemonsite.com/


Redimensionnement des images

Ce site fut réalisé en équipe dans le cadre d’un projet tutoré. «NoteMonSite» est un réseau communautaire pour les développer web, son but est de permettre aux concepteurs de site de recevoir des avis constructifs de la part d’autres membres. Pour déposer un site, le créateur doit remplir un formulaire. Le code ci-joint contient la fonction qui redimensionne les screenshots des sites.

function redimImage($url, $formath, $formatl, $largeur, $hauteur, $adrDst) { //Récupération des dimensions de l'image originale pour le cacul des nouvelles dimensions list($largeurSrc, $hauteurSrc) = getimagesize($url); //Condition pour calculer les nouvelles dimensions selon le format if ($largeurSrc <= $hauteurSrc) { $largeur = ($hauteur * $largeurSrc) / $hauteurSrc; $hauteur = ($largeur * $hauteurSrc) / $largeurSrc; } else { $hauteur = ($largeur * $hauteurSrc) / $largeurSrc; } //Redimensionnement $imageSrc = imagecreatefromjpeg($url); $imageDst = imagecreatetruecolor($formath, $formatl); imagecopyresampled($imageDst, $imageSrc, 0, 0, 0, 0, $largeur, $hauteur, $largeurSrc, $hauteurSrc); //Création du nouveau fichier image imagejpeg($imageDst, $adrDst, 100); }

imagedestroy($imageSrc);

Arborescence de «NoteMonSite» :


Blog - http://www.olyxo.com/

Depuis maintenant plus d’un an, je suis rédacteur sur le blog Olyxo. Nous avons décidé moi et des amis SRC de Laval de créé ce blog dans le but de partager notre passion du graphisme. Ce site me permet surtout de découvrir les CMS, en dehors de rédiger des articles je m’occupe du développement du site. Grâce à ce site, je teste les nouvelles méthodes de référecment pour Google, mais aussi pour Facebook avec l’OpenGraph.

J’ai créé un second site pour Olyxo, pour notre projet artistique sur la «Comic sans Ms». Ce site est en PHP pour permettre de récupérer les créations des personnes.


Affichage des catégories sous Wordpress Dans les semaines prochaines, nous allons mettre en place le nouveau design. Nous avons décidé de remplacer le nom des catégories par des icônes (voir image ci-contre). Pour arriver à ce résultat j’ai du modifier la fonction get_the_category_list() de Wordpress. Il faut savoir que chaque catégorie à un id unique, il me suffit de changer la valeur de retour pour que celle-ci renvoie une image avec comme nom la valeur de l’id. Ensuite il me reste à changer le nom de mes icônes par l’id qui correspond.

if ( '' == $separator ) { $thelist .= '<ul class="post-categories">'; foreach ( $categories as $category ) { $thelist .= "\n\t<li>"; switch ( strtolower( $parents ) ) { case 'multiple': if ( $category->parent ) $thelist .= get_category_parents( $category->parent, true, $separator ); $thelist .= '<a href="' . get_category_link( $category>term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category>name ) ) . '" ' . $rel . '><img src="http://www.olyxo.com/wp-content/themes/olyxo-v2/ images/' . $category->term_id.'.jpg" alt="" /></a></li>'; break; case 'single': //J'ai modifier la ligne suivante pour que la fonction renvoie une iamge $thelist .= '<a href="' . get_category_link( $category>term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category>name ) ) . '" ' . $rel . '><img src="http://www.olyxo.com/wp-content/themes/olyxo-v2/ images/'; if ( $category->parent ) $thelist .= get_category_parents( $category->parent, false, $separator ); $thelist .= $category->term_id.'.jpg" alt="" /></a></li>'; break; case '': default: //Cette ligne aussi fut modifier $thelist .= '<a href="' . get_category_link( $category>term_id ) . '" title="' . esc_attr( sprintf( __( "View all posts in %s" ), $category>name ) ) . '" ' . $rel . '><img src="http://www.olyxo.com/wp-content/themes/olyxo-v2/ images/' . $category->term_id.'.jpg" alt="" /></a></li>'; } } $thelist .= '</ul>'; }


Petites Mains & Cie - http://www.viviencormier/ petites-mains-&-cie/

En deuxième année SRC à Laval je devais réaliser une application en Flash pour présenter un artisan. J’ai utilisé du contenu interactif pour rendre ce site ludique comme par exemple un cyclorama. Nous avions des contraintes à respecter et chaque application devait contenir une vidéo d’un présentateur intégrer dans le site. Pour me démarquer des autres personnes, j’ai mis en place des «cue point»

dans ma vidéo pour que le présentateur puisse interagir avec le site. Ce site fait partie des deux applications sélectionnées par le corps enseignant parmi les SRC de Laval pour participer au Festival SRC à Angoulême.


Animation des photos de la galerie Dans un souci de pratique, j’ai choisi de rendre ma galerie modifiable grâce à un fichier XML. Chaque image est ensuite animée lors de son apparition sur la scène à l’aide d’un Tweener. Le code si dessous explique la méthode pour avoir une apparition aléatoire.

public function placementPhoto(e:Event):void { //L'objet Zoom correspond à l'iamge qui est affichée en grand //Comme je veux que l'image reste même quand l'utilisateur clique sur une nouvelle image de la galerie je créer un nouvelle Objet Zoom à chaque clique var zoom:Zoom = new Zoom; //Cette condition est valable qu'une seule fois est permet d'initialiser le placement de la premiere photo if (positionInitiale){ Tweener.addTween(zoom,{x:Math.round(Math.random()) * (600 - 200) + 200,y:175,rotation:2,alpha:1,time:0,transition:"easeOutIntCirc"}); positionInitiale = false; } //L'inclinaison de la photo est ensuite choisie aléatoirement var rotationAlea:Number = Math.round(Math.random() * 5); //Les images ont une rotation négatives une fois sur deux if (negatifRotation){ rotationAlea = - rotationAlea; negatifRotation = false; } else{ rotationAlea = rotationAlea; negatifRotation = true; } //J'ajoute mon Loader à ma scéne addChild(zoom); //J'utilise un premier tweener pour mettre l'alpha à zero Tweener.addTween(zoom,{alpha:0,time:0,transition:"easeOutIntCirc"}); //ensuite je charge ma photo dans mon loader zoom.load(new URLRequest(e.currentTarget.photo)); //Puis je lance mon animation qui placera ma photo sur ma scéne Tweener.addTween(zoom,{x:Math.round(Math.random()) * (600 - 200) + 200,y: 175,rotation:rotationAlea,alpha:1,time:2,transition:"easeOutIntCirc"}); }

Pour immerger l’utilisateur dans l’environnement de l’artisan il est possible de mettre le site en plein écran et de se laisser bercer par le son d’ambiance.


Tranzistor - http://www.tranzistor.org/

Pour mon stage de 10 semaines, j’ai pour rôle de refondre le site du magazine Tranzistor. À l’heure ou se dossier technique est rédigée le site n’est pas encore en ligne, mais vous pouvez voire son avancement à cette adresse : http://www.tranzistor.org/tranzistor/ Sur ce projet je suis la seule personne programmant le site, les autres employés n’étant pas dans le domaine du web.

C’est donc sur moi que repose la réussite de ce site, je me dois de bien aiguillé et expliquer mes choix lors de la réalisation. Pour l’instant je ne suis que sur la partie HTML, mais dans les prochains jours je vais débuter la partie administrateur du site.


SRC Alternance - http://www.src-alternace.fr/

En première année SRC à Laval nous devions réaliser la maquette en HTML pour le site de l’alternance. Parmi les 12 projets proposés par les étudiants, c’est notre site qui fut sélectionné. La partie PHP fut développée par un autre groupe un peu plus tard.


Mon CV interactif sur tablette tactile

Depuis bientôt un an je m’intéresse de très prêt au monde des tablettes tactiles, bien loin de l’effet de mode c’est pour la diversité des interactivités possible que ce support me plait. Je souhaite dans un futur proche créer des magazines et des livres interactifs pour les tablettes tactiles. Je vous invite à lire mon article sur le renouveau des magazines grâce aux tablettes

tactiles.(http://t.co/54Ys0RuB). J’ai débuté avec Digital Publishing Suite d’Adobe. Cet outil permet de créer aisément du contenu interactif grâce à Indesign, pour aller plus loin il est possible de rajouter du contenu html5 comme des animations.


Afin de rajouter de la viralité à mon CV, j’ai ajouté le plug-in de commentaire Facebook, de cette manière lorsqu’un utilisateur commente mon CV, une description de mon application apparait sur son mur.

Exemple de contenu interactif : Pour afficher le dessin colorisé, l’utilisateur doit «gratter» l’image. Cet effet est réalisé grâce aux canvas d’Html5


Colorfuly - Livre pour enfant interactif

Avec l’aide d’une amie graphiste, nous avons comme projet de réaliser un livre interactif pour enfant sur la notion des couleurs. Léa Taloc qui réalise les visuels invente aussi l’histoire. Moi je vais développer le livre en objective-C, j’ai pour l’instant de très petites bases dans ce langage, mais j’espère évoluer rapidement pour concrétiser ce projet.



Book Vivien Cormier v1