Dreamweaver gratuit

Tutorial sur les bases de la création de thème Wordpress avec Dreamweaver

31 août 2009 | Posté par caroder à 09:16

De retour de vacances ! Voici donc le billet de rentrée de Dreamweaver Gratuit.

Le site de Adobe a publié il y a quelques jours un tutorial sur répertoriant les connaissances de bases concernant la création de Theme Wordpress avec Dreamweaver. Cet article inclut l'utilisation de l'extension ThemeDreamer dont j'avais parlé ici (extension payante mais fort utile) ou bien la méthode traditionnelle dont vous trouverez l'équivalent en français dans mes billets :

• Créer ou modifier un thème Wordpress avec Dreamweaver - Part 1
• Créer ou modifier un thème Wordpress avec Dreamweaver - Part 2

Ce tutorial en anglais de Ryan Grabenstein comprendra 3 parties dont deux sont à paraître et ne manqueront pas de vous être signalés dans ce blog.

Tutorial html5 et css3

19 août 2009 | Posté par caroder à 09:05

Vous allez commencer prochainement le design d'un site (plus exactement dans le tutorial d'aujourd'hui, un blog Wordpress) et vous voulez déjà être prêt pour html5 et utiliser les propriétés les plus intéressantes de CSS3. Vous êtes par nature un early adopter. Enfin, vous n'êtes pas un ayatollah de la compatibilité. Ne passez donc pas votre chemin, vous avez trouvé le tutorial qu'il vous faut !! :-)

Si vous souhaitez utiliser dès maintenant ces fameuses balises html5 et explorer de nouvelles possibilités graphiques avec les CSS3, voici ce que vous allez apprendre à faire :

1. permettre au navigateur d'interpréter les balises HTML 5.
2. Utilisez les balises html5 pour le zonage de la page
   1. <header> pour le header de la page mais aussi pour celui d'un article
   2. <footer> pour le footer de la page mais aussi pour celui d'un article
   3. <hgroup> pour regrouper les différents niveaux de titre dans votre header de page
   4. <article> pour délimiter le contenu de la page
   5. <section> pour indiquer les différentes parties de votre article
   6. <aside> pour indiquer des références en compléments de votre article
   7. <nav> pour baliser les éléments de navigation
   8. <time> pour donner une date de parution
3. Essayez de nouvelles possibilités graphiques avec les CSS3 :
   1. Générer des blocs à coins arrondis via border-radius
   2. Créer des ombres à du texte via text-shadow
   3. Créer un imprimé type bayadère sur une bordure en CSS via border-left-colors
   4. Créer un effet de dégradé sur le fond de page (aucune image utilisée) via box-shadow
   5. Jouer les effets de transparence sur les images via opacity

Le design de ce tutorial HTML5 et CSS3 pour blog Wordpress est réalisée entièrement sans images (sauf illustrations en provenance de Flickr) , uniquement avec de la typographie et les possibilités graphiques de CSS3.

Pour apprendre à faire tout ceci, cliquez sur le lien suivant (le design ne s'affichera correctement qu'avec les navigateurs énumérés ci-dessus) et affichez le code source de la page: tout y est commenté pour votre apprentissage.

Fichier de la page HTML5 et CSS3

Sommaire du tutorial Moteur de recherche Full text avec PHP / MySQL et Dreamweaver

10 août 2009 | Posté par caroder à 09:00

Voici le sommaire complet du tutorial Moteur de recherche Full text avec PHP / MySQL et Dreamweaver :

1. Introduction : concept de full text
2. Structure et paramétrage de la base
3. Création de la page de recherche
4. Page de résultat : fonctionnement multi-critère
5. Implémentation du full text

Page de résultats : implémentation du full text - tutorial moteur de recherche full text multi-critère avec Dreamweaver

06 août 2009 | Posté par caroder à 18:57

Nous allons maintenant implémenter le full text dans notre moteur de recherche.

Il va nous falloir :

1. modifier la requête SQL permettant d'effectuer une recherche full text
2. créer le code permettant d'isoler les différents mots qui pourraient être saisis dans le champ de recherche du formulaire
3. Enfin nous allons devoir traiter 2 cas différents : lorsque la personne a saisi des mots clés dans le champ recherche et lorsqu'elle s'est contentée d'utiliser les critères de sélection (puisque qu'alors le full text n'est pas appliqué, une requête full text ne pouvant fonctionner "à vide").

