Archives par mot-clé : XHTML

Futurs articles sur le thème du développement Web

Publié dans Informations | Laisser un commentaire

Le Web et le développement de sites Web est toujours un de mes passes-temps (le tout reste d’avoir du temps), voici donc quelques sujets que j’aimerai aborder sur ce blog dans un futur proche. On verra ce qu’on peut faire 🙂

  • PHP
    • Doctrine, une librairie permettant de gérer sa base de données comme si l’on avait affaire à des objets. Un ORM quoi ! Elle a l’air très puissante et très utile mais je n’ai pas encore réussi à la prendre en main. Utilisé sous Synfony.
    • Twig, un moteur de template particulièrement efficace et facile à prendre en main. Utilisé sous Synfony.
    • Un exemple de structure MVC (avec des controller et des actions, un petit peu à la mode de Struts), l’idée étant de comprendre ce que font des frameworks comme Zend et Synfony.
  • HTML/CSS
    • Quelques tips HTML5
    • LESS, COMPASS et autre « améliorateur » du développement des CSS

Menu accordéon facile en jQuery

Publié dans Javascript | Laisser un commentaire

Et je continue avec ma série jQuery ! Aujourd’hui, l’idée est de réaliser un menu accordéon plutôt cool : Démo menu accordéon. En voici le code HTML :

<dl>
	<dt>Titre 1</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
	<dt>Titre 2</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
	<dt>Titre 3</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd>
	<dt>Titre 4</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
	<dt>Titre 5</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd> </dl>

Continuer la lecture

Javascript

Action lors de la modification d’un champ : change(function)

Publié dans Javascript | Laisser un commentaire

En ce moment, je fais quelques tests avec jQuery histoire d’améliorer un petit peu mon niveau dans ce framework avec lequel j’ai déjà bidouillé quelques fois. Aujourd’hui, j’ai simplement cherché à effectuer une action lorsqu’un utilisateur modifie la valeur d’un champ : Démo modification d’un champ. Pour cela, il suffit d’utiliser la méthode change(function) de jQuery sur le champ en question. Voyons un exemple. D’abord le code HTML :

<form action="" method="post">
<fieldset>
	<legend>Élévation au carré</legend>
	<label for="nbElement">Nombre à élever au carré :</label>
	<input type="text" name="nbElement" id="nbElement" size="4" value="12"  />
	<br />
	<span id="max"></span>
</fieldset>
</form>

Continuer la lecture

Petit point sur le XML

Publié dans XML | 3 commentaires

Voilà quelques temps déjà que je veux faire un petit point sur le XML. Une sorte d’aperçu théorique et un peu pratique permettant d’aller plus loin avec ce langage tellement utilisé aujourd’hui. Ce jour semble être venu ! (tintindindin !) Tout du moins en partie, puisqu’aujourd’hui, je parlerai du XML, de la bonne formation d’un fichier XML et de sa validité.

Présentation rapide d’XML

XML, qu’est-ce que c’est ? C’est un langage d’échange basé sur le balisage. Peu après sa création en 1996 (ça date quand même), il remplace le SGML qui était un peu plus compliqué, et c’est aujourd’hui un méta-langage universel pour les données sur le Web, surtout depuis que le W3C s’est chargé de le standardiser.
Bref, on peut mettre des données dans un fichier XML, et grâce à différentes techniques on est capable de les récupérer, les traiter, les afficher, ajouter des données au fichier… faire des trucs un peu cool dessus ! On s’en sert pour les flux RSS et Atom, pour l’Ajax, on peut l’utiliser comme base de données en PHP et je sais aussi qu’OpenOffice s’en sert pour le format de ses fichiers (.odt, tout ça). C’est utile et utilisé !

Un fichier XML bien formé

Un fichier XML est bien formé lorsqu’il respecte la syntaxe d’XML. Pour vérifier qu’un fichier XML est bien formé, on peut utiliser le validateur de la W3schools. Et d’ailleurs, pour apprendre à créer un fichier XML bien formé, on peut utiliser le tutoriel de la W3schools : Tutoriel XML W3schools.
Exemple de fichier XML bien formé :

