Dreamweaver gratuit

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 !

Biglib, site d'échanges et de dons de livres gratuits

02 août 2011 | Posté par caroder à 21:28

Voici un projet nouveau, sans but lucratif ("encore !" dirait mon mari) et totalement personnel. Je suis en train de développer Biglib, un site d'échanges et de dons de livres, CD et DVD (Biglib pour "The Big Library", la grande bibliothèque, donc). A ce stade, tout est encore très expérimental mais je vous en parle ici car ce sera pour moi l'occasion de mettre en ligne de nouveaux tutorials (il était temps !).

Je vous proposerai donc très prochainement de travailler sur le thème suivant : Dreamweaver, les cases à cocher à valeurs multiples et l'insertion simultanées dans 2 tables via un formulaire unique (dont vous pouvez voir la mise en oeuvre sur le site ci-dessus).

En attendant la mise en ligne, je vous souhaite d'excellentes vacances à tous !

Créer des interfaces pour mobiles avec Dreamweaver CS5.5

31 mai 2011 | Posté par caroder à 09:10

Il est aujourd'hui quasiment impossible d'envisager de développer un site web sans sa version mobile. Adobe propose donc aux utilisateurs de Dreamweaver de disposer des outils nécessaires pour sauter le pas vers le développement d'applications mobiles (iOS et Android)

L'intégration de Dreamweaver à PhoneGap (accessible via le menu Site >> Applications mobiles) vous permet de déployer des applications natives pour les téléphones et tablettes Android et iOS. PhoneGap est un framework de développement pour la création d'applications mobile qui permet de faire le pont entre vos applications Web et les mobiles.

Voici une vidéo (sous-titrée en français) qui vous expliquera le principe de cette nouvelle fonctionnalité de Dreamweaver.

Adobe y a adjoint le Widget JQuery Mobile pour lequel vous pouvez visionner la vidéo tutorial ci-joint (en français cette fois !).

 

Un menu horizontal en JQuery "floating bubble" - Tutorial vidéo

05 janvier 2011 | Posté par caroder à 09:00

Vous connaissez certainement le site Owni dont le design, extrêmement pointu, est une référence pour les webdesigners (sans parler de la qualité des contenus qui est aussi une référence). Vous avez sans doute remarqué le menu de navigation horizontal, avec ce petit effet sympa sur le background des items menus. Cette technique dite "floating bubble" (bulle flottante), obtenue de JQuery, vous est maintenant accessible via Dreamweaver grâce à ce très complet tutorial vidéo, malheureusement en anglais (le commentateur parle assez lentement avec un accent UK).

Ce tutorial est destiné aux personnes qui maitrisent bien Dreamweaver et qui ont de bonnes notions de CSS et de HTML. Il est en deux parties qui représentent plus de 16 minutes de visionnage au total.

Compatibilité du menu : MSIE 8 et 9, Firefox, Chrome et Safari.

Vous pouvez télécharger les fichiers de ce tutorial ici et lire le tutorial (en anglais !) pour codeurs ici.