Comme la tradition le veut, nous avons pris de bonnes résolutions pour cette nouvelle année.

Nous nous engageons à toujours être au plus près de l’actualité du web : langages, stratégie, évolution des comportements. En 2011, nous avons détecté de nouveaux sujets sur lesquels il va falloir nous pencher plus avant :
-    Le HTML 5, CSS3 et schema.org
-    Wordpress
-    La mobilité

Bien sûr, nous poursuivrons notre ligne éditoriale en publiant des articles sur vos sujets préférés : communication, logiciels PAO, tourisme, stratégie web…

Sabrina et Caroline, Web Créatif

Pourquoi avoir choisi SendBlaster ?
 

Je m’y attèle, et vous raconte l’histoire depuis le début

Pour réaliser nos campagnes emailing, il nous a fallu trouver une solution réputée. Sur les forums, c’est la guerre entre Sarbacane et SendBlaster.
Nous avons opté pour SendBlaster, car l’interface est plus optimisée, il possède une version gratuite et une version payante professionnelle, et surtout il y a des outils de vérification de spam et de tracking.

Et la modification de template alors ?
 

Lorsque vous créez un nouveau message dans SendBlaster, vous trouvez un menu sur votre droite, dont le bouton "Choisir un modèle". Vous avez alors la possibilité de choisir différents templates. Prenons pour notre exemple le modèle Web 1.

Pour modifier un template, il faut avoir quelques bases en HTML/CSS et avoir un accès FTP sur votre serveur.

Prêt à plonger dans le code HTML ? 

Et oui le code HTML et CSS d’un emailing est très préhistorique, la majeurs partie des CSS ne sont pas pris en compte dans les messageries. La mise en page d’un emailing se fait donc en tableau (dur dur pour les webmasters 2012) et les styles css sont introduits dans les attributs HTML.
De la taille du tableau, à la couleur d’arrière plan, tous les styles css sont mis en ligne, on parle de style in-line.
Pour voir le spectacle : cliquez sur "afficher le code" dans la barre de mise en page.

<TD style="PADDING-BOTTOM: 5px; MARGIN: 0px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-FAMILY: Tahoma; COLOR: #ffffff; FONT-SIZE: 18px; FONT-WEIGHT: bold; PADDING-TOP: 5px" ctass="tdTitle">
<DIV style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT-SIZE: 18px; FONT-WEIGHT: bold; PADDING-TOP: 0px">Lorem ipsum dolor sit amet</DIV></TD></TR></TBODY></TABLE>

Pour modifier plus facilement le template, vous allez pouvoir télécharger le plugin de l’éditeur HTML avancé. Pour cela, retour sur la page d’accueil, cliquez sur "Utiliser des plugs-in".
De là téléchargez le plugin Advanced HTML Editor.

C’est fait ?  Et bien retour sur la composition du message et vous devez avoir une nouvelle icône dans votre barre de mise en page.
En cliquant, une nouvelle fenêtre de dialogue apparait avec votre template.

Adressage absolu des images

En double-cliquant sur l’image du bandeau, vous avez accès aux propriétés de l’image.

Vous pouvez alors entrer l’adresse absolue de l’image dans le champ "Source" (cela nécessite donc d’avoir mis en ligne vos images sur votre serveur). Le lien absolu utilise l’adresse URL, c’est un chemin d’accès complet à partir du nom de domaine. Ici http://www.web-creatif.net/img/bando_accueil.png

Vous devez entrer les dimensions de l'image : champs largeur et taille.
Puis vous pouvez changer toutes les images de la même manière.
Enfin validez en bas de la fenêtre avant de retourner sur l'écran principal de composition de message.

On change de style

Pour l’image de fond, la chose se complique, puisque nous devons aller dans le code HTML via "Afficher le code".
Maintenant, il vous suffit de vous armer de patience, et de prendre une bonne paire de lunette afin de retrouver ce qui pourrait ressembler au code de l’image de fond.

