31 août 2004
Un émulateur Windows sous LINUX
L'appel de la communauté linux contre
windows préinstallé (environ 130 Euros HT prélevés sur chaque machine
familiale vendue) semble signer le départ d'une lutte sans merci où le
vainqueur reste incertain, sachant que Microsoft a souvent triomphé de
ses adversaires d'un moment (CP/M, Wordstar, Dbase, Borland, Lotus 123,
OS/2, Netware, Netscape,...). Même si son principal avantage reste le
logiciel vedette Microsoft Office, qui peut sembler plus pratique à ses
partisans que son challenger Open Office (gratuit!), un nouvel outil
libre permet aujourd'hui de l'utiliser sous Linux en recréant
virtuellement et totalement tous les environnements Windows acquis.
Ecrit par un mathématicien français chevronné, QEMU (Quick emulator)
est téléchargeable sur http://fabrice.bellard.free.fr/qemu/ et vous
permettra de faire tourner toutes vos applications Windows sous
Linux... Maintenant, si l'environnement XP vous manque, vous pourrez
aussi télécharger XPDE sur http://xpde.com pour ne rien changer à vos
habitudes !
source : http://www.silicon.fr/click.asp?ID=6271
30 août 2004
Classement de popularité des blogs
http://www.bsentinel.com/domains.php
26 août 2004
Utilisation de javascript en liaison avec CSS
Utiliser
javascript afin de créer ou bien identifier des éléments CSS peut
s'avérer utile dans l'optique de réaliser des interfaces personnalisées
ou bien apporter une dynamique à la conception de document web.
Le support des fonctions javascript par les navigateurs diffère selon
les versions logicielles. Ceci peut présenter des avantages de
personnalisation dans certains cas mais aussi des limites d'utilisation.
Sur la page ci-dessous se trouve un récapitulatif permettant de
connaître l'efficacité réelle de ces fonctions javascript en fonction
des plateformes.
http://www.quirksmode.org/dom/w3c_core.html
25 août 2004
Utilisation des CSS en liaison avec javascript
L'association
CSS / javascript est au coeur des développements les plus avancés afin
de satisfaire le fonctionnement de techniques CSS qui ne restent pour
l'instant que partiellement déployables en raison de leur support
aléatoire sur certains browsers. On peut ici penser au menus dynamiques
gérés par le biais de listes et de pseudo-classes gérant les rollover
sur les différents éléments de la navigation. (voir : http://www.alsacreations.com/articles/modelesmenus/ )
Afin de gérer la lecture adéquate des styles en fonction de la configuration utilisateur, l'emploi
de CSS et javascript repose sur le principe du développement de
plusieurs CSS individuellement adaptée à chaque type de combinaison
navigateur/plateforme. Le javascript utilisé dans ce cas d'espèce est
une simple détection de navigateur renvoyant vers tel ou tel document
en fonction de la nature du browser :
if (browser.isNS4x == true) {
document.write('<link rel="stylesheet" type="text/css" href="ns4.css">');
}
else {
document.write('<link rel="stylesheet" type="text/css" href="advanced.css">');
}
http://www.dithered.com/css_filters/js_summary.html
24 août 2004
Résumé des paramétrages élémentaires en CSS
À tous les éléments de la page
le sélecteur universel * agit sur tous les éléments HTML. Pour définir
par exemple une couleur rouge par défaut : * { color: #ff0000; }
les éléments susceptibles d'avoir une couleur d'avant-plan, comme les
paragraphes de texte, les titres, les bordures… seront rouges, sauf si
une autre couleur leur est spécifiquement attribuée
À toutes les instances d'un élément
* pour que le texte des paragraphes soit par exemple en bleu :p { color: #0000ff; }
le contenu de toutes les balises
<p> sera bleu, sauf si une autre couleur est localement plus
spécifiquement attribuée
À certaines instances d'un élément
* pour que le texte de certains paragraphes
seulement soit par exemple en vert, on définit la classe .vert : p.vert
{ color: #008000; }
le contenu
de toutes les balises <p class="vert"> sera vert. Le contenu des
balises <p> restera bleu ;
À un ensemble d'éléments successifs
* pour que le texte d'un titre et des paragraphes
qui le suivent soient gris, on définit la classe .gris : .gris { color:
#808080; }
ce style s'appliquera aux éléments bornés par l'élément div :
<div class="gris">
<h1>…</h1>
<p>…</p>
<p>…</p>
</div>
ou définis par :
<h1 class="gris">…</h1>
<p class="gris">…</p>
<p class="gris">…</p>
À une partie de contenu de paragraphe
* pour que certains mots d'un paragraphe soient gris, on applique la classe .gris à l'élément span :
<p>…
<span class="gris">
ceci sera en gris
</span>
…
</p>
À un élément directement ou indirectement contenu dans un autre élément
* pour que le contenu de l'élément em soit en rouge
seulement dans les titres h3, on définit la règle : h3 em { color:
#ff0000;}
qui s'appliquera aussi bien à :
<h3>…
<em>en rouge</em>
…
</h3>
qu'à :
<h3>
…
<code><em>…</em></code>
…
</h3>
À un élément directement contenu dans un autre élément
* pour que le contenu de l'élément em soit en rouge
dans un paragraphe, sauf dans les citations qu'il contient, on écrira :
p>em { color: #ff0000;}
qui s'appliquera à :
<p>…
<em>en rouge</em>
…
</p>
mais pas à :
<p>
<q><em>…</em></q>
</p>
À un élément suivant un autre élément
* pour que le paragraphe après une image soit rouge, on écrira :img + p { color: #ff0000;}
qui s'appliquera à :
<img>…</img>
<p>en rouge</p>
mais pas à :
<h3>…</h3>
<p>…</p>
À différents éléments simultanément
* pour que les titres de tous niveaux soient rouge, on écrira : h1,h3,h3,h4,h5,h6 { color: #ff0000;}
* pour en savoir plus : le regroupement.
Couleurs, bordures et arrières-plans
Les couleurs sont spécifiées à l'aide des Mots-clé HTML ou du modèle de couleur RGB.
Couleur et image d'arrière-plan
* pour que l'arrière-plan d'un élément soit blanc : background-color: #ffffff;
* pour qu'une image occupe l'arrière-plan d'un élément : background-image: url("…url de l'image…") ;
* pour que l'image d'arrière-plan ne se répète pas dans l'élément : background-repeat: no-repeat;
* pour que l'image d'arrière-plan soit centrée dans l'élément : background-position: center;
* pour en savoir plus : les propriétés d'arrière-plan .
Couleur d'avant-plan
* pour que l'avant-plan d'un élément soit noir : color: #000000;
* pour en savoir plus : la couleur d'avant-plan.
Bordures
* pour que l'élément ait une bordure noir et continue de 5 pixels d'épaisseur : border: 5px solid #000000;
* pour que la bordure soit en pointillé : border: 5px dotted #0000ff;
* pour que la bordure donne une impression de relief : border: 5px groove #0000ff;
* pour en savoir plus : les propriétés de bordure.
Taille, alignement et positionnement
Largeurs, hauteurs
* pour spécifier la largeur d'un élément (ici 250px) : width: 250px;
* pour spécifier la hauteur d'un élément (ici 250px) : height: 250px;
* pour en savoir plus : la largeur du contenu et la hauteur du contenu.
Marges, espacement
* pour spécifier la largeur d'une marge autour d'un élément (ici 25px) : margin: 25px;
* pour spécifier la largeur de l'espacement autour d'un élément (ici 25px) : padding: 25px;
* pour en savoir plus : exemples de marges, d'espacements et de bordures.
Alignement du texte
* pour centrer un texte : text-align: center;
* pour aligner un texte à gauche : text-align: left;
* pour aligner un texte à droite : text-align: right;
* pour en savoir plus : l'alignement.
Positionnement des éléments:
* pour centrer horizontalement un élément dans la
page (ici avec une largeur de 70% de celle-ci) : margin-left: 15%;
margin-right: 15%;
* pour extraire un élément du flux normal et le positionner à gauche : float: left;
* pour extraire un élément du flux normal et le positionner à droite : float: right;
* pour empêcher un élément flottant de déborder vers le bas sur le contenu qui le suit :
o le faire
suivre d'un élément <div class="spacer"> </div>
doté de la propriété .spacer { clear: both; }
o ou mieux,
utiliser un élément <hr /> doté de la propriété hr { clear: both;
visibility: hidden; }Il ne sera visible que dans les navigateurs
non-graphiques pour lesquels il contribuera à structurer visuellement
la page, la rendant plus accessible et plus agréable à consulter…
* pour extraire un élément du flux normal et le
positionner de manière absolue dans la fenêtre du navigateur (ici, à 25
px des bords haut et droit) : position: absolute; right: 25px; top:
25px;
* pour extraire un élément fixed du
flux normal et le positionner de manière fixe dans la fenêtre du
navigateur (ici, à 25 px des bords haut et droit) : .fixed { position:
absolute; right: 25px; top: 25px; } html>body .fixed { position:
fixed; }
remarque : le sélecteur
html>body permet de cacher la position fixe à MSIE Windows, qui ne
la supporte pas, et qui s'en tiendra à un positionnement absolu
Typographie
pour spécifier une police de caractères
(ici type arial) : font-family: arial, verdana, helvetica, sans-serif; ;
remarque : les noms de police composés doivent être placé entre guillemets: "Times New Roman" ;
pour spécifier une taille de caractères (ici 1em) : font-size: 1em; ;
pour spécifier une hauteur de ligne (ici 1.5em) : line-height: 1.5em;
pour spécifier une mise en italique : font-style: italic;
pour spécifier une mise en gras : font-weight: bold;
pour spécifier un soulignement : text-decoration: underline;
pour barrer un texte : text-decoration: line-through;
pour forcer l'affichage du texte en capitales : text-transform: uppercase;
Formats d'hyperliens
* liens (ici, bleu) : a { color: #0000ff; } ;
* liens non soulignés : a { text-decoration: none; } ;
* liens visités (ici, violet) : a:visited { color: #800080; } ;
* liens survolés (ici, violet) : a:hover { color: #800080; } ;
* liens activés (ici, violet) : a:active { color: #800080; } ;
Les commentaire :
/* Ceci est un commentaire */
document source :
http://openweb.eu.org/articles/initiation_css/
23 août 2004
Faire des tests avec de vieilles versions d'IE
- Effectuer des tests avec de vielles versions d'IE est possible ( configuration requise : Win XP ou 2000 )
1. Commencez sur Windows XP avec IE 6 installé dessus.
2. Téléchargez les browsers de votre choix :
* explorateur 3 (828K)
* explorateur 4 (2417K)
* explorateur 5.01 (3004K)
* explorateur 5.5 sp2 (3597K)
3. Dézipper les fichiers dans un dossier.
4. Pour lancer les browsers, exécutez les fichiers IEXPLORE.EXE dans chaque dossier.
5. Il est recommandé de créer des fichiers CSS de test afin de vérifier le fonctionnement des navigateurs.
6. Dans l'aide - l'écran d'information (à propos de ...), montre
toujours la version de l'explorateur 6.0, mais l'image au-dessus
indique le type de navigateur "Explorer 4" ; dans 4.0, "Explorer 5" ;
dans 5.0, mais "Explorer 6.0" ; dans 5.5.
- Il existe aussi d'autres distributions permettant de réaliser des tests sur win 98, 2000, XP :
http://www.skyzyx.com/downloads/
!
attention, bien lire les conditions d'uilisation pour éviter les
plantages, regarder au-dessus de la partie download la section "Quirks
and Caveats"
- Si vous cherchez des versions à jour des navigateurs usuels, rendez-vous à l'adresse suivante :
http://www.upsdell.com/BrowserNews/find.htm
Mise à jour Microsoft SP2
La mise a jour de Windows XP appelée Service Pack 2 (SP2) arrive bientot pour les utilisateurs francais.
Microsoft
vient de publier une liste de programmes qui risquent de rencontrer des
problèmes après l'installation de ce Service Pack 2
Sur la page de Microsoft on peut lire : "Microsoft
Windows XP Service Pack 2 (SP2) introduit de nouveaux paramètres qui
vont vous aider a augmenter la performance et la sécurité de votre
système. Ces changements vont affecter les opérations et les
fonctionnalités de certains programmes"
La solution de Microsoft est de conctacter les éditeurs de vos programmes pour y trouvez d'éventuelles mise à jour
Cette liste est très conséquente et même de nombreux programmes de Microsoft y figurent
Quelques exemples :
- Nero Bruning ROM 5.5.6
- AOL 9
- Unreal Tournament 2003
- AutoCAD 2004
- BitDefender 7.2
- eTrust 7
- Command & Conquer Generals
- Cute FTP 5.0
- Microsoft Office XP
- Microsoft Outlook 2000, 2002 et 2003
- Norton Antivirus 2003
- Norton Systemworks 2003 et 2004(beta)
- Style XP
- Yahoo instant Messenger
- ZoneAlarm 5.0.590
Voir la liste complete publiée par Microsoft
Certains
éditeurs ont déja prévus la sortie du SP2 et vont publier des
correctifs pour leurs programmes mais nombre d'entre eux ne sont plus développés
du tout.
Alors réfléchissez bien avant d'installer le Service Pack
2, après il sera trop tard (personnellement je vous conseille d'attendre
un peu)
19 août 2004
Ergonomie et webdesign, quelques adresses utiles
Avoir une idée des bonnes pratique en terme de conception de page
internet est un bon moyen de préparer le développement d'un site. Vous
trouverez ci-dessous quelques liens consacrés à cette discipline.
en français :
Ergolab
- article intéressant sur les formulaires
en anglais :
ui patterns and techniques
scratchmedia (voir la partie tutorial)
Le classement des règles d'accessibilité selon BrailleNet
Le classement des règles d'accessibilité se fait en tenant compte de l'utilisation de navigateurs spécialement adaptés à la consultation de documents internet par des personnes handicapées. Il en existe de plusieurs sortes, navigateurs en mode texte, navigateurs à reconnaissance vocale (qui lisent les contenus textuels en rendant compte de la disposition des éléments à l'oral), navigateurs spéciaux (prise en charge de grossissement, zoom très large, browsers spéciaux dédiés à la navigation clavier, browser à affichage de couleurs spécifiques, ...). La grande diversité de ces applications rend le travail de mise en conformité des documents internet avec les règles d'accessibilité relativement fastidieux tant il demande à ajouter de nombreux paramétrages. Cependant, il apporte aussi la possibilité de se rapprocher des méthodes de montage de page web les plus récentes en privilégiant l'utilisation des styles CSS ainsi que les toutes dernières normes HTML.
Le label Accessiweb se décline en 3 niveaux (Bronze, Argent et Or) :
- niveau Bronze : le site a pris en compte les recommandations essentielles de l'accessibilité. Le site Web a un bon niveau d'accessibilité qui permet en particulier aux personnes handicapées de le consulter via des aides techniques (plage Braille, logiciel lecteur d'écran, synthèse vocale, ...).
- niveau Argent : en plus des recommandations essentielles d'accessibilité, le site a respecté des recommandations facilitant la navigation. Le site a un très bon niveau d'accessibilité.
- niveau Or : le site a respecté toutes les recommandations d'accessibilité. Le site a un excellent niveau d'accessibilité.
L'accessibilité des contenus
Les recommandations générales d'accessibilité décrites ci-dessous donnent une bonne idée de l'anticipation nécessaire à tout développement afin de rendre des pages parfaitement utilisables pour tous
| Bronze |
|---|
1 - laisser l'initiative du rafraichissement de la page à l'utilisateur (éviter les CONTENT REFRESH) |
| Argent |
|---|
1 - s'assurer de l'utilisation appropriée des balises de présentation. Les recommandations WAI recommandent d’utiliser le HTML à bon escient. Ex : Il ne faut pas :
De
manière générale, ne pas utiliser les balises (B, CENTER, BASEFONT,
APPLET, DIR, FONT, ISINDEX, MENU, S, STRIKE et U) et les attibuts
(ALIGN, BGCOLOR, HEIGHT...) qui sont définis comme non valide dans la
dernière version du HTML. |
| Or |
|---|
1
- proposer si possible des liens de téléchargement vers des versions
alternatives au fichier de téléchargement. Les fichiers à télécharger
sont parfois dans des formats peu accessibles (format PDF par exemple).
Il est important de pouvoir proposer des formats de fichiers
alternatifs tels que le RTF, TXT,HTML… |
Appréciation générale : les règles indiquées ci-dessus sont des principes élémentaires d'accessibilité
source : http://www.accessiweb.org/fr/Label_Accessibilite/
ressource complémentaire : http://www.la-grange.net/w3c/WAI-WEBCONTENT-TECHS/
Les caractères spéciaux - encodage pour XHTML
Les caractères spéciaux présents dans les valeurs d'attributs s'avèrent catastrophiques en XHTML. Afin de contrer le problème, vous devez nécessairement les encoder afin d'éviter que le navigateur ne les interprète de façon erronée. Ainsi, pour tous les caractères spéciaux comme « < », « > » ou « & » destinés à être interprétés tels quels, vous devrez plutôt inscrire « < », « > » ou « & » :
Invalide :
<a href="index.php?a=1&b=2" title="Articles & Didacticiels">
Valide :
<a href="index.php?a=1&b=2" title="Articles & Didacticiels">
tables de conversion :
http://fr.selfhtml.org/html/reference/signes.htm
http://evolt.org/article/ala/17/21234/