<?xml version="1.0" encoding="ISO-8859-1"
<blog>
	<nom>30 minutes par jour</nom>
	<description langue="fr">Un blog qui cause d'informatique 30 minutes tous les jours (ou presque)</description>
	<url type="internet">http://30minparjour.la-bnbox.fr/</url>
	<billets>
		<billet>
			<titre langue="fr">Petit point sur le XML</titre>
		</billet>
		<billet>
			<titre langue="fr">En ce début d'année, faisant le point</titre>
		</billet>
	</billets>
</blog>

Voici un résumé de cette syntaxe :
Continuer la lecture

En cette fin d’année, faisons le point

Publié dans Informations | Laisser un commentaire

Voilà maintenant presque 7 mois que je me suis lancé dans l’aventure « blog » avec 30 minutes par jour, et j’avoue que j’y prend assez goût. C’est un plaisir de travailler sous Dotclear, et c’est pour moi un bon challenge que d’essayer d’apprendre des choses nouvelles tous les jours. Apprendre n’est pas forcément très compliqué, surtout qu’en 30 minutes, on n’a pas forcément l’occasion d’aller bien loin. Pratiquer est déjà un petit peu plus délicat, cela dit, en général j’apprends des choses qui me sont utiles pour mes « problèmes » du moment (comme dernièrement le billet expliquant comment utiliser plusieurs feuilles CSS sur une même page) donc cela reste dans le domaine du faisable. Mais lorsqu’il s’agit de transcrire ces connaissances sous forme de billets, cela devient légèrement plus difficile. J’essaie de synthétiser les informations, de trouver une manière de les expliquer de telles sortes que cela soit facilement et rapidement compréhensible. (de façon à ce qu’en lisant mon billet, moi, ou un autre lecteur, n’est pas besoin de relire mes 36 000 sources pour comprendre quelque chose) Se pose alors la question cruciale : est-ce qu’il me faut expliquer tout ce que j’ai appris, ou simplement donner les grandes lignes, celles qui permettent de comprendre le reste en se plongeant un peu dans le sujet ? Ces derniers temps, par manque de temps, je pratique surtout la deuxième option. Mais je pense qu’il est bon d’alterner un peu les deux.

J’ai terminé ma série PHP Objet, malgré le fait que je n’ai jamais vraiment terminé (ni même commencé) le projet Doodle Like en PHP Objet. Cela dit, je suis sur un autre projet que je code en PHP Objet, donc on pourra dire que cela fera office de projet de fin de série. Il va d’ailleurs falloir que je commence une nouvelle série, mais j’hésite encore sur le thème à choisir. JQuery (la doc manque cruellement en français sur Internet, enfin, de ce que j’ai pu voir), Java, CSS3 et son ami HTML5… Je m’accorde encore un peu de répit pour me décider.

Avec tout ça, j’arrive quand même à écrire une moyenne de 2 billets par semaine. En théorie il m’en faudrait 5. Ce résultat ne me convient donc pas forcément, mais c’est déjà ça.

Quant à la fréquentation des visiteurs, elle a un peu augmenté depuis le mois de Mai, puisque c’est maintenant une douzaine de personne par jour qui visitent le site. En majorité de nouveaux visiteurs (70%), qui proviennent généralement des moteurs de recherche (78%), bref, rien d’étonnant.

Donc mes résolutions pour cette nouvelle année :

  • Finir la série PHP Objet avec mon projet de fin de série
  • Démarrer une nouvelle série
  • Écrire un peu plus souvent des billets
  • Continuer à améliorer le blog dès que je trouve le temps

Et puisque je n’aurai pas l’occasion de le dire le jour J : bonne année 2010 et meilleurs vœux !

Plusieurs CSS sur une seule page

Publié dans HTML et CSS | Laisser un commentaire

J’ai découvert aujourd’hui comment appliquer plusieurs feuilles de styles sur une seule et même page. J’avais essayé plusieurs fois sans réel succès, pourtant cela peut être très pratique pour séparer son code.

Un fichier CSS sur une page

<link rel="stylesheet" type="text/css" href="fichier.css" />

