Dreamweaver gratuit

Dreamweaver CS6 : grid system 960 et web fontes...

07 mai 2012 | Posté par caroder à 18:23

C'est aujourd'hui qu'Adobe commence à commercialiser la dernière version de Dreamweaver, la CS6 (en anglais seulement à ce jour). Qu'on se le dise, cette version intègre ce qui étaient encore des extensions ou des techniques déjà moultement utilisées par les développeurs depuis bien longtemps mais dans sa philosophie, elle ne fait que consacrer cette évolution inéluctable du web : la nécessité d'être multi plates-formes (smartphones, tablettes et ordinateurs) via le 960 grid system et l'utilisation sécurisée de fontes "exotiques".

Vous pouvez découvrir les possibilités du 960 gris system via la vidéo tutorial ci-dessous (en anglais. Attention : réservé aux personnes maîtrisant bien cette langue, le formateur ayant un problème aux cordes vocales) : 

Si vous souhaitez utiliser cette technique du 960 grid system dont j'ai parlé ici, sachez qu'il existe une extension permettant de faire peu ou prou la même chose (tout en ne bénéficiant pas du même confort de développement que dans la CS6 !).

Pour ce qui concerne l'utilisation de web font, je publierai prochainement un tutorial sur l'utilisation de cette technique très facile à mettre en oeuvre.

Des thèmes Wordpress beaux et gratuits

20 mars 2012 | Posté par caroder à 15:51

Voici longtemps que je ne vous avais pas fait part de mes trouvailles de thèmes Wordpress sur le web. Je vous recommande le site Towfiqi qui propose des designs simples et beaux (ce qui dans mon esprit va de pair) avec néanmoins de quoi animer votre homepage (via des sliders JQuery). Tous les thèmes sont compatibles avec la version 3.0 du CMS. 

A noter néanmoins : si vous ne comptez pas sur des photos de grande qualité pour illustrer votre blog, passez votre chemin car ces webdesigns misent une bonne partie de leur équilibre graphique dessus.

Mon design préféré est "Amphion Lite" (capture ci-dessous)...

 

Site e-commerce : intégrer un système de paiement par Paypal

09 mars 2012 | Posté par caroder à 13:23

Voici un vidéo tutorial qui vous expliquera comment intégrer via Dreamweaver un système de paiement en ligne Paypal avec détail du panier.

 

Lagarde et Michard

Un pop-up JQuery avec Dreamweaver (obscurcissement Lightbox)

30 janvier 2012 | Posté par caroder à 18:20

Voici un tutorial vidéo extrêmement utile pour ceux qui souhaiterait installer une lightbox JQuery à leur site. Dans l'exemple présenté, il s'agit d'une lightbox pour une gallerie images mais, avec un peu d'imagination et de code, ceci peut s'adapter à n'importe quelle autre type de lightbox (texte, formulaire, etc.).

Ce tutorial est en anglais mais assez facile à comprendre car bien illustré.

Partie 1

Partie 2

Il est à noter que ce tutorial fait exactement la même chose que l'extension Lightbox de Andres Cayon mais que ce tutorial vous permettra de comprendre la philosophie de cette librairie JQuery et donc d'adapter totalement la lightbox à vos besoins.

Rappel : sur le site Biglib, vous pouvez lire gratuitement des livres que des internautes acceptent de donner sans contrepartie :-)

500 000 visiteurs uniques...

19 janvier 2012 | Posté par caroder à 17:13

Il y a des chiffres symboliques et je pense que celui-ci en est un. 

Lorsque j'ai écrit mon premier billet le 28 février 2007, il y a beaucoup de choses que je n'avais pas imaginées et surtout pas que cinq ans plus tard, je pourrais écrire que 500 000 personnes soient venues consulter ces pages si peu "grand public" sur un sujet qui me paraissait intéresser, au mieux, quelques centaines de personnes.

J'ai démarré ce travail parce que j'avais moi-même besoin d'un lieu où répertorier mes trouvailles sur le net concernant le logiciel Dreamweaver. Etant donné le mal que je me donnais pour dénicher certaines infos, il m'a immédiatement paru pertinent de partager et faire profiter à tous de mes recherches. De fil en aiguille, j'ai écrit mes propres tutoriaux en fonction de mes problématiques personnelles et aussi souvent parce que je n'avais rien trouvé de convaincant sur le sujet.