Mettez-vous en mode code. Copiez le code PHP créé par Dreamweaver pour votre requête et sauvegarder le dans un document texte (vous vous en re-servirez par la suite). Modifiez maintenant la ligne de la requête SQL comme suit (pour en savoir plus sur la syntaxe du full-text, reportez-vous au codex MySQL) :

$query_rsRecherche = sprintf("SELECT ouvrages.titre, auteurs.nom_auteur, editeurs.nom_editeur FROM ouvrages, auteurs, editeurs WHERE MATCH (ouvrages.titre, ouvrages.descriptif, auteurs.nom_auteur, editeurs.nom_editeur) AGAINST ('$liste_recherche' IN BOOLEAN MODE) AND ouvrages.code_edit LIKE %s AND ouvrages.code_aut LIKE %s AND auteurs.code_aut = ouvrages.code_aut AND editeurs.code_edit = ouvrages.code_edit", GetSQLValueString($colname2_rsRecherche, "text"),GetSQLValueString($colname3_rsRecherche, "text"));

Repérez maintenant le code que Dreamweaver avait créé pour le champ de recherche. Supprimez les lignes suivantes

$colname_rsRecherche = "-1";
if (isset($_POST['recherche'])) {
  $colname_rsRecherche = $_POST['recherche'];
}

Insérez le code suivants à la fin des lignes concernant les deux variables $colnames restants  :

$recherche = $_POST['recherche'];
$recherche = strip_tags($recherche); // pour sécurisation contre injection code js ou HTML
$recherche = mysql_real_escape_string($recherche); // pour sécurisation contre injection code SQL
if ($recherche != "") { // SI LE CHAMP RECHERCHE N'EST PAS VIDE
  $liste_cles = explode(" ", $colname_rsRecherche);  // on mets les mots saisis dans un tableau
  $liste = array(); // on instancie le tableau
  foreach($liste_cles as $cle)    {
            $cle = "+".$cle."*"; // ajout de l'opérateur inter-mots ET et de la troncature à droite pour chaque mot conformément à la syntaxe full text de MySQL
array_push($liste, $cle); // on met les mots dans le tableau instancié
            }
  $liste_recherche = implode(" ", $liste);  // passage du tableau en chaîne de caractères et ajout de l'espace entre chaque mot clé.

En dessous vient s'afficher le code de la recherche full-text. Nous venons de traiter le cas où la personne a saisi un mot clé dans le champ. Nous devons maintenant traiter le cas où ceci n'est pas vrai.

En dessous du code :

$rsRecherche = mysql_query($query_rsRecherche, $maConnexion) or die(mysql_error());
$row_rsRecherche = mysql_fetch_assoc($rsRecherche);
$totalRows_rsRecherche = mysql_num_rows($rsRecherche);

Ajoutez le code suivant qui comprend la requête SQL que vous aviez collé dans un document texte mais légèrement modifiée :

} else { // SI LE CHAMP RECHERCHE EST VIDE

mysql_select_db($database_maConnexion, $maConnexion);
$query_rsRecherche = sprintf("SELECT ouvrages.titre, ouvrages.descriptif, auteurs.nom_auteur, editeurs.nom_editeur FROM ouvrages, auteurs, editeurs WHERE ouvrages.code_edit LIKE %s AND ouvrages.code_aut LIKE %s AND auteurs.code_aut = ouvrages.code_aut AND editeurs.code_edit = ouvrages.code_edit", GetSQLValueString($colname2_rsRecherche, "text"),GetSQLValueString($colname3_rsRecherche, "text")); // on a supprimé ici ce qui concernait le champ recherche
$rsRecherche = mysql_query($query_rsRecherche, $maConnexion) or die(mysql_error());
$row_rsRecherche = mysql_fetch_assoc($rsRecherche);
$totalRows_rsRecherche = mysql_num_rows($rsRecherche);
}

Voilà c'est terminé : il ne vous reste plus qu'à tester votre application !

Sommaire du tutorial

1. Introduction : concept de full text
2. Structure et paramétrage de la base
3. Création de la page de recherche
4. Page de résultat : fonctionnement multi-critère
5. Implémentation du full text