Php, php, php? vous avez dit php?
Encore un langage de programmation. Et moi, j'y connais rien à la programmation web. Non pas que j'y sois allergique mais ça fait vraiment beaucoup de choses à apprendre et à maîtriser pour créer un site web : entre le html, photoshop, css, illustrator, javascript, audit lexical, cms, etc... je ne sais plus où donner de la tête ni du clavier!
Et si vous venez furetez sur ce blog vous êtes peut-être dans le même cas...
Quand on était petit on comprenait mieux les maths avec des bonbons. Aujourd'hui, ça marche encore pour moi avec des chaussures à la place des bonbons. Mais j'assume.
Il y a une gentille dame qui sait tout ça et qui s'est dit qu'elle allait faire des tutoriels pour débutants pressés (et gourmands).
Résultat: un php aux petits oignons. Euh, je voulais dire au chocolat!
Merci à Sylvie Vauthier.
                        PHP : Le tutoriel pour grands débutants pressés                                            

Dans ce tutoriel, que vous pouvez télécharger en pdf, vous trouverez quelques réponses au grand mystère du php:que fait php? les notions clés en programmation (variable, boucle, etc.), echo, formulaire, syntaxe...
Allez, on respire un grand coup et on se lance: php n'est pas méchant... vous verrez, on dirait un genre de super-héros qui transforme l'affichage statique de vos fichiers html et css en contenu dynamique!
(C'est Sylvie Vauthier qui le dit, c'est pas de moi!)
A bientôt.

Jeudi après-midi (le 19 novembre), S2Cwebdesign avait rendez-vous à la mairie de Courcelles-lès-Montbéliard pour faire le point sur l'avancée du projet de site web.

Présents:

Christian Quenot, maire de Courcelles et membre de la commission communication

Eric Perrot, adjoint au maire et membre de la commission communication

Céline Mougel, responsable du graphisme et co-responsable du développement web de S2Cwebdesign

Stéphanie Chatelain, responsable de la communication et de la rédaction et co-responsable du développement web de S2Cwebdesign

Ordre du jour:

Valider l'interface du futur site web de Courcelles

Questions diverses : hébergement du site...

Les commanditaires sont ravis de la proposition finale de template pour leur site. Quelques points feront cependant l'objet de correction:insérer une feuille de chêne plutôt que de hêtre dans le logo, remplacer les silhouettes du bas de page par une famille de cyclistes...

Concernant l'hébergement, c'est One&One qui a été retenu: leader du marché, meilleur rapport clientèle, coût intéressant, possibilité d'héberger deux autres sites...

Nous sommes ensuite passé au contenu. Christian Quenot a fourni à notre équipe le contenu du menu "Histoire" du site. Plusieurs niveaux de lecture apparaîtront sur les pages de cette rubrique pour faciliter l'accès aux différents types d'informations (titre, résumé, exergue, contenu, illustrations légendées et créditées).

Il a également été décidé que nous présenterions notre projet à l'ensemble du conseil municipal le 11 décembre.

Ayant bien avancé sur le projet, tant au niveau du contenu éditorial que du graphisme, nous nous sommes dit au revoir et nous nous en sommes retournées à l'IUT.

A bientôt pour la suite.

Célien et Stéphanie.

