Page d'archive de tutorial : Tous les messages sur tutorial

Créer de beaux boutons en CSS3

06 septembre 2010 | Posté par caroder à 09:16

Il n'est pas besoin aujourd'hui d'être un as du développement pour créer des boutons mais, créer de beaux boutons full CSS, c'est une autre paire de manches. Voici donc quelques pistes pour ceux qui veulent se lancer.

1. Pour ceux qui ne connaissent rien aux CSS3 mais qui veulent s'y aventurer, il y a la solution des generators de boutons. On en trouvent de plus en plus ; il ne vous feront pas des boutons très originaux mais cela vous permettra de commencer par l'exemple dans l'application de CSS3. Voici donc deux adresses :

- L'ébourifant CSS Trick : l'outil est vraiment sympa même s'il a des limites évidentes (notamment celles de l'originalité !). On peut se rendre compte immédiatement des modifications d'apparence lors de la modifications des attributs.

- Pour ceux qui ne parlent pas anglais, vous trouverez sur le site Dji un outil à peu près équivalent en français mais beaucoup moins ergonomique :-(

2. Pour trouver l'inspiration ou des techniques novatrices :

- Un exemple bluffant de boutons/icones de partage sur les réseaux sociaux par Nicolas Gallagher. Non, vous ne rêvez pas, ce que vous voyez ci-dessous est fait uniquement avec des CSS !

Pour voir la démo : http://nicolasgallagher.com/progressive-enhancement-pure-css-speech-bubbles/
Pour lire les explications : http://nicolasgallagher.com/experimental-pure-css-social-media-icons/

- Un autre exemple d'excellente utilisation de plusieurs techniques CSS3 pour un rendu très original :

Pour consulter le tutorial : http://lab.simurai.com/css/buttons/
Je signale à toutes fins utiles que la typographie du bouton rose ci-dessus est obtenu grâce à un import de typographie depuis Google. Pour en savoir plus : http://code.google.com/webfonts/family?family=Lobster

- Pour ceux qui veulent maîtriser la technique des dégradés en CSS3 :

Le tutorial est accessible ici : http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/

- Un autre superbe bouton utilisant l'import de font pour créer un picto auquel est ajouté un effet "glossy" :

Le tutorial : http://net.tutsplus.com/tutorials/html-css-techniques/build-kick-ass-practical-css3-buttons/

Voilà. Si vous avez d'autres tutos et exemples de ces techniques, n'hésitez pas à laisser vos liens en commentaires.

Catégorie : CSS | Commentaires [2] | Rétroliens [0] | Permalien [#] | Tags : css3, generator, tutorial

Trucs et astuces Dreamweaver de JPierre

19 janvier 2010 | Posté par caroder à 21:00

JPierre, de asp-php.net, vous propose dans son nouveau tutorial d'apprendre 2 choses :

Externaliser dans un fichier CSS un ou plusieurs styles que l'on a appliqués à une seule page, via un fonctionnel Dreamweaver bien utile.
Effectuer dynamiquement au sein d'une page des calculs sur des données en provenance d'une table MySQL (dans l'exemple de JPierre, calcul de prix en fonction de quantité + total du panier).

Si vous souhaitez consulter cet excellent tutorial, c'est par ici : http://www.asp-php.net/tutorial/asp-php/dws4-tips-5.php?page=1

Catégorie : Divers | Commentaires [0] | Rétroliens [0] | Permalien [#] | Tags : dreamweaver, mysql, php, tutorial

Nouveau site de tutorials Dreamweaver... pour anglophones

06 janvier 2010 | Posté par caroder à 21:24

Voici un tout nouveau site dont le but avoué est de ne se consacrer qu'aux besoins des débutants qui souhaitent utiliser le langage PHP avec Dreamweaver (voir la baseline du site).

dwphp

Il se revendique l'héritier d'un précédent blog http://phpdw.blogspot.com qui n'avait compté que quelques posts (est-ce un mauvais présage ?!!).

Voici les sujets annoncés par l'auteur :

Dreamweaver (de la version CS4 jusqu'aux versions plus anciennes CS3, 8, MX-2004, et MX, vaste ambition !)
La syntaxe HTML (??)
PHP (versions 5 et 4)
Les bases de MySQL et PhpMyAdmin
Les fonctionnalités javascript proposées par Dreamweaver

Si vous lisez l'anglais, vous pouvez voir les (tout) premiers articles ici : http://www.dwphp.com/

Catégorie : Tutoriaux pour débutants | Commentaires [0] | Rétroliens [0] | Permalien [#] | Tags : dreamweaver, php, tutorial

Sommaire du tutorial Newsletter avec Dreamweaver et PHP

22 novembre 2009 | Posté par caroder à 18:09

Suite aux remarques de quelques internautes, je mets en ligne le sommaire complet de ce tutorial afin qu'il soit accessible depuis une page unique de ce blog (chaque lien ouvre une nouvelle page). Je rappelle à ceux qui ne souhaitent pas mettre en oeuvre une solution complexe ou ceux qui sont grands débutants avec Dreamweaver qu'ils peuvent consulter mon tutorial très simple sur l'expédition d'une page HTML par mail (par exemple, vous avez déjà travaillé votre newsletter HTML dans Dreamweaver et vous voulez simplement envoyer cette page par mail mais vous ne savez pas comment faire).

Le tutorial ci-dessous permet de créer une interface complète d'administration de newsletters au sein d'un site en récupérant des adresses e-mail déposées par des visiteurs. Il nécessite une première expérience de développement de sites en PHP même s'il reste relativement simple d'accès.

Catégorie : Créer une newsletter avec Dreamweaver | Commentaires [5] | Rétroliens [0] | Permalien [#] | Tags : dreamweaver, newsletter, tutorial

Réaliser un site communautaire avec Dreamweaver et php/MySQL + flash

07 septembre 2009 | Posté par caroder à 09:04

Aujourd'hui un tutorial ENOOORME ! Jugez en plutôt : 29 épisodes d'une vingtaine de minutes en moyenne chacun, auxquels il faut ajouter les codes sources téléchargeables. Bref, un travail qui mérite respect. Vous allez apprendre à construire un site avec une section membre permettant à ces derniers de poster dans un forum, consulter mutuellement des profils, etc. !

Vous pouvez regarder une démo de ce fonctionnel en allant ici : http://www.webintersect.com

Ceci correspond à vos besoins ? Rendez-vous alors ici pour avoir la playlist des 29 parties de ce tuto : http://www.youtube.com/view_play_list?p=5DF2FC61F89A44E6&page=1

Vous pouvez aussi télécharger les codes sources ici : http://www.webintersect.com/source_files.php

Lecteurs non anglophones, passez votre chemin, ce tutorial est en anglais bien sûr :-(

Catégorie : Tutorials vidéo | Commentaires [0] | Rétroliens [0] | Permalien [#] | Tags : dreamweaver, forum, tutorial, vidéo

Ateliers video gratuits Adobe pour Dreamweaver

01 septembre 2009 | Posté par caroder à 09:25

Il existe sur le site Adobe toute une série de vidéos permettant d'apprendre Dreamweaver via des tutos animés. Ces tutorials s'adressent en priorité aux débutants et ils ont la grande qualité d'être en français !!

Voici le sommaire des vidéos disponibles (certains items sont redondants mais ils s'agit en fait de différentes versions de Dreamweaver) :

Créer des feuilles de styles poour imprimer des pages web
Créer des modèles
Démarrer dans Dreamweaver pour les utilisateurs de GoLive
Utiliser le Spry Framework pour Ajax
Utiliser les CSS
Créer des liens
Créer des menus avec les widget Spry
Utiliser XML
Créer un espace de travail pour les créateurs
Paramétrez un espace de travail pour les développeurs
Définir un site
Définir une nouvelle page
Attribuer un style à un texte
Ajouter des images
Créer un formulaire
Problèmes de téléchargements communs
Publier un contenu sur un serveur
Définir un serveur distant
Attribuer un style à un texte en utilisant CSS
Utiliser et personnaliser des mises en forme basées sur des CSS
Utiliser des modèles
Utiliser des gadget Spry
Personnaliser des formulaires avec des CSS

Pour consulter ces vidéos : http://www.adobe.com/fr/designcenter/video_workshop/

Catégorie : Tutorials vidéo | Commentaires [1] | Rétroliens [0] | Permalien [#] | Tags : dreamweaver, tutorial, vidéo

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 :

permettre au navigateur d'interpréter les balises HTML 5.
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
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

Catégorie : CSS | Commentaires [4] | Rétroliens [0] | Permalien [#] | Tags : css3, html5, tutorial, wordpress

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 :

Catégorie : Moteurs de recherche | Commentaires [0] | Rétroliens [0] | Permalien [#] | Tags : moteur de recherche, tutorial

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 :

modifier la requête SQL permettant d'effectuer une recherche full text
créer le code permettant d'isoler les différents mots qui pourraient être saisis dans le champ de recherche du formulaire
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

Catégorie : Moteurs de recherche | Commentaires [1] | Rétroliens [0] | Permalien [#] | Tags : moteur de recherche, tutorial

Page de résultats : fonctionnement multicritère - tutorial moteur de recherche full text multi-critère avec Dreamweaver

31 juillet 2009 | Posté par caroder à 14:48

Créez une page que vous nommerez "resultats.php"

Au sein de cette page, intégrez un tableau à 3 colonnes et 2 lignes. Les colonnes portent les titres suivants : Auteur, Titre et Editeur.

Créez un jeu d'enregistrements que vous paramétrerez de la façon suivante :

Ceci n'est que la base de notre requête… :-)

Passez en mode avancé du jeu d'enregistrements en cliquant sur le bouton correspondant. Il va nous falloir opérer des jointures de table (sur code_edit et code_aut) pour effectuer des recherches sur les mots correspondants. Par commodité et pour utiliser les fonctionnels Dreamweaver, nous allons effectuer des jointures "à l'ancienne". Si vous souhaitez utiliser cette technique sur des bases de données importantes et un site à fort trafic, vous devrez utiliser la syntaxe INNER JOIN.

Votre fenêtre se présente actuellement de la façon suivante :

Cliquez sur le signe + à coté de l'item "Tables" du champ "Eléments de la base de données" et développez les tables ouvrages, auteurs et éditeurs. Mettez en surbrillance alternativement les items titre, nom_editeur et nom_auteur et cliquez pour chaque sur le bouton "SELECT" : la requête SQL est automatiquement complétée comme suit :

SELECT ouvrages.titre, ouvrages.descriptif, auteurs.nom_auteur, editeurs.nom_editeur
FROM ouvrages, auteurs, editeurs
WHERE titre LIKE colname%

Pour effectuer les jointures de tables, mettez en surbrillance code_aut dans la table auteurs puis cliquez sur le bouton WHERE. Répétez la même opération dans la table ouvrages et remplacer dans le champ SQL le 2e "AND" par un "=". Recommencez cette procédure pour code_edit. Votre requête SQL doit maintenant ressembler à cela :

SELECT ouvrages.titre, auteurs.nom_auteur, editeurs.nom_editeur
FROM ouvrages, auteurs, editeurs
WHERE titre LIKE colname% AND auteurs.code_aut = ouvrages.code_aut AND editeurs.code_edit = ouvrages.code_edit

Nous allons maintenant ajouter les 2 critères de recherche supplémentaire : auteur et editeur qui proviennent des listes déroulantes du formulaire de recherche. Cliquez pour cela sur le bouton + du champ "Variables" de la fenêtre de jeu d'enregistrements. Paramétrez la fenêtre comme suit :

Recommencez encore une fois pour la variable auteur :

Retournez en mode designer. Nous allons maintenant permettre aux résultats de s'afficher dans le tableau.

Allez dans la palette "Liaisons" et déplier le jeu d'enregistrement que vous venez de créer. Faites cliquer/glisser les items titre, nom_auteur et nom_editeur dans les colonnes appropriées.

Sélectionner la balise <tr> qui contient les éléments de résultats du cliquer/glisser et choisissez "région répétée" dans l'onglet "comportements serveurs". Pour aller au plus simple, nous choisirons dans ce tutorial "Toutes".

Retournez dans la page recherche.php et sélectionnez la balise form. Indiquez dans le champ "Action" des propriétés le fichier resultats.php et lancez l'exécution du fichier sur votre serveur.

Il ne vous reste plus qu'à tester cette étape du développement pour vérifier si le multicritère fonctionne bien. Voici les résultats que vous devriez voir apparaître avec le choix "Livre de poche" dans le 2e menu déroulant.