Je vous aide, ça ressemble à cela :

background=C:\Users\caroline\AppData\Local\Temp\~ed_sb_i\~files\5.png

Et de la même manière que le bandeau, vous entrez l’adresse absolue de l’image de fond :

background=http://www.web-creatif.net/img/gouttedeau.jpg

Pensez à changer ou supprimer la couleur de fond bleu restée derrière l’image (pour ma part, j’ai mis du blanc) :

<TD style="BORDER-BOTTOM: #04c8e5 4px solid; BACKGROUND-COLOR: #fff"><IMG border=0 alt="ABC Widgets" src="http://www.web-creatif.net/img/bando_accueil.png" width=966 height=291></TD></TR>
 
 

Il ne reste plus qu’une étape : changer la couleur de fond bleu des titres.

Pour cela, il suffit de trouver la propriété bgColor de l’attribut Table dans le code HTML.

 
Si jamais la couleur de fond de la cellule date vous dérange, vous pourrez changer les paramètres dans les styles présents avant le <body>

.td.date{
    padding: 5px; background-color:#fff;
}
td.date p {
    background-color:#fff;
    font-family: Tahoma;
    font-size: 12px;
    font-weight: normal;
    color: #000000;
    margin: 0px;
    padding: 5px 0 5px 5px;
}

Voila, notre tuto est fini, vous avez un début de template adapté à votre charte graphique. Facile non ? 

Ceci est un extrait de la formation "emailing professionnel avec HTML et Sendblaster" : on ne garde pas nos contenus égoïstement, c'est ça l'esprit du web !

Cette actualité m'a décidée à vous présenter le vocabulaire des projets web, notamment les MOA et MOE que l'on retrouve fréquemment dans les appels d'offres (AO).

Le périmètre du projet

Le projet web définit  la réalisation d'une prestation, celle-ci répond :

- à un besoin,

- à un délai et un budget donnés,

- à un niveau défini de qualité.

Ces trois engagements intrinsèques - qualité, délai et coût - définissent ce que l'on nomme « le périmètre » du projet.

Qui demande : la maîtrise d'ouvrage (MOA)

Également appelée « client » d'un projet, la Maîtrise d'Ouvrage est la personne ou l'entité à l'origine de la demande. Ce peut être, selon les cas, une société extérieure ou une unité interne de l'entreprise. Elle définit le site Web, le besoin, vérifie l'adéquation des solutions proposées et est économiquement responsable du produit (c'est le payeur).

Qui réalise : la maîtrise d'œuvre (MOE)

Il s'agit de la personne ou de l'entité qui réalise le projet afin de répondre à la demande d'une maîtrise d'ouvrage. Elle définit et conçoit la solution, la réalise et assiste souvent la MOA dans le démarrage du projet.

Les études préalables

L' étude préalable consiste à collecter et à analyser les informations relatives au lancement du projet : analyser la nature du marché et identifier les besoins existants.

Études de faisabilité, études de marché et étude de la concurrence peuvent aider dans cette démarche. Au final, il est important d'identifier la cible et les besoins, estimer  le niveau d'équipement des futurs internautes et surtout définir les objectifs généraux et le type de site qu'il faudra mettre en œuvre.

Le cahier des charges fonctionnel

L'AFNOR définit le cahier des charges fonctionnel comme un document par lequel le demandeur exprime son besoin en terme de fonctions de services et de contraintes. Pour chacune d'elles sont définis des critères d'appréciation et leurs niveaux. Chacun de ces niveaux doit être assorti d'une flexibilité. (Source : AFNOR / Norme NF X 50151)

Le cahier des charges fonctionnel est un document par lequel le client (maîtrise d'ouvrage) exprime son besoin. Ce dernier doit être formulé en termes de fonctionnalités que le futur internaute aura à accomplir, ou que le site Web devra accomplir pour lui. Il s'agit d'un élément clé du projet, il va permettre à l'équipe de réalisation :

• de savoir ce qu'elle doit développer ;
• de définir comment elle doit le développer.

L'AMO ou la formation ?

Si vous n'êtes pas "technique", faites-vous aider par une AMO (Assistance à Maîtrise d'Ouvrage) ou une formation au projet web et cahier des charges.

De nombreux projets web ont échoué en raison d'un cadrage initial insuffisant : les besoins ont été trop peu ou mal définis, aucune stratégie n'a été clairement identifiée, aucun budget n'a été prévu pour l'exploitation...

Y aller : oui, mais pas n'importe comment !

Si on vous inscrivait à une course à pied, vous aimeriez connaître la distance, le type de terrain, le parcours, le temps de référence, les points de ravitaillement, etc ...

Un site web demande de la préparation et des compétences en amont, comme une épreuve sportive : faites-vous aider si vous vous sentez court, ou si vous avez peur de tomber sur de mauvais prestataire.

Jean-Michel, du CDT Anjou, y pose une question faussement innocente (attention au piège !) :

"Petit quizz : Prendre en compte les utilisateurs dans la conception de son site web... (aucun joker disponible mais rien ne vous empêche d'appeler un ami) ;)"

a) Je le fais si j'ai le temps