Bref, ce qui m'a guidé ici, c'est la volonté d'être simplement utile aux autres.

Je voulais aussi remercier plus particulièrement Jean-Pierre, avec lequel j'ai souvent échangé au cours de ces années. Je ne saurais trop vous conseiller, si vous ne le faites déjà, de consulter ses formidables tutoriaux sur le site ASP-PHP.net.

Enfin, je termine par une petite auto-promo en vous rappelant l'existence de Biglib, la plate forme de dons et d'échanges de livres l'occasion et mon compte Twitter qui brasse avant tout des sujets "réseaux sociaux" et "webmarketing".

Merci à tous !

960 Grid System, une extension pour webdesigner rigoureux

17 janvier 2012 | Posté par caroder à 09:30

Le système de grille ("Grid System") est un concept hérité des temps lointains de la presse au marbre (c'est tout dire !) où la mise en page était contrainte par la technique. Le gabarit des pages faisait la loi de la première à la dernière (page) et les graphistes qui ont travaillé aux temps héroïques de la "compo" en gardent un souvenir ému (mais néanmoins douloureux parfois). Rigide par nature, ce système est néanmoins totalement adapté aux problématiques des sites magazines auxquels il permet de ne pas verser dans un joyeux foutoir contre-productif et repoussoir à lecteurs.

Le principe est très simple : une page est divisée en unités minimales de colonnes (séparées par un espace blanc et correspondant à un minima de caractères permettant la lisibilité) qui peuvent être réunies aux besoins. Une image valant mieux que mille discours, voici ce que ce gabarit invisible rend quand on le donne à voir (exemple de mise en page magazine/rapport annuel) : 

Ce système, si utile sur le papier (et permettant en outre d'obtenir de jolis gris typographique), a été transposé depuis quelques années déjà dans la "mise en page" des sites magazines et de nombres blogs Wordpress.

DMXZone propose une extension Dreamweaver gratuite permettant de créer vos propres designs de site dans une largeur de 960px (sorte de nombre d'or du Grid System).

Vous pouvez télécharger cette extension ici : http://www.dmxzone.com/go?18032

Commun.it, le nouvel outil indispensable de gestion de votre compte Twitter ?

08 novembre 2011 | Posté par caroder à 09:55

Il est réellement vrai que Commun.it est un outil trop très puissant...

Tellement, qu'il ferait presque craindre que la "magie" Twitter s'évanouisse (celle des rencontres accidentelles entre deux comptes qui n'ont rien à voir et beaucoup à se dire, peu importe leur nombre de followers respectifs). Son efficacité ravira certainement les community managers exigeants puisqu'il se propose rien moins que de donner (dans une interface ultra-ergonomique) les Twittos les plus influents de votre communauté avec lesquels vous êtes en position d'engager ou continuer la conversation le plus naturellement.

Commun.it ne contente pas de vous donner une compréhension de votre communauté Twitter, il combine l'analyse de votre compte à des fonctionnalités de client Twitter (mentions, DM). Pour faire rapide, on dira que c'est une plateforme de marketing relationnel qui aide les entreprises à construire des relations fructueuses personnelles via Twitter.

Commun.it fait le focus sur les relations qui vous rapporterons la plus grande plus-value (amis de la poésie...). Contrairement à Klout, il ne donne aucune métrique mais il vous indique qui sont vos prescripteurs, les partisans et les "relations à cultiver". 

Une image valant des centaines de mots, voici une vidéo qui vous donnera un aperçu de l'outil :

Commun.it véhicule une vision totalement utilitariste de votre communauté, vous l'avez compris. Mais finalement, quand on est une marque, pourquoi pas ?!

Enfin l'outil est encore en beta test et ça se voit. Il propose par exemple de suivre un compte inactif depuis plusieurs mois... Il reste donc du travail sur les algorithmes.

Commun.it est donc un outil Twitter avec une approche CRM très marquée. Marketeurs (poètes, humanistes et idéalistes, passez votre chemin vous allez déprimer !), si vous le souhaitez, Commun.it ma donné 20 invitations pour découvrir vous aussi cet outil. Merci de me contacter sur mon fil Twitter (par DM) ou par mail via ce blog.

Insérer des données dans 2 tables via un seul formulaire (cases à cocher) - Part 2

19 septembre 2011 | Posté par caroder à 10:27

Pour arriver à insérer des données dans 2 tables différentes, nous devons impérativement récupérer l’ID d’insertion du 1^er enregistrement dans la 1^re table pour nous en servir comme clé étrangère dans l’insertion de l’enregistrement dans la 2^e table.

Il y a longtemps déjà je vous avais expliqué comment récupérer cet ID d’enregistrement lors de l’insertion. Nous allons donc appliquer basiquement cette méthode.

Le nom donné par Dreamweaver par l’assistant d’insertion d’enregistrement dans mon exemple n’a pas été modifié. Il s’agit de $Result1.

Repérer dans le code les lignes suivantes ($ConnTuto est le nom que j’ai donné à ma connexion, ce nom varie en fonction du nom que vous avez choisi pour la vôtre) :

  mysql_select_db($database_ConnTuto, $ConnTuto);
  $Result1 = mysql_query($insertSQL, $ConnTuto) or die(mysql_error());

Ajoutez juste en dessous de ces 2 lignes le code suivant :

$theID = mysql_insert_id();

Cette instruction nous sert à récupérer l’ID de l’utilisateur dans la 1^re table.

Il ne nous reste plus qu’à écrire la requête pour les enregistrements dans la 2^e table avec comme clé étrangère l’ID de l’utilisateur. Pour ceci, nous allons utiliser une boucle « foreach » car il nous faudra autant de ligne d’enregistrements que d’abonnements demandés aux thématiques.

Juste en dessous de la ligne « $theID = mysql_insert_id(); », ajoutez le code suivant :

// insertions des cases à cocher dans la deuxième table
// *************************************************************
if (!empty($_POST['abonnement'])) { /* la case à cocher n’est pas vide */

     foreach ($_POST['abonnement'] as $cle) { /* pour chaque case cochée devenue variable $cle */
                $Requete = "INSERT tb_abonnements (abonnement, id_utilisateur) VALUES ('$cle', '$theID')";
                $resRequete = mysql_query($Requete, $ConnTuto) or die(mysql_error());
     }
}

Voilà, c’est fini !

Il ne vous reste plus qu’à sauvegarder votre page et à procéder à un test de votre formulaire. Vos deux tables devraient se remplir simultanément à chaque envoi du formulaire, la première avec un seul enregistrement et la seconde avec autant d’enregistrement que de cases cochés comme abonnement.

Insérer des données dans 2 tables via un seul formulaire (cases à cocher) - Part 1

05 septembre 2011 | Posté par caroder à 09:08

C’est la rentrée aujourd’hui et j’effectue la mienne avec le tutorial promis pendant les vacances ;-)

Voici un problème classique qui se pose au développeur débutant avec Dreamweaver. Vous avez une table de base de données reliée à une autre table via clé étrangère et vous souhaitez insérer des données dans les 2 tables au sein d’un seul et unique formulaire.

Ce problème se pose couramment lorsque vous avez par exemple la possibilité pour un utilisateur de renseigner des cases à cocher (plusieurs choix possibles, c’est donc un cas typique de relation un à plusieurs). Nous allons donc voir comment faire pour procéder à l’insertion simultanée dans 2 tables avec Dreamweaver.

Nous allons imaginer que vous avez une page d’inscription à diverses newsletters pour un visiteur de votre site : une newsletter « business », une newsletter « développement », une newsletter « webdesign » et une newsletter « référencement ». Un visiteur peut s’abonner à une ou plusieurs newsletters.

Créons d’abord les tables de la base de données. Une table servira à abriter les informations personnelles du visiteur et une table sera destinée à stocker ses abonnements proprement dits. La table N°2 est liée à la première via l’ID d’inscription du visiteur.

CREATE TABLE IF NOT EXISTS `tb_utilisateurs` (
  `ID_utilisateur` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(50) NOT NULL,
  `prenom` varchar(50) NOT NULL,
  `mail` varchar(100) NOT NULL,
  PRIMARY KEY (`ID_utilisateur`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

CREATE TABLE IF NOT EXISTS `tb_abonnements` (
  `ID_abonnement` int(11) NOT NULL AUTO_INCREMENT,
  `ID_utilisateur` int(11) NOT NULL,
  `newsletter` int(11) NOT NULL,
  PRIMARY KEY (`ID_abonnement`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

Nous allons créer un très classique formulaire (pour notre exemple nous ne ferons aucune mise en forme CSS). Pour cela dans Dreamweaver >> Fichier >> Nouveau >> type de fichier « PHP » et Mise en forme « aucune ».  Pour ce tutorial, nous supposons que vous avez créé le site selon les préceptes de Dreamweaver, que vous avez défini le serveur d’évaluation en local et et la connexion à la base de données (étapes nécessaires pour poursuivre ce tuto).

Une fois votre nouvelle page enregistrée dans votre site (dans notre exemple, j’ai appelé ma page inser2tables.php), allez dans la palette insertion et, dans le sous-ensemble « données », sélectionnez « insérer un enregistrement » pour lequel vous choisissez l’assistant. Remplissez les champs comme indiqué dans la capture ci-dessous (en supprimant le champ ID_utilisateur).

Insérer une ligne supplémentaire dans le tableau contenu dans le formulaire créé automatiquement que vous intitulez « Abonnements ». En regard de cet intitulé, dans la colonne de droite, intégrez un groupe de cases à cocher via l’onglet « données » de la palette « insertion ».

Affichez le code de la page. Vous allez rajouter des paires de crochets vides (ouvrant et fermant) dans l’attribut « name »  de chaque type d’abonnement. Les lignes de codes correspondantes doivent maintenant ressembler à ceci :

          <label>
          <input type="checkbox" name="abonnement[]" value="1" id="abonnement_0" />
          business </label>
        <br />
        <label>
          <input type="checkbox" name="abonnement[]" value="2" id="abonnement_1" />
          développement </label>
        <br />
        <label>
          <input type="checkbox" name="abonnement[]" value="3" id="abonnement_2" />
          webdesign </label>
        <br />
        <label>
          <input type="checkbox" name="abonnement[]" value="4" id="abonnement_3" />
          référencement </label>
        <br />

Votre page doit ressembler à ceci :

Voilà nous en avons fini pour cette fois-ci. Nous verrons très prochainement le code PHP à rajouter à celui généré par Dreamweaver pour procéder à l’insertion simultanée dans les deux tables tb_utilisateurs et tb_abonnements

Vidéo : réaliser soi-même ou le faire par un prestataire ?

16 août 2011 | Posté par caroder à 10:46

On se pose tous un jour la question d’intégrer une vidéo sur son site, une vidéo qu’on aura scénarisé soi-même et si on est un peu chanceux on aura un petit buzz (ou un gros) avec. Bon pour ça, vous pouvez y aller la fleur au fusil, utiliser les moyens du bord (votre appareil photo, votre smartphone, votre vieille caméra si vous en avez acheté une à la naissance du petit) auxquels vous allez ajouter un logiciel de montage (gratuit bien sûr, Windows Movie Maker, par exemple ou Cam Studio comme dans la vidéo tutorial ci dessous).

Réaliser un film, ce n’est pas seulement coller des images bout à bout. C’est :

• Scénariser votre idée 
• Tourner les images 
• Savoir cadrer et éclairer 
• Trouver une illustration musicale (libre de droit !) 
• Faire l’acquisition des clips tournés et les monter 
• Mettre le tout en ligne et l’intégrer à votre site (le plus facile sans doute) 

OK, mais tout ça ne résout pas un problème majeur : la créativité …

Si vous ne vous sentez pas l’âme d’un nouveau Cecil B. De Mille, adressez-vous à un professionnel, vous éviterez bien des galères. Il existe un nouveau genre de maison de production qui produit à des coûts raisonnables.

Je signale à toutes fins utiles Uptown Prod qui produit des contenus audio et vidéo pour entreprises (vidéos institutionnelles, interview, reportages, présentations de produits) et qui vous aide à assurer la promotion de votre vidéo de manière vivante et efficace sur votre site internet, intranet, web tv et sur les réseaux sociaux.

Uptown Prod a été fondée par Nicolas Catard (que je connais => votre vidéo sera réalisée dans la bonne humeur :-) et vous promet un tarif compétitif et une forte réactivité.

La vidéo décuple la force du message auprès de votre public… à condition qu'elle soit bien réalisée !