Pour proposer des designs alternatifs, on emploie le mot clef alternate.

<link rel="alternate stylesheet" type="text/css" title="Titre du design" href="fichier1.css" /> <link rel="alternate stylesheet" type="text/css" title="Autre titre du design" href="fichier2.css" />

C’est le premier qui sera utilisé par défaut.

Plusieurs fichiers CSS sur une page

<link rel="stylesheet" type="text/css" href="fichier1.css" />
<link rel="stylesheet" type="text/css" href="fichier2.css" />

Mais en utilisant les titres, on peut aller plus loin. L’exemple suivant utilisera les designs ayant pour titre « compact » et le design persistant (sans titre) commun.css. Mais l’utilisateur peut sélectionner les designs « beautiful », ce qui appellera aussi le design persistant.

<link rel="alternate stylesheet" type="text/css" title="compact" href="fichier1.css" />
<link rel="alternate stylesheet" type="text/css" title="compact" href="fichier2.css" />
<link rel="alternate stylesheet" type="text/css" title="beautiful" href="fichier3.css" />
<link rel="alternate stylesheet" type="text/css" title="beautiful" href="fichier4.css" />
<link rel="stylesheet" type="text/css" href="commun.css" />

Pour aller plus loin

On peut noter qu’il est possible d’utiliser une balise méta ou un header pour préciser le ou les fichiers CSS à afficher par défaut :

<meta http-equiv="Default-Style" content="compact" />
<?php
header(Default-Style: "compact");

Merci le W3C sur Lagrange !

Des bords arrondis, sans images, avec les CSS3

Publié dans HTML et CSS | 2 commentaires

Je suis actuellement en train de faire le design d’un nouveau site, et pour la première fois, je me suis amusé un petit peu avec les CSS 3. Je n’ai utilisé que des bords arrondis (border-radius), et des effets d’ombres (box-shadow), et je suis impressionné par ce que l’on peut faire en quelques lignes. Quand je pense aux transitions, aux couleurs RGBa (pour gérer la transparence facilement), les arrières-plans multiples, j’ai vraiment hâte que les navigateurs l’implémentent ! Il est déjà possible de tester un rendu temporaire en utilisant les préfixes -moz- (pour Firefox), et -webkit- (pour Safari et Google Chrome), et sans préfixe pour Opéra à partir de la version 10.5 . Pour Internet Explorer, il faut se rabattre sur les créations anciennes ou nouvelles des développeurs de Microsoft, qui, quand elles existent, ne suivent pas de standard particulier. Welcome in the real world!

Un peu d’arrondi pour la douceur

Nous allons commencer par voir comment réaliser des bords arrondis sans utiliser d’images. Et en ajoutant une petite image pour la déco quand même, on va créer la chose suivante :


Continuer la lecture

Où trouver des idées de design XHTML/CSS ?

Publié dans HTML et CSS | Laisser un commentaire

Une chose que je remarque de plus en plus est que je la partie la plus délicate, pour moi, lors de la création d’un site Internet (et dans une moindre mesure, d’une application) est la phase de design. Parfois j’ai quelques idées en tête, mais même avec ça, je galère vraiment à trouver quelque chose de jolie… Je ne dois pas avoir la fibre artistique, le sens des couleurs, ou je ne sais. Je crois n’avoir réussi l’exploit de faire quelque chose de jolie (et encore, c’est subjectif) que pour un seul site, mon site perso La Bnbox. A l’époque j’ai du avoir une sorte d’inspiration, et ça a roulé comme sur des roulettes. J’étais vraiment fier, même si aujourd’hui c’est un peu passé de mode et un peu trop bleu, blanc et statique à mon goût. Mais bon, de l’eau à passer sous des ponts depuis le temps…

La Bnbox v3

Une autre chose que je remarque c’est que si on me file un psd (format Photoshop) ou une image d’un design, je suis tout à fait capable de transcrire tout ça en XHTML et en CSS, en créant les images ou non. Bref, je suis plus intégrateur Web que Designer Web. Mais je crois que je préfère encore le développement.
Continuer la lecture