Bonjour à vous qui êtes venus jusqu'ici glaner quelques conseils...
Je viens, de page en page, de découvrir un site très intéressant et qui pourrait bien figurer parmi les indispensables de notre liste du webdesign pour les néophytes.
"hiseo: être lisible pour être visible" est le site d'un prestataire indépendant en stratégie et marketing Web BtoB. Il aborde la rédaction web et les différentes étapes de la création de contenu éditorial: la phase d'écriture bien sûr, mais aussi tout ce qui tourne autour: le référencement naturel (et si vous vous demandez encore si c'est une nouvelle vague spirituelle, allez vite consulter leur site!), la structure sémantique, l'optimisation de contenu...
En prime des articles sur l'histoire du web, le html, le choix d'un CMS, etc.
Voici l'adresse de la page qui m'a beaucoup intéressée: www.hiseo.fr/contenus/la-redaction-de-pages-web/
(ou cliquez ici : La rédaction de pages Web)
et voici le début de l'article :

"Techniques de l'écrit commercial pour le Web : être lisible pour le lecteur pour être visible par les moteurs.

La rédaction de pages Web

Être lu par des humains. Être « compris » par les robots.

Voici les enjeux du référencement naturel (ou  référencement organique).

Le contenu rédactionnel d'un site constitue la base de son référencement.
Les moteurs de recherche y trouvent les mots que les internautes cherchent.
S'il s'agit de votre site Web ou celui de votre client, vous voulez que votre page apparaisse dans les premiers rangs des résultats.
Cette visibilité dans le top des liens est une question de mots."

Je vous laisse le soin d'aller regarder la suite de l'article pour découvrir "le pense-bête du rédacteur".

On reviendra bientôt sur les thèmes du référencement naturel et de la rédaction web.

Les outils Web2.0 et les collectivités territoriales

C'est le nom du dossier infosourcing de nos collègues du projet de site web pour la commune de Sourans.
"Quel est l'intérêt pour une collectivité d'adopter les outils du web 2.0? Quels outils choisir? Comment les intégrer?"
Je vous invite à visiter leur compte delicious ("projetwebsourans") et leur blog:Projet Sourans.

Twitter, c'est pas le copain de Gros Minet? Ah non, c'est Tweety.
A moins que ce soit le nom d'un truc qu'on faisait à saint-Tropez dans les années 60? Non plus, ça c'est le twist!

NON, NON, NON!

C'est pas grave, il n'y a pas longtemps qu'on s'adonne aux joies de Twitter (pour info, les hommes politiques en ont tous un).
On va donc vous faire profiter d'un article plein d'humour sur le sujet: http://aede.tumblr.com/post/212326177/comment-expliquer-twitter-a-tata-gisele.

Un peu plus sérieusement, sur le même site, vous trouverez "Twitter, le dico pour les nuls" à l'adresse suivante: http://aede.tumblr.com/tagged/Twitter

.

Deux autres articles intéressants:
Suivez Le Guide TwitterEt Ne Passez Pas À Côté De Ce Nouveau ...

Twitter de façon Pro : règles de base et vocabulaire | YouOnTheWeb

Et pour achever votre formation sur twitter, allez donc twitter et vous faire follower sur notre compte Twitter: Vous ouvrez Twitter et vous vous inscrivez. Ensuite dans "Favorites" (dans la colonne de droite) vous tapez S2Cwebdesign. Et voilà vous arrivez chez nous et vous pouvez voir tous nos messages, devinez sur quoi, sur le webdesign bien sûr! Twitter ça peut être utile et sérieux! si, si si!

Compte-rendu de réunion avec le commanditaire

Présents :
- Christian Quenot, maire de Courcelles-lès-Montbéliard
- Eric Perrot, adjoint aux sports, à l'environnement et à la forêt, et membre de la commission communication de la mairie de Courcelles
- S2Cwebdesign: Céline Mougel (responsable du graphisme), Stéphanie Chatelain (responsable de la communication et de la rédaction) et Chenghua Yue (chargée de recherches graphiques)
Ordre du jour :
Faire le point sur l'avancement des travaux!

Après avoir terminé l'étude préalable du site web de Courcelles, nous avions envoyé à Christian Quenot le cahier des charges, l'arborescence et le descriptif des pages, et les propositions de logos et de templates pour le site.
La réunion d'aujourd'hui avait donc pour but de valider ces différents éléments.
- Sur le cahier des charges, RAS, Christian Quenot ayant apprécié que ses requêtes aient été prises en compte (l'idée de blog a été abandonnée car cela nécessite une actualisation et une modération trop fréquentes par rapport aux disponibilités des personnes qui seront chargées d'administrer le site).
- Concernant l'arborescence, Eric Perrot a suggéré de rajouter les "commerces" et "restaurants" dans le menu "Courcelles" pour évoquer la vie économique de la commune. Dans le menu "Sortir", nous ajouterons aussi les restaurants de Courcelles et le bowling d'Audincourt. Dans le menu "Vie quotidienne", le sous-menu "Enfance" contiendra, en plus de "Ecole" et "Centre de loisirs", une rubrique "Gardiennes agréées", un service essentiel pour les familles qui souhaitent par exemple s'installer à Courcelles.
- C'est au niveau graphique qu'il y a le plus de modifications à effectuer.
Les logos que nous avons proposés pour identifier la commune sont trop "contemporains" et il faut trouver un compromis entre le blason de la commune, un peu obsolète mais symbolique et cher aux "anciens", et un visuel plus moderne qui soit en accord avec le public visé, les jeunes de 18-25 ans.
Christian Quenot et Eric Perrot ont demandé qu'il y ait plus d'éléments aquatiques dans les templates. Ce sera chose faite, le pied de page "herbe" sera remplacé par une rive du canal du Rhône au Rhin par exemple.
L'interface sera finalement un mix des deux templates proposés, avec si possible en tête de page, un bandeau de photographies qui se mettrait à jour en fonction des saisons.

Prochaine étape pour S2Cwebdesign, réaliser la maquette fonctionnelle du site de Courcelles (remise le 25 novembre).

Avec tous ces sites, liens et tutoriels, il y a de quoi se perdre...

Alors aujourd'hui, on fait le point sur les indispensables. Voici quelques sites pour constituer votre kit de survie dans la création/refonte de site web, institutionnel ou non

- Le siteduzero, c'est le site ABSOLUMENT INDISPENSABLE qui propose des Cours sous forme de Tutoriels ou d'Articles sur la Bureautique (Suite Microsoft ou OpenOffice) ou le Graphisme. Vous trouverez aussi des forums, des actus, des études... Et ça fait dix ans que ça dure!

- Autre indispensable, www.commentcamarche.net. Sur ce site, vous trouverez aussi des modes d'emploi pour débutants, initiés, sous formes de Dossiers (sur des sujets aussi variés que la  ou la ), des Actualités et un Forum. Mais aussi, des logiciels, des antivirus, ... à Télécharger , des Astuces... Un thème indispensable sur ce site: la législation, avec des sujets comme Le respect de la vie privée appliqué aux sites web ou Le droit à l'image appliqué aux sites web...

- Tout pour le webdesign, c'est sur www.webdesign-tutoriaux.com. Déjà1584 tutoriaux pour maîtriser des outils de Photoshop, Illustrator, etc. et réaliser des effets impressionnants. Une bibliothèque de Brushes (brosses) à télécharger (attention aux licences!).

- Si vous cherchez l'Inspiration Design (notamment 30 magnifiques sites Internet style Cartoon et illustration), l'Information Design (avec un glossaire de graphisme et des (une pour l'instant) présentations d'artiste Mathew Thomas), des Tutoriaux Design (ici aussi), rendez-vous sur www.wks.fr. Ce site d'e-learning propose aussi des Ressources gratuites comme Les 15 polices de caractères les plus utilisées sur Wks ! ou Plus de 500 000 photos gratuites chez PhotoXpress.

- Tous les noms barbares qui alimentent les cauchemars des néophytes que nous sommes, barbares et indigestes mais INDISPENSABLES pour réussir son site web, ne seront plus vos pires ennemis et deviendront peut-être vos meilleurs amis si vous allez sur le Sommaire du Développement Web - Zone « Grand débutant » de http://www.developpez.com/. Comme son nom l'indique, c'est rien que pour les grands débutants comme nous et les gens pressés (comme nous aussi!). Je ne vous en dis pas plus et vous laisse le soin de le  découvrir et d'en faire votre site de chevet.

- Un dernier pour la route : www-public.it-sudparis.eu/~milon/index.php. Ici, vous trouverez des rubriques centrées sur l'ergonomie et les différentes catégories à laquelle il faut appliquer ses principes : La définition des besoins, La navigation Web, La page d'accueil, La mise en page, L'écriture Web et  L'évaluation du site.

Nous vous avions promis de vous donner des conseils, des liens vers des tutoriels et des sites pour maîtriser les outils qui aident à la refonte d'un site web institutionnel.
Il y a différents domaines à connaître: le graphisme bien sûr, les langages de programmation (que nous allons voir prochainement), l'ergonomie, la gestion de projet (dans quelques jours, c'est promis), etc.
Mais il y a quand même une chose qu'il ne faudrait pas oublier: les INSTITUTIONS!!!
On peut partir du principe que la création/refonte de site web institutionnel concernera toutes les collectivités territoriales et organismes d'Etat, mais aussi les structures municipales, départementales... comme les conservatoires de danse et de musique, les piscines, les MJC...
Alors pour voir un peu plus clair dans tout ça, et nous nous doutons bien que ça paraîtra fastidieux à plus d'un, quelques liens pour comprendre les institutions françaises et européennes. Ca c'est donc juste une petite remise à niveau pour se familiariser avec l'univers des éventuels commanditaires. Et finalement, ça ne peut pas faire de mal puisque nous faisons tous partie de ces institutions et que nous avons même parfois un rôle à y jouer.
- Wikipedia, c'est forcément un peu encyclopédique, mais c'est assez utile et ça pourrait même faire office de cours magistral! le lien qui suit vous présente la liste des institutions françaises et leur contenu:
http://fr.wikipedia.org/w/index.php?title=Liste_des_institutions_fran%C3%A7aises&oldid=46194051

- Vie-publique.fr est un site très utile qui propose des dossiers, des chronologies, des actualités pour découvrir et comprendre ces institutions -très utile à ceux d'entre vous qui par exemple prépareraient des concours administratifs...) Découverte des institutions

- Toutel'Europe.fr parce que forcément, il faut se mettre à l'heure européenne!
Comme le précédent, ce site présente les institutions qui composent l'UE, l'histoire de cette dernière, et l'actualité des différentes commissions, conseils, etc. Institutions

- Pour que ce soit plus concret, n'hésitez pas à aller sur le site de votre conseil régional, de votre conseil général, de votre préfecture... pour connaître leurs compétences respectives.

Je veux bien admettre que c'est un peu fastidieux, mais n'oubliez pas qu'un site web institutionnel ne répond pas forcément aux mêmes attentes qu'un site d'entreprise... Alors la moindre des choses, c'est de savoir avec qui on parle...

Bon courage et à très vite.

On laisse le graphisme de côté quelques instants pour s'intéresser à l'autre point essentiel d'un site web: son contenu.

Si les visuels, le décor, l'apparence d'un site retiennent (ou non) l'attention du visiteur, son contenu est ce qui fidélise le visiteur... (ou non). Évidemment, graphistes et rédacteurs n'arrivent pas à se mettre d'accord. Nous allons donc jouer la carte de la diplomatie en disant qu'ils sont aussi importants l'un que l'autre.

Aujourd'hui, je vous propose donc d'aller visiter quelques sites, voire de vous inscrire à leurs flux RSS (ce que nous avons fait, vous pouvez donc retrouvez les titres de certains articles dans al colonne de droite de ce blog).

Le blog de Jean-Claude Domenget, l'un de nos enseignants en communication multimédia. Ce n'est pas pour fayoter, mais il y a plein d'articles intéressants : JCD - blog: Rediger pour le web. infosourcing 

Les principes de la rédaction web : www-public.it-sudparis.eu/~milon/ecriture/

Le site des spécialistes de l'information en ligne : www.redaction.be

L'écriture web par Aricia-agestis : www.agestis.com/affiche.asp?arbo=1&num=34

www.webmarketing-com.com/2008/09/22/483-dossier-ecriture-web

www.presse-citron.net/15-sites-incontournables-sur-lecriture-pour-le-web-et-les-blogs

http://plumeinteractive.canalblog.com

Et puisque le choix/poids des mots est essentiel pour le référencement de votre (futur) site:

http://plumeinteractive.canalblog.com/archives/redaction___referencement/index.html

N'hésitez pas à nous communiquer les articles et sites qui vous intéressent sur la rédaction web et le webdesign.

J'avais oublié de vous dire que vous pouvez retrouver tous nos favoris sur Delicious.

Dans "Go to a user" (colonne de droite, en haut) tapez "svcc_webdesign" et vous pourrez voir tous nos bookmarks et nos tags.

Nous avons aussi un compte pour les étudiants chinois : "yue.chenghua".

Alors si vous n'avez pas encore de compte, dépêchez-vous, c'est gratuit et très utile!

Et si vous voulez en savoir plus, cliquez sur ce lien:

10 conseils pour exploiter pleinement del.icio.us

A très vite.

Il est bien évident qu'il faut plus de quelques jours pour maîtriser le roi des logiciels graphiques (et nous parlons en connaissance de cause, puisqu'il y a parmi nous une utilisatrice confirmée et une très grande débutante).
Alors aujourd'hui, nous vous proposons des liens vers des tutoriels vidéos pour continuer sur Photoshop.
A regarder en boucle!
Et un grand merci à ceux qui ont eu l'idée de réaliser ces séquences vidéo!