b) Ca ne sert à rien

c) Utile mais pas indispensable

d) Indispensable si je veux qu'il soit utilisé par quelqu'un d'autre que moi

Ah la belle question, dont la réponse semble si évidente… Dans les faits, l'utilisateur final n'est pas toujours pris en compte en amont du projet.

Le projet web en quelques notions : préambule et sommaire

Je vous cite l'introduction du livre "conduite de projet web" aux éditions Eyrolles :

"Il suffit de « bien » développer un site pour que ce dernier soit une réussite". C'est une condition essentielle certes, mais non suffisante. Le succès d'un tel projet passe en effet par une approche multidisciplinaire. Ainsi est-il nécessaire pour toute personne souhaitant mettre en œuvre un site web de disposer de connaissances aussi bien dans le domaine de la gestion de projet que dans ceux de l'ergonomie, de l'hébergement, du référencement, de la promotion et de l'animation, de l'analyse d'audience et des aspects juridiques.

On le comprendra, un projet web nécessite une réflexion stratégique - et au minimum - une compréhension du lexique basique.
Voici le sommaire du powerpoint qui suit :

• Le projet Web
• Stratégie d'objectifs et stratégie de cibles
• La veille concurrentielle et le benchmarking
• Positionnement (marketing)
• Faisabilité
• Le cahier des charges
• La planification
• Les métiers du Web
• L’arborescence : étape clé d’un projet Web
• Navigation vs arborescence
• Ergonomie Web
• Elements de Webdesign
• Hébergement et serveurs
• Le nom de domaine
• Mentions légales (1)
• Documents propres au projet Web

Le diaporama

Ce diaporama se propose de vous ouvrir à la réflexion stratégique : votre image de marque est un enjeu.

Il vous présente ci-après l'importance de la photo, et les messages qu'elle communique sur vous...

L'image, c'est votre marque, votre valeur ajoutée !

Je vais vous exposer l'importance du visuel sur vos supports, car souvent, la photo est le parent pauvre de la communication. A quoi sert une maquette bien conçue, un beau dépliant ou une plaquette aux textes convaincants, si vous avez des images de piètre qualité ?

Si vous déployez beaucoup d'énergie à développer et mettre au point votre activité, il est dommage de dévaloriser votre travail en l'illustrant avec des visuels insipides et dissuadants. De plus, dites-vous que votre prospect va avoir de vous, et donc de votre travail, une impression de médiocrité. Je ne crois pas que ce soit le but recherché.

Une première impression négative est toujours extrêmement difficile à rattraper.

Quel prix a votre image de marque ?