- Voici l'un de mes chouchous pour les tutos vidéo sur Photoshop:

http://namosgraphics.com/

Pour maîtriser différentes techniques et devenir un grand créateur: détourage, masque de fusion, outil pièce, l'animation, créer une boule effet 3D, des fonds d'écran sublimes...

- Tutorial vidéo pour corriger la saturation avec les calques de réglage:
http://madrassa-online.com/vid/ps/03/index.php

-Tutorial Vidéo - Tilt Shift avec Photoshop
Comment appliquer à une image un effet de maquette miniature
http://www.emob.fr/dotclear/tutorial-video-tilt-shift-2113

- Tutorial vidéo pour apprendre à créer un sabre laser sous Photoshop
Pas que pour les fans de Star Wars...

http://www.formationvideo.com/tutoriaux/tutorial21/tutorial21.html

- Et 3 petits derniers, pas en vidéo, mais vous verrez qu'ils s'avèreront très utiles :
Les bases de la photo-manipulation: un paysage surnaturel
http://www.wks.fr/Les-Bases-de-la-Photo-manipulation.html

Transformer un photo style "temps gris" et plate en un magnifique paysage orageux noir et blanc:

http://www.wks.fr/Transformer-une-photo-style-temps.html

Créer une étoile très lumineuse:

http://www.wks.fr/Creer-une-etoile-tres-lumineuse.html

Allez, courage!
Et à bientôt!

Ahhhhhhhhh Flash!
Le logiciel de la suite Adobe qui m'intimide le plus.
Voici quelques liens vers des sites qui m'aident beaucoup :

www.webdesign-tutoriaux.com/categorie-Flash-13-1.html

www.siteduzero.com/tutoriel-3-7768-introduction-a-l-actionscript.html

Voir aussi sur le Site du Zéro :

- Créer des interpolations avec Flash : www.siteduzero.com/tutoriel-3-160111-creer-des-interpolations-avec-flash.html

- Créer un bouton avec Flash : www.siteduzero.com/tutoriel-3-33779-creer-un-bouton-avec-flash.html

- Faire un gif animé très facilement :  www.siteduzero.com/tutoriel-3-35719-faire-un-gif-anime-tres-facilement.html

Ouh lalala! ça sonne comme un truc avec des huissiers ce machin-là!
Mais non! L'audit lexical est une étude de mots-clés. Petit résumé de ce que nous avons fait en cours "Outils et méthodes de gestion de projet".

Voilà comment procéder :
- Chercher une liste de mots-clés stratégiques sur lesquels se positionner.
- Aller sur Google Adwords (https://adwords.google.fr/select/KeywordToolExternal). C'est un générateur de mots clés qui "recense de façon automatique une liste de requêtes courantes effectuées sur le moteur de recherche de Google, en rapport avec le mot clé que vous avez saisi".
En clair, ça permet de consulter le nombre de fois où une requête a été saisie dans la barre de recherche. En parallèle, il faut vérifier le nombre de sites qui répondent à cette requête dans Google (ou le moteur de recherche de votre choix). L'idéal, c'est quand il y a entre 100 000 et 500 000 sites. Au-delà, il sera vraiment difficile de faire remonter votre site.

Quand vous avez trouver une liste satisfaisante, classez ces mots-clés par univers (vie quotidienne, administratif, tourisme... par exemple pour un site web institutionnel).

Il faudra ensuite placer ces mots-clés dans les articles et les titres de votre site. Et voilà, le tout est joué! Non pas encore. Mais ça va venir.

Essayez, vous verrez, ça va devenir plus clair.
Ca ne vous paraît peut-être pas encore utile, mais réfléchissez: il y a deux ou trois ans, on tapait un ou deux mots dans la barre de recherche; aujourd'hui, entre trois et cinq. Il s'agit donc de bien se positionner par rapport aux requêtes les plus fréquentes des internautes.
C'est bien de faire un site intéressant, utile et tout et tout! Mais ce serait mieux qu'on sache que votre site existe!

Exemple: Tapez "infosourcing" dans Google: 32 000 occurrences. Et S2Cwebdesign apparaît en 3e page (pas mal!!!!). Faites la même chose dans Adwords: 73 requêtes pour le volume de recherche mensuel global.

Mais vous allez me dire que c'est un mot un peu barbare réservé aux spécialistes et qu'il vaudrait mieux utiliser un mot générique comme "communication web" pour être mieux positionné.

Faites la même chose avec "communication web". Résultat: dans Google: 198 000 000 occurrences (et S2Cwebdesign doit être loin derrière!). Dans Adwords: 320 requêtes.

Voilà pourquoi le choix des mots fait le poids d'un blog!

Bon, c'est bien parce que c'est vous. Voici un extrait du cours sur l'univers sémantique (merci Jean-Claude Domenget):
"- Utiliser un générateur de mots clés (Google AdWords). Cet outil pourra vous permettre d'ouvrir votre univers sémantique et surtout de voir si votre vocabulaire est en adéquation ou en décalage avec la manière dont les internautes tapent leurs questions (volumétrie de recherche).
- Chercher des mots-clés et des expressions précis. Le trafic généré sera plus faible (par rapport à des mots-clés génériques) mais la concurrence sera moins forte et le trafic plus qualifié.
exemple: "formation": 172 millions de réponses mais probabilité/multimédia quasi nulle, alors que "formation multimédia bac+2": 276 000 réponses.
- Chercher des synonymes (pour décliner les mots clés visés et repérer un mot qui a plus d epotentiel).
- Une fois un mot-clé sélectionné, travailler ses variantes. Google ne tient pas compte des ocurrences au pluriel, féminin, infinitif d'une expression ni la présence d'accent."

promis, on reviendra bientôt sur le référencement, le positionnement, etc. Et pensez à aller voir le message à venir sur l'écriture web.

Pour créer un site web institutionnel (ou autre d'ailleurs!), il faut maîtriser certains outils et certains logiciels.
Nous voulons vous présenter quelques sites ou pages qui proposent des méthodes pour apprendre à connaître les indispensables en graphisme d'interface, comme Photoshop, Illustrator et Flash.
Il y a des sites qui répondront à la plupart de vos questions (et pas seulement en graphisme), alors gardez leurs adresses dans un petit coin de votre ordinateur:
"Le site du Zéro" (http://www.siteduzero.com/)
"Comment ça marche" (www.commentcamarche.net)
Ce sont deux de nos chouchous parce qu'ils sont très complets. Nous y reviendrons souvent pour d'autres questions.

Aujourd'hui nous commençons avec Photoshop.
Si vous n'avez pas le temps (ou la patience) de lire "Photoshop pour les Nuls", une bible dans son genre, quelques liens pour vous aider.

Le Site du zéro propose de nombreux tutoriels à propos de Photoshop :

- Coloriser simplement des dessins avec Photoshop :
http://www.siteduzero.com/tutoriel-3-171968-coloriser-des-dessins-simplement-avec-photoshop.html

- Créer une planète :
http://www.si...teduzero.com/tutoriel-3-35412-creer-une-planete.html

- Une ombre pour vos objets ou personnages :
http://www.siteduzero.com/tutoriel-3-36715-une-ombre-pour-vos-objets-ou-personnages.html

- Les scripts sous Photoshop :
http://www.siteduzero.com/tutoriel-3-36731-les-scripts-sous-photoshop.html

- Les masques de fusion :
http://www.siteduzero.com/tutoriel-3-81106

- Maîtriser l’outil plume et les tracés :
http://www.siteduzero.com/tutoriel-3-34827-maitriser-l-outil-plume-et-les-traces.html

- Faire des personnages en silhouette :
http://www.siteduzero.com/tutoriel-3-36784-faire-des-personnages-en-silhouette.html

- Les motifs :
http://www.siteduzero.com/tutoriel-3-35559-les-motifs.html

- Réaliser un effet tampon :
http://www.siteduzero.com/tutoriel-3-34467-realiser-un-effet-tampon.html

Ce matin nous avons reçu par mail quelques photos de Courcelles, elles sont maintenant disponibles dans l'album photos.
Il ne reste plus qu'à les exploiter dans nos pistes graphiques ! en attendant les prochaines...