Croyez bien que ce paramètre est primordial, la qualité des images influence positivement ou négativement le subconscient et il ne faut pas considérer cela à la légère

Posez-vous les bonnes questions : que recherchez vous ?

- Vendre vos produits ? Il faut séduire

- Renvoyer une image de professionnalisme ? Il faut convaincre

- Que vos futurs clients viennent en confiance ? Il faut rassurer

Iriez-vous à un rendez-vous professionnel mal habillé ? mal rasé ? ebouriffé ?

Bien sûr que non ! Pourtant, vous n'hésitez pas à communiquer avec des photos toute moches.

Utilisez des images de qualité professionnelle : vous obtiendrez un meilleur résultat en passant par un photographe professionnel. Surtout ne demandez pas à tonton Jean-Marc qui a eu son nouvel appareil à Noël : beaucoup trop de gens pensent savoir faire des photos. La photographie reste un métier à part entière...

L'image photographique de votre savoir-faire est le prolongement de votre sérieux, de votre exigence, de votre professionnalisme, aux yeux de vos clients et prospects.

Ces courriers indésirables portent aussi le nom de pourriels ou de SPAM. Mais que signifie au juste le mot SPAM, et d'où vient-il ? 

Retour sur l'origine:

Littéralement SPAM se traduit en anglais : Shoulder of Pork and Ham, autrement dit épaule et jambon de porc. Ce mot anglais a une origine inattendue, en réalité il fait référence à un sketch télévisé de 1970, intitulé « SPAM » réalisé par les Monthy Python, groupe de comiques anglais à l’humour burlesque.

L'histoire se déroule dans un bar, où un couple s'attable et demande le menu à la serveuse. Pour chaque plat du menu, la serveuse énumère et répète sans arrêt le mot SPAM. Dans ce sketch, le SPAM, désigne le jambon en boite qui se trouve être une marque de conserve de viande renommé au Royaume-Uni. Le terme SPAM envahit alors les discussions.

Pendant ce temps, un groupe de viking chante bruyamment : « spam, spam, lovely spam, wonderful spam », la conversation initiale entre les clients et la serveuse est recouverte par le chant des guerriers.

La similitude se comprend avec les courriers indésirables qui parasitent nos boîtes mails

Suite attendue du dernier article : la mairie de St Julien m'a commandé un logo, quelle tête va-t-il avoir ? ...

Moment de vérité devant la commission

Après 3 semaines de recherches graphiques, je présente mon travail devant la commission.

Un diaporama PowerPoint me permet de leur rappeler :

- leurs choix graphiques : polices, couleurs, formes et compos

- leurs choix de représentation : ruralité, dynamisme, tourisme, lac du Jaunay

La suite, c'est la présentation argumentée de mes recherches graphiques.

En conclusion, c'est l'irrationnel qui va décider : moment de vérité, rien n'est acquis...

Le coeur du graphiste bat, l'incertitude pointe le bout de son nez : un logo peut faire l'objet d'un véritable coup de coeur ou à l'inverse, d'une grande déception...

Je vous livre le diaporama de restitution tel que présenté

Logo final et nouveau panneau

Voici donc le logo finalement validé et le panneau où il a été présenté la première fois aux landais (désolée pour la qualité, photo prise avec un vieux téléphone portable) : 

Raconter les histoires de création de logo est devenu une constante dans ce blog. Nouveau logo, nouvelle histoire : aujourd'hui, nous allons étudier la demande de la mairie de St Julien des Landes. Rendez-vous est pris pour l'audit graphique, je suis accueillie par une équipe municipale dynamique et volontaire.

La réunion de travail commence par une présentation de la commune :

St Julien des Landes est une commune rétro-littorale qui peut s'enorgueillir de sa position géographique : elle est située à proximité de la 4 voies, à 20 kms de St Gilles, Brétignolles, et La Roche sur Yon.

Sa position est renforcée par son attrait touristique :

- 1000 emplacements de camping autour du Lac du Jaunay et dans le bourg,

- des sentiers balisés pour randonneurs, vttistes et cavaliers

- un parcours dans les arbres et un paint ball : le grand Défi

- une programmation culturelle dynamique avec les Jaunay 'stivales, le salon des artistes landais

C'est une commune en pleine expansion, mais qui a su préserver son cadre de vie naturel, tranquille. L'environnement est utilisé et apprécié.

L'audit graphique : 30 logos passés au crible de la critique graphique

S'ensuit une présentation commentée de logos de tous horizons : l'objectif étant de comprendre les goûts et l'envie de représentation des membres de la commission. Des lignes directrices se dessinent, 2 orientations différentes entre :

- un souhait de figuratif aux couleurs gaies

- une envie de concept plus abstrait, capable de représenter la notion de territoire et ses activités économiques.

Les recherches au brouillon

Deux idées principales vont se dégager : je vous livre mes brouillons (sans explications )en attendant le prochain article : vous y verrez la restitution totale du travail de créa, ainsi bien sûr que le logo finalement validé.

La transformation manuelle peut être activée via le menu "édition > transformation manuelle" ou par le raccourci clavier CTRL + T. Une fois lancée, la commande fait apparaître un cadre avec des poignées aux coins et sur les côtés...

Plutôt que d'aller chercher les actions au cas par cas dans le menu édition > transformation > homothétie, rotation, inclinaison, etc…,  vous pouvez tout actionner à l'écran, à condition de connaître les raccourcis suivants :

- L'homothétie : elle permet de diminuer ou agrandir un calque tout en conservant les proportions. Vous l'obtiendrez en cliquant sur les angles avec la touche MAJ enfonçée

- Rotation : vous pourrez pivoter votre calque en éloignant votre souris des poignées

- Perspective : pour redresser les fuyantes, maintenez ALT GR et MAJ enfoncés

- Torsion : CTRL en cliquant dans les coins

- Inclinaison : CTRL + MAJ en cliquant dans un coin ou sur une poignée latérale

Caroline vient de rejoindre l'agence : à ce titre, elle va également apporter sa contribution à la vie du blog. Mais mieux vaut qu'elle se présente elle-même …

Mon parcours, mes passions, mes projets

Bonjour,

 Je suis la petite nouvelle de l'agence Web Créatif :  pas si nouvelle que ça en fait puisque j'y ai effectué mes stages en décembre puis de février à mai.  

Mes études:

J’ai obtenu ma licence d’arts plastiques en 2010.  

Passionnée des arts numériques depuis lors, j’ai voulu me perfectionner dans les domaines du graphisme et du web.

J'ai intégré Sup communication à Luçon et j'y ai fait la connaissance de professionnels aguerris : Sabrina échappé, la référante pédagogique,  Grégory Jonik et Frank Fortineau, les intervenants développeurs.

Sabrina m'a vite fait confiance et m'a proposé le stage à l’agence Web Créatif. J’ai découvert  le graphisme, le web, l’intégration, la formation.

Mon stage fut une révélation, j'avais envie qu'il se prolonge : à la sortie de l’école… j'y suis retournée, mais cette-fois-ci  en tant que collaboratrice (et bras droit - ou gauche ça dépend des jours ;)

Qu'est-ce que je vais apporter au blog ?

L’échange est important dans notre métier, et garder ses compétences pour soi n'est pas dans ma nature. Je vous annonce donc officiellement que j'écrirai de futurs d'articles et tutoriaux sur :

- Photoshop : les fondamentaux, les techniques de création avancées, des trucs et astuces

- Illustrator : les bases d’Illustrator, la manipulation de la plume, mais aussi des fonctionnalités plus méconnues

- InDesign : les basiques de mise en page, de création de documents…

- Webdesign : des analyses de graphismes réussis, des astuces de création

- Ergonomie : les grands principes visuels pour la lisibilité, l'accessibilité et l'utilisabilité.