Si vous êtes nouveau ici, vous mai souhaitez vous abonner à mon flux RSS. De sorte que vous pouvez consulter les dernières mises à jour sur les outils Web2.0, Gagner de l'argent en ligne, conseils en référencement, Ajax et beaucoup plus. Merci de votre visite ProgramimiCOM!

Une liste de contrôle standards du Web

Le terme standards du Web peut signifier différentes choses pour différentes personnes. Pour certains, il est 'table-libre sites », pour d'autres il est« en utilisant le code valable ». Toutefois, des standards web sont bien plus larges que cela. Un site construit selon les standards du Web doivent se conformer aux standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) et rechercher les meilleures pratiques (code valide, code accessible, code sémantiquement correcte, user-friendly URLs etc).

En d'autres termes, un site construit selon les standards du Web devrait idéalement être légère, propre, à base de CSS, accessible, plus utilisable et moteur de recherche convivial.

A propos de la liste de contrôle

Ce n'est pas un uber-liste de contrôle. Il ya probablement beaucoup d'articles qui pourraient être ajoutés. Plus important encore, il ne devrait pas être considéré comme une liste d'articles qui doit être abordée sur tous les sites que vous développez. Il est tout simplement un guide qui peut être utilisé:

- Pour montrer la portée des standards du web
- Comme un outil pratique pour les développeurs pendant la phase de production de sites web
- Comme outil pour les développeurs qui sont intéressés à aller vers des standards web

La liste de contrôle

1.Quality de code
a. Le site d'utiliser un Doctype correct?
b. Est-ce que le site utilisent un jeu de caractères?
c. L'utilisation du site Valid (X) HTML?
d. L'utilisation du site Valid CSS?
e. Est-ce que le site utiliser tout hacks CSS?
f. Le site utilisent des classes inutiles ou IDS?
g. Est le code bien structuré?
h. Le site possède des liens cassés?
i. Comment le site de réaliser en termes de vitesse / taille de la page?
j. Le site comporte des erreurs JavaScript?

2. Degré de séparation entre le contenu et la présentation
a. Est-ce que le site utilise les CSS pour tous les aspects de présentation (polices, couleurs, espacement, les bordures, etc)?
b. Sont toutes des images de décoration dans le code CSS, ou apparaissent-elles dans le (X) HTML?

3. Accessibilité pour les utilisateurs
a. Sont "alt" des attributs utilisés pour toutes les images descriptives?
b. Le site utilisent des unités des unités relatives plutôt absolu de la taille du texte?
c. Est-ce que les aspects de la mise en pause si la taille de la police est-elle augmenté?
d. Le site utilisation visible sauter les menus?
e. Le site utilisent des formulaires accessibles?
f. Le site utilisent des tables accessibles?
g. Y at-il suffisamment de luminosité de la couleur / contraste?
h. Est la seule couleur utilisée pour l'information critique?
i. Y at-il un délai de réponse pour les menus déroulants (pour les utilisateurs ayant des capacités motrices réduites)?
j. Sont autant de liens descriptifs (pour les utilisateurs aveugles)?

4. Accessibilité pour les terminaux
a. Est-ce que le site fonctionne de façon acceptable dans les navigateurs modernes et plus âgés?
b. Est le contenu accessible avec CSS désactivé ou n'est pas supporté?
c. Est le contenu accessible avec images désactivé ou n'est pas supporté?
d. Principe du site dans les navigateurs de texte tel que Lynx?
e. Est-ce que le site fonctionne bien lors de l'impression?
f. Est-ce que le site fonctionne bien dans les appareils portatifs?
g. Est-ce que le site comprend des métadonnées détaillées?
h. Est-ce que le site fonctionne bien dans une gamme de tailles de fenêtre de navigateur?

5. Basic Usability
a. Y at-il une hiérarchie visuelle claire?
b. Sont les niveaux de titres faciles à distinguer?
c. Le site at facile de comprendre la navigation?
d. Est-ce que la navigation site utilise cohérente?
e. Les liens sont-ils soulignés?
f. Est-ce que la langue du site utilisation cohérente et appropriée?
g. Avez-vous une page plan du site et la page de contact? Sont-elles faciles à trouver?
h. Pour les grands sites, est-il un outil de recherche?
i. Y at-il un lien vers la page d'accueil sur chaque page du site?
j. Liens visités sont clairement définis par une couleur unique?

6. Gestion du site
a. Est-ce que le site dispose d'une véritable et utile page d'erreur 404 qui fonctionne à partir de n'importe quelle profondeur dans le site?
b. Est-ce que le site, utilisez des URL amical?
c. Ne vos URL de travailler sans "www"?
d. Le site possède une favicon?

1. Qualité du code

1.1 Le site utilisent un Doctype correct?
Un doctype (abréviation de «déclaration de type de document») informe le validateur de la version de (X) HTML que vous utilisez, et doit figurer tout en haut de chaque page web. Doctypes sont une composante clé de pages web conforme: votre balisage et CSS ne validera pas sans eux.

http://www.alistapart.com/articles/doctype/

En savoir plus:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

http://gutfeldt.ch/matthias/articles/doctypeswitch.html

1.2 Est-ce le site utilisent un jeu de caractères?
Si un agent utilisateur (par exemple un navigateur) est incapable de détecter le codage de caractères utilisées dans un document Web, l'utilisateur mai sera présenté avec un texte illisible. Cette information est particulièrement important pour ceux qui le maintien et l'extension d'un site multilingue, mais en déclarant l'encodage des caractères du document est important pour tous ceux qui produisent XHTML / HTML / CSS.

http://www.w3.org/International/tutorials/tutorial-char-enc/

En savoir plus:

http://www.w3.org/International/O-charset.html

1.3 L'utilisation du site Valid (X) HTML?
Valid code rendra plus rapide que le code avec des erreurs. Valid code rendra mieux que le code invalide. Navigateurs deviennent des normes plus conformes, et il devient de plus en plus nécessaire d'écrire valide et respectueux des standards HTML.

http://www.maxdesign.com.au/presentation/sit2003/06.htm

En savoir plus:

http://validator.w3.org/

1.4 Le site utilise CSS valide?
Vous devez vous assurer qu'il n'y a pas d'erreur dans votre code HTML ou l'autre ou de votre CSS, car des erreurs dans ces deux endroits peuvent entraîner en apparence document bâclé.

http://www.meyerweb.com/eric/articles/webrev/199904.html

En savoir plus:

http://jigsaw.w3.org/css-validator/

1.5 Le site utiliser tout hacks CSS?
Fondamentalement, hacks descendu d'un choix personnel, le montant de connaissances que vous avez des solutions de contournement, la conception spécifique que vous essayez d'atteindre.

http://www.mail-archive.com/wsg@webstandardsgroup.org/msg05823.html

En savoir plus:

http://css-discuss.incutio.com/?page=CssHack

http://css-discuss.incutio.com/?page=ToHackOrNotToHack

http://centricle.com/ref/css/filters/

1.6 Le site utilisent des classes inutiles ou IDS?
J'ai remarqué que les développeurs de l'apprentissage de nouvelles compétences se retrouvent souvent avec une bonne XHTML CSS mais pauvres. Plus précisément, le code HTML a tendance à être pleins de divs inutiles et IDS. Cela se traduit en HTML assez de sens et les feuilles de style bouffi.

http://www.clagnut.com/blog/228/

1.7 Est le code bien structuré?
Sémantiquement correcte utilise des éléments de balisage HTML pour leur usage. Bien structuré HTML a une signification sémantique pour un large éventail d'agents utilisateurs (navigateurs sans feuille de style, les navigateurs texte, les PDA, les moteurs de recherche, etc)

http://www.maxdesign.com.au/presentation/benefits/index04.htm

En savoir plus:

http://www.w3.org/2003/12/semantic-extractor.html

1.8 Le site possède des liens cassés?
Les liens brisés peuvent frustrer les utilisateurs et potentiellement conduire des clients de là. Les liens brisés peuvent également empêcher les moteurs de recherche d'indexer correctement votre site.

En savoir plus:

http://validator.w3.org/checklink

1.9 Comment fonctionne le site accomplir en termes de vitesse / taille de la page?
Ne me faites pas attendre ... C'est le message d'utilisateurs nous donnent dans le sondage après sondage. Même les utilisateurs de large bande peuvent souffrir les Blues de chargement lent.

http://www.websiteoptimization.com/speed/

1.10 ne le site y avoir des erreurs JavaScript?
Internet Explorer pour Windows vous permet d'activer un débogueur qui fera apparaître une nouvelle fenêtre et laissez vous savez qu'il ya des erreurs javascript sur votre site. Il est disponible sous la rubrique «Options Internet" dans l'onglet Avancé. Décochez la case Désactiver le débogueur de script '.

2. Degré de séparation entre le contenu et la présentation

2.1 Le site utilise les CSS pour tous les aspects de présentation (polices, couleurs, espacement, les bordures, etc)?
Utilisez les feuilles de style pour contrôler mise en page et présentation.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-style-sheets

2.2 Existe toutes les images de décoration dans le code CSS, ou apparaissent-elles dans le (X) HTML?
L'objectif pour les développeurs Web est d'enlever toutes les présentations à partir du code HTML, la laissant propre et sémantiquement correcte.

http://www.maxdesign.com.au/presentation/benefits/index07.htm

3. Accessibilité pour les utilisateurs

3.1 Les "alt" des attributs utilisés pour toutes les images descriptives?
Fournir un équivalent texte pour tout élément non textuel

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-text-equivalent

3.2 Le site utilisent des unités relatives, plutôt que des unités absolues pour la taille du texte?
Utilisez des unités relatives plutôt absolues dans les valeurs d'attributs du langage et la feuille la valeur des propriétés de style ».

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

En savoir plus:

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-relative-units

http://www.clagnut.com/blog/348/

3.3 Pensez à tous les aspects de la rupture mise en page, si la taille de police est-elle augmenté?
Essayez ce simple test. Regardez votre site Web dans un navigateur qui prend en charge l'incrémentation facile de taille de police. Maintenant augmenter la taille de police de votre navigateur. Et encore. Et encore ... Regardez votre site. Est-ce que la mise en page détiennent toujours ensemble? Il est dangereux pour les développeurs de supposer que tout le monde navigue en utilisant des tailles de police par défaut.

3.4 Le site utilisation visible sauter les menus?

Une méthode doit être fournie pour permettre aux utilisateurs de sauter les liens de navigation répétitifs.

http://www.section508.gov/index.cfm?FuseAction=Content&ID=12

Groupez les liens apparentés, identifiez le groupe (pour les agents utilisateurs), et, tant que les agents utilisateurs ne le font pas, fournissez un moyen de contourner le groupe.

http://www.w3.org/TR/WCAG10-TECHS/#tech-group-links

... Visiteurs aveugles ne sont pas les seuls incommodés par trop de liens dans une zone de navigation. Rappelons qu'une personne à mobilité réduite avec la technologie adaptative pauvres pourraient être coincés par le biais de tabulation que marécage.

http://joeclark.org/book/sashay/serialization/Chapter08.html#h4-2020

En savoir plus:

http://www.niehs.nih.gov/websmith/508/o.htm

3.5 La place utiliser des formes accessibles?
Formes ne sont pas des choses les plus faciles à utiliser pour les personnes handicapées. Naviguer autour d'une page avec le contenu des textes est une chose, sautillant entre les champs de formulaire et de l'information saisie est une autre.

http://www.htmldog.com/guides/htmladvanced/forms/

En savoir plus:

http://www.webstandards.org/learn/tutorials/accessible-forms/01-accessible-forms.html

http://www.accessify.com/tools-and-wizards/accessible-form-builder.asp

http://accessify.com/tutorials/better-accessible-forms.asp

3.6 Le site utilisent des tables accessibles?
Pour les tables de données, identifier les en-têtes de ligne et colonne ... Pour les tables de données qui ont deux ou plusieurs niveaux logiques d'en-têtes de ligne ou une colonne, utilisez des balises pour associer les données des cellules et des cellules en-tête.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-table-headers

En savoir plus:

http://www.bcc.ctc.edu/webpublishing/ada/resources/tables.asp

http://www.accessify.com/tools-and-wizards/accessible-table-builder_step1.asp

http://www.webaim.org/techniques/tables/

3.7 Existe-il suffisamment de luminosité de la couleur / contraste?
Veiller à ce que les combinaisons de couleurs de premier plan et d'arrière-plan fournit un contraste suffisant lorsqu'elle est vue par une personne daltonienne.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-contrast

En savoir plus:

http://www.juicystudio.com/services/colourcontrast.asp

3.8 est la seule couleur utilisée pour l'information critique?
Veiller à ce que toute l'information transportée par la couleur est également disponible sans couleur, par exemple à partir du contexte ou du balisage.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-colour-convey

Il existe essentiellement trois types de déficiences couleur; Deuteranope (une forme de rouge / déficit couleur verte), Protanope (une autre forme de rouge ou le déficit de couleur verte) et Tritanope (un déficit bleu / jaune très rare).

En savoir plus:

http://colourfilter.wickline.org/

http://www.toledo-bend.com/colourblind/Ishihara.html

http://www.vischeck.com/vischeck/vischeckURL.php

3.9 Est-il un délai de réponse pour les menus déroulants?
Les utilisateurs ayant des capacités motrices réduites mai trouverez des menus déroulants difficiles à utiliser si la réactivité est trop rapide.

3.10 sont tous les liens descriptives?
Le texte du lien doit être suffisamment significatif pour rendre compréhensibles hors de son contexte - soit sur sa propre entreprise ou dans le cadre d'une séquence de liens. Le texte du lien doit également être laconique.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links

4. Accessibilité pour les périphériques.

4.1 Le site fonctionne de façon acceptable dans les navigateurs modernes et plus âgés?

Avant de commencer à construire une mise en page CSS en fonction, vous devez décider quelle navigateurs à soutenir et à quel niveau vous avez l'intention de les soutenir.

http://www.maxdesign.com.au/presentation/process/index_step01.cfm

4.2 Est-ce le contenu accessible avec CSS désactivé ou n'est pas supporté?
Certaines personnes mai visiter votre site soit avec un navigateur qui ne supporte pas le CSS ou un navigateur avec CSS éteint. Dans le contenu est bien structuré, ce ne sera pas un problème.

4.3 La contenus accessibles avec images désactivé ou n'est pas supporté?
Certaines personnes consultent des sites Web avec des images éteint - en particulier les personnes sur les connexions très lentes. Le contenu devrait toujours être accessibles pour ces personnes.

4.4 Est-ce que le site fonctionne dans les navigateurs de texte tel que Lynx?
C'est comme une combinaison d'images et CSS éteint. Un texte à base de navigateur s'appuiera sur le bien structurée du contenu à donner un sens.

En savoir plus:

http://www.delorie.com/web/lynxview

4.5 ne le site fonctionne bien lors de l'impression?
Vous pouvez prendre n'importe quel document (X) HTML et il suffit de style pour l'impression, sans avoir à toucher le balisage.

http://www.alistapart.com/articles/goingtoprint/

En savoir plus:

http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html#print

4.6 Est-ce que le site fonctionne bien en main dispositifs portatifs?
Ceci est un coup dur pour faire face aux jusqu'au appareils portatifs constamment l'appui de leur type de média. Toutefois, certaines configurations fonctionnent mieux dans la main courante des périphériques portables. L'importance de soutenir appareils portatifs dépendra de publics cibles.

4.7 Le site comprennent des métadonnées détaillées?
Les métadonnées sont des informations machine compréhensible pour le web

http://www.w3.org/Metadata/

Les métadonnées sont des informations structurées qui est créé spécifiquement pour décrire une autre ressource. En d'autres termes, les métadonnées sont «données sur les données».

4.8 La site fonctionne bien dans une gamme de tailles de fenêtre de navigateur?
Il s'agit d'une hypothèse commune chez les développeurs que les tailles d'écran sont en hausse. Certains développeurs de supposer que la taille de l'écran moyen est désormais de 1024px de large. Mais qu'en est-utilisateurs avec des écrans plus petits et aux utilisateurs des appareils portatifs? Font-elles partie de votre public cible et sont-ils désavantagés?

5. Basic Usability
5.1 Est-il une hiérarchie visuelle claire?
Organiser et hiérarchiser le contenu d'une page en utilisant la taille, la saillie et les relations de contenu.

http://www.great-web-design-tips.com/web-site-design/165.html

5.2 Existe-niveaux de titre faciles à distinguer?
Utilisez des éléments d'en-tête de la structure du document et de les utiliser conformément aux spécifications.

http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-logical-headings

5.3 Est navigation du site est facile à comprendre?
Votre système de navigation devrait donner à vos visiteurs une indication quant à quelle page du site ils sont actuellement et où ils peuvent aller.

http://www.1stsitefree.com/design_nav.htm

5.4 Est de navigation du site cohérente?
Si chaque page de votre site a une cohérence de style de présentation, les visiteurs auront plus de facilité pour naviguer entre les pages et trouver de l'information

http://www.juicystudio.com/tutorial/accessibility/navigation.asp

5.5 Est-ce que la langue du site utilisation cohérente et appropriée?
L'utilisation de la langue claire et simple promouvoir une communication efficace. Essayer d'apparaître comme articuler peut être aussi difficile à lire la grammaire aussi mal écrit, surtout si la langue utilisée n'est pas la principale langue du visiteur.

http://www.juicystudio.com/tutorial/accessibility/clear.asp

5.6 Le site possède une page plan du site et la page de contact? Sont-elles faciles à trouver?
La plupart des cartes du site ne parviennent pas à exprimer de multiples niveaux de l'architecture d'information du site. Dans les tests d'utilisabilité, les utilisateurs oublient souvent des cartes d'emplacement ou ne peut pas les trouver. La complexité est aussi un problème: une carte devrait être une carte, ce n'est pas un défi de navigation propre.

http://www.useit.com/alertbox/20020106.html

5.7 Pour les grands sites, est-il un outil de recherche?
Bien que les outils de recherche ne sont pas nécessaires sur les sites plus petits, et certaines personnes ne jamais les utiliser, le site des outils de recherche spécifiques permettent aux utilisateurs un choix d'options de navigation.

5.8 est-il un lien vers la page d'accueil sur chaque page du site?
Certains utilisateurs apprécient de revenir à la page d'accueil d'un site après avoir navigué vers le contenu d'un site. La page d'accueil devient un camp de base pour ces utilisateurs, leur permettant de se regrouper avant d'explorer le nouveau contenu.

5,9 liens sont-ils soulignés?
Afin d'optimiser l'affordance perçue de cliquabilité, la couleur et de souligner le texte du lien. Les utilisateurs ne devraient pas avoir à deviner ou à frotter la page pour savoir où ils peuvent cliquer.

http://www.useit.com/alertbox/20040510.html

5.10 Existent liens visités clairement définis?
Le plus important, pour savoir quelles pages ils ont déjà visité évite aux utilisateurs de revenir sur les mêmes pages sans le vouloir, encore et encore.

http://www.useit.com/alertbox/20040503.html

6. Gestion du site

6.1 Le site dispose d'une véritable et utile page d'erreur 404 qui fonctionne à partir de n'importe quelle profondeur dans le site?
Vous avez demandé une page - soit en tapant une URL directement dans la barre d'adresse ou cliquer sur l'out-of-link date et l'on se trouve au milieu de nulle part cyberespace. Un site Web convivial vous donnera un coup de main et beaucoup d'autres seront tout simplement ne rien faire, en s'appuyant sur le navigateur intégré à la capacité d'expliquer ce qu'est le problème.

http://www.alistapart.com/articles/perfect404/

6.2 Le site utiliser des URL amical?
La plupart des moteurs de recherche (avec quelques exceptions près - à savoir Google) n'indexera pas les pages qui ont un point d'interrogation ou autres caractères (comme une esperluette ou signe égal) dans l'URL ... à quoi sert un site si personne ne peut le trouver?

http://www.sitepoint.com/article/search-engine-friendly-urls

L'un des pires éléments de la toile à partir d'un point de vue interface utilisateur est l'adresse URL. Toutefois, si elles sont courtes, logique, et l'auto-correction, les URL peuvent être acceptables utilisables

http://www.merges.net/theory/20010305.html

En savoir plus:

http://www.sitepoint.com/article/search-engine-friendly-urls

http://www.websitegoodies.com/article/32

http://www.merges.net/theory/20010305.html

6.3 Ne fonctionne l'URL du site sans "www"?
Bien que ce n'est pas critique, et dans certains cas n'est même pas possible, il est toujours bon de donner aux gens le choix de deux options. Si un utilisateur tape votre nom de domaine sans le www et ne reçoit pas de site, cet inconvénient pourrait à la fois l'utilisateur et vous.

6.4 Le site dispose d'une favicon?

Un favicon est une image multi-résolution figurer sur presque tous les sites élaborés par des professionnels. Le Favicon permet au webmaster de continuer à promouvoir leur site, et pour créer une apparence plus personnalisée dans le navigateur d'un visiteur.

http://www.favicon.com/

Favicons sont certainement pas critique. Toutefois, si elles ne sont pas présents, ils peuvent causer des erreurs 404 dans vos logs (statistiques du site). Les navigateurs comme IE font la demande à partir du serveur quand un site est mis en signet. Si une icône de favori n'est pas disponible, une erreur 404 mai être généré. Par conséquent, avoir un favicon pourrait réduire les erreurs 404 favicon spécifiques. Le même est vrai d'un fichier "robots.txt".

• 0 Commentaires

Est-il inquiétant pour vous lorsque toutes les autres pages Web que vous visitez a une taille de police différente?. Police Une page web est trop petite, et les polices d'une autre page web sont trop gros ... Et bien voici un moyen de corriger cela et régler les polices de chaque page Web à un peu la taille que vous voulez.

Dans Internet Explorer, sélectionnez: Outils-Options Internet, choisissez l'onglet Général, cliquez sur le bouton d'accessibilité, et cochez l'option Ignorer les tailles de police spécifiées sur les pages Web (dont la formulation varie en fonction de votre version de IE).

Dans Netscape 6 et 7, choisissez Édition-Préférences, sélectionnez Polices (double-cliquez sur Apparence, si vous ne voyez pas "Polices" apparaît), puis de vérifier soit Utiliser mes polices par défaut ou décochez la case Autoriser les documents à utiliser d'autres polices, en fonction de votre (version la formulation de ces choix varie aussi).

Maintenant, toutes les polices des pages Web devrait être de taille uniforme sur toutes les pages.

• 0 Commentaires

En aucun ordre particulier 55 raisons pour moi de faire "sites web" tableless utilisant XHTML valide pour le balisage, les CSS pour la mise en page et Flash avec parcimonie, uniquement comme un ingrédient. Par tableless je veux dire en évitant les tableaux (ou un tagsoup de divs inutiles substituant trs table et TDS) aux fins de mise en page et en visant comme balisage sémantique que possible. Certaines des raisons sont "de HTML», certaines «plus de Flash Full Monty» et certains ont plus de deux.

Je sais que ce sujet a été discuté d'une abondance, j'avais juste besoin de me réaffirmer:)

Here we go:

1. or cssbeauty Vous pouvez obtenir des liens gratuits à partir de sites vitrine à la manière zengarden, Stylegala, cssimport ou cssbeauty
2. Vous ne devez pas passer la pensée supplémentaire et de temps à choisir sur le plan design jusqu'à la marque de votre document (en majuscule ou en minuscule, des citations ou sur des attributs sans guillemets)
3. Vous n'avez pas besoin de dépenser la pensée supplémentaire sur les étiquettes qui doivent être fermées et qui peut (ou doit) être laissée ouverte
4. Vous «aider» les moteurs de recherche pour fournir un contenu plus pertinent en utilisant un balisage sémantique
5. Vous pouvez économiser des coûts de bande passante et les visiteurs pourront les voir plus rapide en rendant les pages plus mince
6. Il va être plus facile pour vous de passer à XHTML 2.0, qui vous donnera plus d'outils sémantiques
7. Une fois que vous avez pratiqué assez de codification des pages devient beaucoup plus simple et plus rapide que n'importe quelle table / tr / td tagsoup
8. Lorsque le codage est plus rapide, vous pouvez passer plus de temps à la réflexion sur l'expérience utilisateur
9. En pensant à la sémantique d'un document vous aide à prendre des décisions de conception et architecture de l'information
10. Vous pouvez rapidement créer un site factice pour tester vos sites architecture de l'information et ajoute un look plus tard, avec seulement des changements mineurs dans le code
11. Vous pouvez faire la conception après que la plupart de la fonction de base est effectué qui permettra à votre client (ou boss) à penser de façon réaliste le travail sur la façon dont sont encore nécessaires
12. Il est possible de relier directement à vos pages de contenu (par rapport à Flash)
13. contrôles de navigateur comme du texte-taille et boutons Précédent et Suivant de travail (par rapport à Flash)
14. Remodèle et réaligne sur l'ensemble du site sont plus simples
15. il est plus simple de faire de petits changements de dernière minute pour vos dessins
16. Propreté balisage facilite, voire inutile de construire un CMS
17. Propreté de balisage, il est plus facile pour un autre développeur de sauter à bord
18. Vous pouvez faire le backend presque totalement indépendamment de l'interface de conception, par une personne complètement différente
19. Vous avez beaucoup de façons de jouer avec le balisage en essayant d'optimiser pour les moteurs de recherche, sans affecter layout visibles
20. Vous avez le contrôle total sur les clichés d'impression de vos pages
21. Vos sites sont automatiquement accessibles à tous les types de navigateurs
22. Promouvoir les standards du Web aidera votre travail dans l'avenir, de ne pas avoir à coder différemment à chaque navigateur
23. Avec tous elemets fermé, vous marque look plus propre
24. Code bien formé assure que votre site fonctionne dans les navigateurs les plus
25. Code bien formé aiderait codeurs navigateur pour passer plus de temps sur les fonctionnalités utiles que les moteurs de rendu qui tentent de comprendre le code Borken
26. Votre site web fonctionnera dans les futurs navigateurs
27. Votre site Web fonctionne dans le mobile (et d'autres dispositifs nouveau)
28. Vous apprendrez les bases du langage XML qui a bien d'autres utilisations
29. Les fichiers CSS sont enregistrés dans le cache du navigateur pour la récupération rapide et utiliser moins de bande passante
30. Vos documents sont faciles à convertir en arrière un autre format en utilisant XSLT
31. Penser la sémantique qui vous fait penser plus sur le contenu
32. La sémantique d'apprentissage vous fait apprécier l'organisation et à écrire vos autres documents (emails, même) de manière plus organisée
33. Vous pouvez écrire des nouvelles technologies dans votre CV ou votre portefeuille
34. Les navigateurs modernes rendre un document valide plus rapide
35. Vous vous sentez mieux dans votre peau quand vous êtes à rendre les sites «la bonne façon»
36. , Shaun Inman , Cameron Moll , Douglas Bowman , Dave Shea … Ils le font: Dan Cederholm, Jeffrey Zeldman, Jason Santa Maria, Shaun Inman, Cameron Moll, Douglas Bowman, Dave Shea ...
37. Vous y appartiennent à un "mouvement", faire de bons contacts, etc
38. Vous apprendrez à apprécier les nouveaux navigateurs qui fait plus de concurrence et plus tard pour les navigateurs mieux
39. Blink tag est allé
40. Codification stricte qui vous fait apprendre à voir les erreurs plus rapidement
41. Vous pouvez viser à faire de l'argent écrit un livre sur elle
42. Il ya plus de possibilités d'emploi si vous connaissez ces nouvelles façons
43. Vous apprendrez à mieux comprendre comment un navigateur fonctionne
44. Vous pouvez utiliser des hacks et des techniques avec des noms sympas comme "être gentil avec Opera"
45. vous commencez à des soins plus sur les métadonnées, des documents et types de caractères
46. Avec plus de personnes rendant les pages plus mince, la quantité de données se déplaçant dans l'ensemble du Web seront plus petits et toutes les connexions plus rapides
47. XHTML a un nom plus frais que le HTML
48. Il ya des gens plus de réflexion sur les avantages et les inconvénients et de codification des trucs du XHTML qui en fait un plus grand forum d'apprentissage
49. Vous pouvez utiliser le balisage essentiellement même modèle pour de nombreux sites Web différents
50. Apprendre à lire et à écrire qu'il fait Fast-il possible d'utiliser des outils moins coûteux (notepad)
51. Google le sait:
    • 4.380.000 xhtml mieux que html> 4370000 mieux que HTML XHTML
    • 206 "XHTML est meilleur que html"> 87 "html est meilleur que XHTML"
    • 2.130.000 xhtml sucks <10300000 html sucks
52. Lorsque tous les navigateurs commencent à comprendre le type MIME correct (xml), vous n'avez pas à convertir tous vos sites Web de HTML, juste pour passer à corriger MIME
53. Par plus de personnes utilisant XHTML vous assurer que dans l'échange de demain aura besoin de comprendre le type MIME correct
54. L'accessibilité est forcée d'exiger l'attribut alt des images
55. Il ya tout simplement pas ce nombreuses raisons d'utiliser HTML ou entièrement Flash au lieu

• 59 Commentaires

Dix CSS Astuces Vous Mai Not Know s'est avéré un tel succès que nous avons décidé qu'il était temps de vous offrir dix autres astuces CSS que vous ne savez mai.

1. Block vs éléments de niveau ligne

Presque tous les éléments HTML sont de bloquer ou d'éléments en ligne. Les caractéristiques des éléments de bloc sont:

• Toujours commencer sur une nouvelle ligne
• Hauteur, line-height et les marges supérieure et inférieure peuvent être manipulées
• Largeur par défaut à 100% de leur élément contenant, à moins que la largeur est spécifié

Exemples d'éléments de bloc comprennent <div> <p> <h1> <form> <ul> et <li> Éléments en ligne, d'autre part ont les caractéristiques inverses:

• Commencer sur la même ligne
• Hauteur, line-height et les marges supérieure et inférieure ne peut être changé
• Largeur est aussi longue que le texte / image et ne peut être manipulée

Exemples d'éléments en ligne comprennent <span> <a> <label> <input> <img> <strong> et <em>

Pour changer le statut d'un élément, vous pouvez utiliser display: inline ou display: block Mais quel est le point de changer un élément de bloc étant à roues alignées, ou vice-versa? Eh bien, au début, il semble mai comme vous pourriez presque jamais l'utiliser, mais en réalité il s'agit d'une technique très puissante, que vous pouvez utiliser quand vous voulez:

• Avez un démarrage élément en ligne sur une nouvelle ligne
• Avoir un début élément de bloc sur la même ligne
• Contrôle la largeur d'un élément en ligne (particulièrement utile pour les liens de navigation)
• Manipuler la hauteur d'un élément en ligne
• Définir une couleur de fond plus large que le texte des éléments de bloc, sans avoir à spécifier une largeur

2. Un autre modèle de boîte hack alternative

Le modèle de boîte hack est utilisé pour fixer un problème de rendu dans le pré-navigateurs IE 6 sur PC, où près de la frontière et le rembourrage sont inclus dans la largeur d'un élément, par opposition à compléter la liste. Un certain nombre de CSS-fondé des solutions ont été avancées pour remédier à cette situation, alors voici un autre qui nous plaît vraiment:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

La commande première largeur est lu par tous les navigateurs, la seconde par tous les navigateurs sauf IE 5.x sur PC. Parce que la deuxième commande arrive en deuxième position il prend le pas sur la première - toute commande qui arrive en deuxième position sera toujours l'emporter sur une commande précédente. Alors, comment tout cela fonctionne?

En plaçant des balises de commentaires vides (/**/) avant le deux-points, IE 5.0 ignorera la commande. De même, en plaçant ces balises de commentaires vides après les deux points, soit 5,5 ignorera la commande. En utilisant ces deux règles en liaison les uns avec les autres, on peut masquer la commande de l'ensemble de IE 5.x.

3. Largeur minimum d'une page

A very handy CSS commande qui existe est le min-width de min-width par lequel vous pouvez spécifier une largeur minimale pour n'importe quel élément. Cela peut être particulièrement utile pour spécifier une largeur minimum d'une page.

Malheureusement, IE ne comprend pas cette commande, nous aurons besoin de trouver une nouvelle manière de faire ce travail dans ce navigateur. Premièrement, nous allons insérer une <div> sous le tag <body> comme on ne peut pas assigner une largeur minimale de la <body>

<body>
<div id="container">

Ensuite nous créons nos commandes CSS, de manière à créer une largeur minimum de 600px:

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

La première commande est la commande minimum régulier largeur, et la seconde est une commande courte JavaScript que IE ne comprend. Notez bien que, cette commande provoquera votre document CSS pour invalider mai afin que vous préférez pour l'insérer dans la tête de chaque document HTML pour contourner cela.

Vous pouvez également combiner cette largeur minimale d'une largeur maximum:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

4. IE et de la largeur et la hauteur des questions

IE a une façon plutôt étrange de faire les choses. Il ne comprend pas le min-width et min-height mais interprète plutôt que width et height comme min-width et min-height - Go figure!

Cela peut causer des problèmes, parce que nous devons mai cases susceptibles d'être redimensionnable devrait texte plus besoin d'aller chez eux ou si le texte utilisateur redimensionner. Si nous utilisons seulement la width et de commandes de height sur une boîte, puis les navigateurs non-IE ne permet pas la case pour redimensionner. Si nous n'utilisons que les min-width et min-height même si on ne peut pas contrôler la largeur ou la hauteur dans IE!

Cela peut s'avérer particulièrement problématique lorsque l'utilisation d'images d'arrière-plan. Si vous utilisez une image de fond qui a 80px de large et 35px de haut, alors vous voudrez vous assurer que la taille par défaut pour une boîte en utilisant cette image est exactement 80 x 35px. Toutefois, si les utilisateurs redimensionner le texte, c'est que la taille de la boîte devra augmenter grâce.

Pour résoudre ce problème, vous pouvez utiliser le code suivant pour une boîte avec class="box"

.box
{
width: 80px;
height: 35px;
}

html> body. case
(
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
)

Tous les navigateurs sur lecture de la première règle CSS mais IE va ignorer la seconde règle, car elle fait usage de la commande sélecteur enfant. Les navigateurs non-IE sur lecture de la deuxième et aura préséance sur les valeurs de la première règle, parce que cette règle CSS est plus spécifique, et les règles CSS qui sont plus spécifiques sont toujours prioritaires par celles qui sont moins spécifiques.

5. Text-transform commande

L'un des moins connus, mais les commandes vraiment utile CSS est la text-transform commande. Trois des valeurs plus communes de cette règle sont: text-transform: uppercase text-transform: lowercase et text-transform: capitalize La première règle transforme tous les caractères en majuscules, la seconde les transforme tous en petites lettres, et le troisième fait la première lettre de chaque mot capitales.

Cette commande est incroyablement utile pour aider à assurer la cohérence dans le style à travers un site Web entier, surtout s'il ya un certain nombre d'éditeurs de contenu. Dites par exemple, votre guide de style dicte que les mots des rubriques doivent toujours commencer par des majuscules. Pour s'assurer que c'est toujours le cas, text-transform: capitalize Même si les rédacteurs du site oublier la capitalisation, leur erreur ne sera pas affiché sur le site.

Il est également préférable d'utiliser text-transform: uppercase de capitaliser les mots, les lecteurs d'écran mai prononcer des mots plus courts en majuscules, abréviations. Un bon exemple de ceci est «NOUS», qui se prononce comme «NOUS» par certains lecteurs d'écran.

6. Disparaître du texte ou des images dans IE?

IE a un bug très étrange où le texte ou les images d'arrière-plan disparaît parfois de vue. Ces éléments sont encore réellement là, et si vous mettez tout sur l'écran ou Cliquez sur rafraichir ils vont souvent ré-apparaître. Sorte d'étrange, hein?

Ce problème se produit surtout sur des images de fond et sur le texte à côté d'un élément flottant. Pour remédier au problème, insérez simplement position: relative dans la commande de CSS pour l'élément de disparaître, et pour une raison bizarre, ça va généralement résoudre le problème. Si cela ne fonctionne pas (elle le fait parfois non), d'attribuer une largeur de l'élément incriminé dans le code CSS, ce qui devrait résoudre le problème.

7. Texte invisible

Parfois, vous voulez réellement mai pour rendre le texte invisible. Texte invisible peut être particulièrement utile pour les utilisateurs de lecteurs d'écran, peut-être d'attribuer une étiquette à un élément de formulaire ou d'insérer une rubrique à venir d'une section. Vous ne voulez pas changer l'apparence visuelle par l'insertion, ceux-ci? Les rendre invisibles et personne ne l'aide d'un navigateur visuel sait qu'ils sont là.

Vous mai tiens également à rendre le texte invisible si l'aide d'un imprimé d'ordinateur de poche ou fichier CSS, car certaines informations mai pas besoin d'être affiché sur l'un de ces milieux (voir ci-dessous pour plus de détails).

Pour rendre le texte invisible, vous pouvez utiliser display: none - facile! Cela fonctionne bien pour cacher texte à partir d'ordinateurs de poche (si CSS est pris en charge) et les pages Web imprimées, mais n'est pas si grande pour beaucoup de lecteurs d'écran. Les lecteurs d'écran sont en train de devenir trop intelligent pour leur propre bien, et certains seront effectivement ignorer le texte qui a toute display: none de la display: none assigné.

Pour les utilisateurs de lecteurs d'écran donc, une nouvelle approche est nécessaire: position: absolute; left: -9000px Cela prend essentiellement le texte et le positionne 9000px à la gauche du bord gauche de l'écran, essentiellement pour rendre invisible.

8. Document CSS pour ordinateurs de poche

Un document distinct CSS peuvent être créés pour les assistants numériques et les téléphones mobiles, et ne s'active que si l'un de ces appareils est utilisé pour accéder à votre site. Sites Web plus en plus de la création séparée documents CSS pour l'impression, afin d'imprimer automatiquement les pages Web deviennent des amis lorsque des utilisateurs choisissent de les imprimer. Vous pouvez également faire de même pour les appareils portables.

La commande suivante est utilisée pour appeler le document CSS pour ordinateurs de poche:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

Commandes CSS dans le fichier CSS de poche préséance sur toute commandes équivalentes dans le document principal CSS. Alors, quelles commandes devrait vous placer dans ce dossier?

Idéalement, vous souhaitez que les utilisateurs Internet de poche pour éviter d'avoir à faire défiler à travers. Pour tester cela, ouvrez votre site Web dans une fenêtre ordinaire et le redimensionner à 150px de largeur. Alors, ouvrez votre fichier CSS principal et insérer une nouvelle commande tout en bas du document. Les commandes que vous placez ici devrait ajuster la disposition du site afin qu'il ne nécessite pas de défilement horizontal pour une largeur de 150px. Ensuite, ouvrez un nouveau document, couper et coller ces nouvelles commandes plus, et l'enregistrer comme handheldstyle.css (ou n'importe quel nom que vous voulez lui donner).

Ce que votre site Web propose aux internautes de poche devrait être assez différent de ce qu'il offre sur les navigateurs web traditionnels, comme l'expérience utilisateur est très différente. Pour de plus amples informations, un livre tel que Handheld Usability est a great read.

9. 3-d bouton poussoir effet

Retour dans les premiers jours du Web, 3-d boutons qui semblaient devenir enfoncé lorsque moused plus étaient à la mode. À cette époque, cela ne pouvait être atteint à travers des images et JavaScript, mais maintenant, avec l'avènement des CSS nous pouvons aller rétro et re-créer l'effet désiré:

Les commandes principales CSS, vous aurez besoin sont:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a: hover
(
position: relative;
top: 1px;
left: 1px;
border-color: # 000 # # aaa aaa # 000;
)

En dehors de ces commandes, vous pouvez insérer aucune autre commande pour obtenir l'effet désiré présentation - la seule limite est votre imagination!

10. Navigation même code sur chaque page

La plupart des sites en surbrillance l'élément de navigation de l'emplacement de l'utilisateur dans le site Web, pour aider les utilisateurs à s'orienter. Il s'agit d'une exigence fondamentale pour l'utilisabilité de base, mais peut être une douleur que vous devrez modifier le code HTML derrière la navigation pour chaque page. Alors peut-on avoir le meilleur des deux mondes? Est-il possible d'avoir la navigation mis en évidence sur chaque page, sans avoir à modifier le code HTML sur chaque page? Bien sûr, il est ...

Tout d'abord, vous devez assigner une catégorie à chaque élément de navigation:

<ul>
<li><a href="#" class="home" >Home</a></li>
<li><a href="#" class="about" >About us</a></li>
<li><a href="#" class="contact" >Contact us</a></li>
</ul>


Vous devrez ensuite insérer un id dans la balise <body> id doit être représentatif de l'endroit où les utilisateurs sont dans le site et devrait changer lorsque les utilisateurs déplacent à une section de site différent. En cas de 'Home' il convient de lire <body id="home"> dans 'A propos de nous, ils devraient être <body id="about"> et dans' <body id="contact"> Contactez-nous <body id="contact">

Ensuite, vous créez une nouvelle règle CSS:

#home .home, #about .about, #contact .contact
{
commands for highlighted navigation go here
}

Cela crée essentiellement une règle qui ne prend effet que lorsque class="home" est contenu dans id="home" et quand class="about" est dans id="about" et class="contact" est dans id="contact" Ces situations ne se produira que lorsque l'utilisateur se trouve dans la section du site approprié, la création de manière transparente nos souligné élément de navigation.

• 0 Commentaires

Trying to get CSS des sites Internet basés à regarder les mêmes dans tous les navigateurs peuvent souvent être difficile. Beaucoup de problèmes se situent cependant avec Internet Explorer d'exécuter des commandes CSS différemment des autres navigateurs conformes aux normes plus. Tout n'est pas perdu, cependant, comme beaucoup des différences voyez-vous entre les différents navigateurs sont causées par les mêmes questions CSS Internet Explorer ...

1. Les éléments de page sont plus étroites dans Internet Explorer

Peut-être le plus célèbre et IE CSS problème est une mauvaise interprétation d'Internet Explorer du modèle de boîte CSS, qui peut causer des éléments de la page à être plus étroite dans IE. Chaque élément HTML est essentiellement une boîte, dont la largeur est le total de ses marges, bordures, les rembourrages et zone de contenu. Imaginez la règle CSS suivante:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}

Cela signifie que chaque div est 50em large au total. Ce montant est constitué d'une zone de contenu 30em de large, et un rembourrage en 4em, 1em frontières et 5em (invisible) de marge sur les côtés gauche et droit.

Dans IE toutefois, la bordure et la marge sont inclus dans la largeur du contenu, par opposition à compléter la liste. Dans IE par conséquent, la largeur du contenu est seulement 20em (30em moins 5em padding et la bordure de chaque côté), et la largeur totale de la div est juste 40em.
Ce modèle de boîte CSS problème se produit dans Internet Explorer 5.x, et peut se produire dans IE 6, selon la façon dont vous déclarez la valeur ISO dans le code HTML. Il ya deux façons d'y parvenir:

• <?xml version="1.0" encoding="iso-8859-1"?>
• <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

La première commande est placé sur la première ligne du document HTML et le second peut être placé n'importe où dans le <head> Pour que des pages XHTML à valider, c'est obligatoire d'utiliser l'une de ces commandes. Le W3C recommande d'utiliser la première commande que la seconde sera progressivement supprimée à l'avenir.

En utilisant la première commande Toutefois, Internet Explorer 6 rendra le modèle de boîte CSS de façon incorrecte, tout comme dans la version 5 navigateurs. Pour résoudre le problème du modèle de boîte, vous aurez besoin d'insérer un hack CSS pour envoyer des valeurs différentes largeur pour différents navigateurs. Le CSS hack vous utiliserez dépendra de la valeur que l'ISO que vous utilisez, et donc quelles versions d'IE rendent le modèle de boîte de façon incorrecte.

Pour corriger représentent que IE 5.x, utilisez les commandes CSS suivantes:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}

Pour fixer en place toutes les versions d'Internet Explorer, utilisez ces commandes CSS:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
}
html>body div {
width: 30em
}

(Voir l'article, hacks CSS & détection du navigateur pour plus d'informations sur ces hacks.)

2. Texte répandre hors de son conteneur dans les navigateurs non-IE

Internet Explorer, contrairement aux autres navigateurs, élargira encore les frontières et les couleurs de fond afin de texte ne déborde pas de son élément conteneur.

Si vous allez pouvoir afficher ce dans Internet Explorer, la boîte devrait semblent bons. Dans tous les autres navigateurs, le texte est répande au-dehors de la partie droite de la boîte. La boîte a été attribué class="box" et a le CSS suivant commandes lui sont .box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
} .box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap
}

Les navigateurs non-IE respectera les width: 40px commande CSS, ce qui explique pourquoi la boîte ne se développe pas dans ces navigateurs. IE interprète plutôt que width comme min-width et donc accroît la boîte pour contenir le texte (le même principe s'applique aux height et min-height

Pour s'assurer que le texte ne déborde pas de la boîte dans tous les navigateurs, vous aurez besoin d'utiliser la règle CSS suivante, en plus de la première:

html>body .box
{
width: auto;
min-width: 40px
}

IE va ignorer cette commande CSS, que la commande a html>body à l'avant de celui-ci (voir l'article, hacks CSS & détection du navigateur pour plus de détails). En tant que telle, cette commande SSI est seulement pour les navigateurs non-IE. La première règle CSS, width: auto annule la règle de width initiale. La seconde commande, min-width: 40px assigne ensuite une largeur minimale de la boîte, et la boîte toujours se développer pour s'adapter au texte.

Check out the box again (you won't see any difference in Internet Explorer, so open this up in another browser to see the change); Much better!

3. Disappearing background images

IE has a very freaky bug where it likes to make background images (and sometimes even text – particularly if there are floated elements around) disappear. This often happens when you scroll up and down on a web page and you can usually make the background re-appear by refreshing the page.

Obviously you won't want your site visitors to have to refresh a page to see a background image in full! A freaky solution to this freaky problem is to insert the CSS command, position: relative into the CSS rule containing the background image:

.foo {
background: url(filename.jpg);
position: relative
}

Occasionally this won't work, so another solution is to assign a width or a height to the element with the background image. You may not want to assign a height or width, so a solution is to assign a height of 1% for Internet Explorer. Because IE interprets height as min-height (see point 2 above) this CSS rule won't affect the appearance:

.foo {
background: url(filename.jpg);
height: 1%
}
html>body .foo {
height: auto
}

The height: 1% CSS command is cancelled out by the height: auto CSS command. Internet Explorer doesn't understand html>body , so by inserting this in front of the second CSS rule this whole CSS rule is ignored by IE .

4. Widths only working on IE

Every HTML element is either a block or an inline element. Examples of block elements include <div> , <p> , <h1> , <form> and <li> . Example of inline elements include <span> , <a> , <label> , <strong> and <em> .

One of the characteristics of inline elements is that you can't change the width of an inline element . The following CSS rule shouldn't, in theory, work:

span {
width: 100px
}

This CSS rule won't work, except in Internet Explorer where each span will now have a width of 100px. In every other browser however, the width of the span will simply be the width of the number of characters contained in the element. The solution? Make the span a block level element :

span {
width: 100px;
display: block
}

(Turning the span into a block element will make the width command work in every browser, but it will also make the span begin on a new line. To combat this, you could assign float: left to the span.)

5. Unstyled version of web page appearing in IE

When your website loads up in Internet Explorer, does an unstyled version of the page appear for a second or two , before the styled version kicks in this? If so, your website may be suffering from what's known as the Flash Of Unstyled Content (or FOUC).

If you're using the @import directive (eg <style type="text/css">@import "styles.css";</style> ) to call up your CSS file then this phenomenon may be happening on your website in IE . It's weird, there's no logical explanation for it, but this problem obviously needs to be fixed.

The simple solution to this illogical problem is an equally illogical solution – insert either a link or a script element into the header:

• <script type="text/javascript" src="scripts.js"></script>
• <link rel="stylesheet" href="styles.css" type="text/css" media="print" />

It doesn't matter which one you insert (or even if you insert both). If you provide a print stylesheet, using the link element to reference it (as indicated in the example above), then you'll never see the FOUC phenomenon.

6. Fixed width web page not sitting in centre of window

Got a fixed width website and can't get it to centrally align in the window in Internet Explorer? Or you can get it to centrally align in IE but not in any other browser? Fear not, it's not your fault! Unfortunately, the correct way of centrally aligning content through CSS doesn't actually work in IE :

#container {
width: 770px;
margin: 0 auto
}

The second command, margin: 0 auto , basically gives our containing element an automatic margin on the left and right, thereby positioning the containing element in the centre of the browser window.

IE however, will need slightly different commands to make this work:

body {
text-align: center
}
#container {
width: 770px;
margin: 0 auto;
text-align: left
}

This will then centrally align the container in IE too. To prevent the text from centrally aligning too, we insert text-align: left into the container div.

--

This article was written by Trenton Moss. Trenton's crazy about web usability and accessibility – so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone. He knows an awful lot about the Disability Discrimination Act and spends much of his time working on the world's most accessible CMS.

• 0 Commentaires

La première moitié de ce tutoriel vous a présenté à faire un widget rudimentaires mais fonctionnelles de la sorte, vous pouvez trouver sur le site de Yahoo depuis son rachat de Konfabulator. Dans cet article, vous allez ajouter la touche finale à augmenter ses fonctionnalités. Widget Walkthrough

Les préférences que vous avez créé dans la première partie du présent article ne font en réalité rien de leur propre chef, ils aurez besoin du code JavaScript suivant afin de rendre effectivement les changements nécessaires:

<action trigger="onLoad">
<! [CDATA [
updatepreferences function () (
datatextarea.font = preferences.textfontpref.value;
datatextarea.color = preferences.textcolorpref.value;
datatextarea.size = preferences.textsizepref.value;
datatextarea.style = preferences.textstylepref.value;
)
updatepreferences ();
]]>
</ action>
<action déclenchement ="onPreferencesChanged">
updatepreferences ();
</ action>

Comme vous pouvez le constater, chaque action (onLoad et onPreferencesChanged) est contenu dans ses propres <action> élément. Toutes chaque ligne du updatepreferences () est fait est la fixation du attributs de l'élément textarea, un peu comme CSS serait le cas avec HTML. J'ai inclus l'ouverture CDATA tag que nous en aurons besoin pour l'une des fonctions suivante.

Widget Walkthrough - Obtenir la une des journaux

Maintenant vous avez besoin pour obtenir véritablement les titres de nouvelles à partir du serveur Web de la BBC. To do this, you'll need to make use of the URL widget engine object:

function getdata() {
var url = new URL ();

url.location =
"Http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/
Technologie / rss.xml ";
feeddata url.fetch = ();
)
GetData ();

This will instruct the widget to fetch whatever file is waiting at the above URL. Vous devez maintenant afficher le fichier:

SetData fonction () (
datatextarea.data = feeddata;
)
SetData ();

Cette fonction peut être ajouté dans le onLoad <action> existantes, mais crée simplement un objet d'une nouvelle URL, définit l'attribut d'emplacement de la source de l'aliment, puis récupère les informations comme l'emplacement spécifié. À ce stade, vous devriez avoir quelque chose qui ressemble un peu à ceci:

La fonction des œuvres, il attrape le fichier situé à l'URL cible, mais malheureusement, cela arrive à être dans un format XML! Cela signifie que nos textarea est en train d'afficher l'intégralité du fichier XML! Une autre fonction, à parcourir le document XML et sortez juste les gros titres, va être nécessaire. Heureusement, le moteur de widgets XPath 1.0 fournit un appui pour prendre extraire les éléments nécessaires relativement facile.

Il ya plusieurs étapes à suivre pour obtenir les données que nous voulons et, si vous regardez le document XML obtenu par la commande url.fetch, vous verrez que les titres de nouvelles, nous voulons saisir apparaître dans un élément appelé titre, qui est un enfant de l'élément item, qui est un enfant de l'élément de chaîne, ce qui finalement, est un enfant de l'élément rss. Par conséquent, l'élément dont nous avons besoin est un arrière petit-enfant de l'élément racine. Retirez le setData () comme on peut étendre la getData () pour afficher les manchettes une fois qu'elles ont été extraites.

Widget Walkthrough - Utilisation des boucles

La référence du widget manuel indique que vous devez utiliser une instruction try catch boucle pour exécuter des fonctions XPath, vous pouvez donc ajouter une à votre getData () la fonction. Vous devez d'abord obtenir le document XML et le placer dans une variable en utilisant la méthode parse:

try (
doc = XMLDOM.parse (feeddata);

Ensuite, vous avez besoin de spécifier quels éléments dans le fichier XML que vous souhaitez match. Ceci est l'élément XPath de votre fonction:

titlelist = doc.evaluate ( "rss / / channel article / title");
datatextarea.data = "";

Vous devez maintenant créer un tableau pour stocker les gros titres comme des objets distincts DOMElement:

titres = new Array ();

Dans ce rss fichier particulier, il ya toujours 19 titres, cependant, si vous utilisez une alimentation différente, vous mai ne pas savoir le nombre de titres à l'avance si c'est une bonne idée d'utiliser une boucle qui fonctionne sur la durée de votre tableau:

for (n = 0; n <titlelist.length; n + +) (

Le DOMNodeList retournée par la fonction XPath a une propriété intégrée du point () qui peut être utilisé pour spécifier quel DOMElement dans la liste vous faites référence. In this case, we can match the number of the array item with the item we want to store in the array:

titres [n] = titlelist.item (n);

Enfin, chaque itération de la boucle, vous pouvez définir la propriété de données de la <textarea> aux données détenues dans l'élément de tableau. L'ordre du jour ont effectivement eu lieu dans le tableau est un DOMElement; pour obtenir le texte même qui s'est tenue à l'objet dont vous avez besoin pour répondre aux firstChild de l'élément. La nouvelle ligne de caractère JavaScript est également spécifié (deux fois) pour briser les gros titres:

datatextarea.data + = titres [n]. firstChild.data + "nn";
)
)
catch (e) (
print (e);
)

Widget Walkthrough - Parfaire la récupération global

Si vous enregistrez les modifications et recharger le fichier maintenant, les titres devraient apparaître comme par magie! Utilisation de la <textarea> est bonne parce qu'elle rend la configuration des préférences facile et gère le mot enveloppe bien. Un défaut majeur de cette cependant est qu'il n'est pas possible de définir l'URL de chaque titre individuel. Pour compenser cela, vous pouvez ajouter un droit-menu cliquez pour le widget qui vous amène à l'une des pages les principales nouvelles avant, ou à une page contenant la liste des titres s'affiche. Pour ce faire, vous pouvez ajouter le bloc de code suivant à l'élément <textarea>:

<contextMenuItems>
title="Open <menuItem BBC Technology News">
<onSelect> openURL
( "Http://news.bbc.co.uk/1/hi/technology/default.stm ");</ onSelect>
</ MenuItem>
<menuItem title="Open la une des journaux réels page">
<onSelect> openURL
(http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/technology/rss.xml);
</ onSelect>
</ menuitem>
</ contextMenuItems>

C'est du moins vous fournit une manière de lire les nouvelles histoires intégral. Une autre chose que vous devez tenir compte est une façon de mettre à jour le fichier utilisé comme source des données: si l'ordinateur et de widget sont laissé en marche, le lecteur sera juste afficher les mêmes données, pour toujours. Un élément minuterie peut être utilisée pour spécifier que l'action pourrait être menée à plusieurs reprises sur un intervalle défini:

<timer>
<intervalle> 10 </ interval>
<onTimerFired> getdata ();</ onTimerFired>
</ timer>

L'intervalle est mesuré en secondes, mais ce genre de gadget ne serait pas vraiment besoin de prendre un nouveau fichier RSS toutes les dix secondes. Selon la fréquence des mises à jour à la source, vous pourriez probablement défini pour mettre à jour peut-être plusieurs fois par jour.

Widget Walkthrough - Publication de votre widget

Afin d'obtenir votre widget publié sur Yahoo! Widget Gallery, vous devez désactiver le débogage et emballer votre widget. Tout en haut du fichier, vous trouverez l'élément <debug>; désactiver ce paramètre. To package the application and produce the flat, one-file version of the existing files and folder structure, you'll need to get to grips with the command line interface (CLI) included in the SDK. Le convertisseur se trouve (sur un système Windows XP) à l'emplacement suivant:

C: Program FilesYahoo! Yahoo! Widget Engine

Vous devez créer un répertoire de sortie à cette étape afin de créer un dossier, également à l'endroit susmentionné, appelé dispositif d'alimentation ou quelque chose de similaire. Maintenant, ouvrez une invite de commande. Il sera probablement ouverte (sur un système Windows XP) dans votre dossier Mes documents vous aurez donc besoin d'utiliser le répertoire (cd changer) commande pour naviguer jusqu'à l'emplacement de la CLI. Vous devez également déplacer votre dossier de widget dans le même répertoire que le CLI et le répertoire de sortie. Une fois ceci fait, utilisez la commande suivante pour emballer votre création:

converter_4a convert -v -flat TechFeeder.widget -o outputDirName

Vous devriez alors se retrouver avec un paquet plat contenant tous les fichiers qui composent le widget dans le dossier de sortie. Votre widget devrait maintenant être prêt à aller sur la galerie, mais ne pas les soumettre à celui-ci (parce que j'ai déjà).

Le slogan affiché sur la page d'accueil de la galerie de widgets est «L'herbe est plus verte des deux côtés" qui rend hommage à la compatibilité inter-plateformes des widgets. Lors de la création de widgets, vous devez vous assurer que vous testiez vos widgets sur un Mac et qu'il fonctionne aussi bien sur les plateformes Mac et Windows. J'ai testé ce widget sur Mac, et malheureusement, il ne fonctionne pas aussi bien qu'il le fait sur les systèmes Windows, en revanche, il ne fait qu'afficher le titre premier. I don't actually know why this is, but I am investigating. Dans l'intervalle, toutefois, j'ai spécifié sur la galerie que c'est Windows uniquement. Aussi, l'outil Optimiseur de Widget est supposé être utilisé pour éliminer les fourches mémoire inutiles sur les widgets créés sur le Mac, mais comme l'outil de conversion, il n'est pas actuellement disponible, donc pour le moment, ceux d'entre vous sur les Macs je suppose aura de renoncer à ce moment.

Il ya beaucoup plus de ce qu'on pouvait faire pour affiner le widget. A ce stade, il est vraiment juste une version 1.0. Vous pouvez ajouter une fonction qui fait défiler automatiquement la une des journaux peut-être, ou de créer les titres comme des éléments de texte individuels, chacun avec leurs biens propre URL afin de les rendre les liens cliquables pour chacune des histoires nouvelles, ou même inclure la description d'un élément de titre qui affiche lorsque la souris passe sur chaque élément de texte, les possibilités sont infinies. Mais ce que vous avez maintenant est très basique, mais widget entièrement fonctionnel, produit avec facilité et en peu de temps du tout. C'est la beauté de Yahoo! Widget Engine, la rapidité et la facilité de déploiement et pleinement fonctionnel d'information de gestion à droite de votre écran.

• 0 Commentaires

Un îlot de données XML est un morceau de code XML bien formé intégré dans un fichier HTML. This article will show you how to retrieve data in an XML format from a database using ADO; you will also learn how to bind this data into an HTML document. Introduction

The previous tutorial, The Why and How of XML Data Islands , considered embedding a well formed XML fragment into an HTML file to create an XML data island. The article also showed how one could access data embedded in the XML file. The tutorial also described data binding to various HTML tags. However the XML data used was a hard-coded XML fragment.

In this tutorial, how data in XML format can be retrieved from a database using ADO will be described. The XML data obtained using ADO will be reviewed. An example of how Jet Data types are associated with XML data types will be shown. This will be followed by how to use the data to bind it to an HTML document. After all, this is what the client is after. It will be helpful if the reader reviews the previous article and the XML related articles to which you can find links on this site .

Data to XML Conversion using ADO

Persisting data in the XML format is one of the most important features of ADO since the 2.5 version. This means that ADO recordsets can be saved as an XML file to a location of your choice. Alternatively they can also be saved to a Stream object. Since the data is derived from a database together with the data, the data structure comes with it. Ideally this format should be able to be transparently used by any machine.

Displaying ADO Retrieved Data with XML Islands – Extracting XML formatted data example

Using the save() method of ADO, you could save the recordset to a file as shown in the next paragraph. The recordset is created by accessing an MDB file on the hard drive. Not all the columns in the ' Employees ' table in the Northwind database will be saved as an XML file. The variable fileName points to the location on the hard drive where the XML file will be saved.

Create UI to test code

On a form in your MS Access application add a button, and to the click event of this button add the following code. The statement

rs.save fileName, adPersistXML >

can also be saved as

rs.save fileName2, adPersistADTG

where fileName2 will have an .adtg extension. This is yet another proprietary format called the Advanced Data TableGram format. We will only look at the persisted XML formatted file.

 Private Sub Command0_Click() 

 Dim rs As New ADODB.Recordset 

 fileName = "C:NwindEmployees.xml" 

 rs.Open "Select * from Employees where LastName='Peacock'", _ 

 "Provider=Microsoft.Jet.OLEDB.4.0;" & _ 

 "Data Source=C:Documents and SettingsJayMy DocumentsRetrieve.mdb;" & _ 

 "Persist Security Info=False", adOpenKeyset, adLockOptimistic, 

 adCmdText 

 If Dir$(fileName) <> "" Then Kill fileName 

 rs.Save fileName, adPersistXML 

  End Sub 

In the above code the recordset for the indicated SQL statement will be saved.

Displaying ADO Retrieved Data with XML Islands – The Saved XML file

If you open the file C:NwindEmployees.xml in a text editor you can see the full details.

 <xml xmlns:s='uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882' 

        xmlns:dt='uuid:C2F41010-65B3-11d1-A29F-00AA00C14882' 

        xmlns:rs='urn:schemas-microsoft-com:rowset' 

        xmlns:z='#RowsetSchema'> 

 <s:Schema id='RowsetSchema'> 

        <s:ElementType name='row' content='eltOnly' rs:updatable='true'> 

               <s:AttributeType name='Address' rs:number='8'rs:nullable='true' rs:maydefer='true' rs:write='true'rs:basetable='Employees' 

                        rs:basecolumn='Address'> 

                       <s:datatype dt:type='string' dt:maxLength='60'/> 

  </ s: AttributeType> 

               <s:AttributeType name='BirthDate' rs:number='6'rs:nullable='true' rs:maydefer='true' rs:write='true'rs:basetable='Employees' 

                        rs:basecolumn='BirthDate'> 

  <s:datatype dt:type='DateTime'rs:dbtype='variantdate' dt:maxLength='16' rs:fixedlength='true'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs City': number = '9 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'City'> 

                       <s:datatype dt:type='string' dt:maxLength='15'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'RS Pays': number = '12 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'Pays'> 

                       <s:datatype dt:type='string' dt:maxLength='15'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs EmployeeID': number = '1 'rs: maydefer =' RS 'true: writeunknown =' true 'rs: basetable = «Employés» 

  RS: basecolumn = 'EmployeeID'rs: autoincrémentation =' true '> 

  <s:datatype dt:type='int' dt:maxLength='4'rs:precision='10' rs:fixedlength='true'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs Extension': numéro = '14 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'Extension'> 

  <s:datatype dt:type='string' dt:maxLength='4'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs FirstName': number = '3 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'FirstName'> 

  <s:datatype dt:type='string' dt:maxLength='10'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs HireDate': number = '7 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'HireDate'> 

  <s:datatype dt:type='dateTime'rs:dbtype='variantdate' dt:maxLength='16' rs:fixedlength='true'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs HomePhone': number = '13 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'HomePhone'> 

  <s:datatype dt:type='string' dt:maxLength='24'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs LastName': numéro = '2 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'LastName'> 

  <s:datatype dt:type='string' dt:maxLength='20'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs Notes »: numéro = '16' rs: nullable = 'true' rs: maydefer = 'RS' true: write = 'true'rs: basetable =« Employés » 

  RS: basecolumn = 'Notes'> 

  <s:datatype dt:type='string'dt:maxLength='536870910' rs:long='true'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs Photo': numéro = '15 'rs: nullable =' true 'rs: maydefer =' RS 'true: write =' true'rs: basetable = «Employés» 

  RS: basecolumn = 'Photo'> 

  <s:datatype dt:type='string' dt:maxLength='255'/> 

  </ s: AttributeType> 

               <s:AttributeType name='PostalCode' rs:number='11'rs:nullable='true' rs:maydefer='true' rs:write='true'rs:basetable='Employees' 

                        rs:basecolumn='PostalCode'> 

  <s:datatype dt:type='string' dt:maxLength='10'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Region' rs:number='10'rs:nullable='true' rs:maydefer='true' rs:write='true'rs:basetable='Employees' 

                        rs:basecolumn='Region'> 

                       <s:datatype dt:type='string' dt:maxLength='15'/> 

  </ s: AttributeType> 

               <s:AttributeType name='ReportsTo' rs:number='17'rs:nullable='true' rs:maydefer='true' rs:write='true'rs:basetable='Employees' 

                        rs:basecolumn='ReportsTo'> 

  <s:datatype dt:type='int' dt:maxLength='4'rs:precision='10' rs:fixedlength='true'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Title' rs:number='4'rs:nullable='true' rs:maydefer='true' rs:write='true'rs:basetable='Employees' 

                        rs:basecolumn='Title'> 

                       <s:datatype dt:type='string' dt:maxLength='30'/> 

  </ s: AttributeType> 

               <s:AttributeType name='TitleOfCourtesy'rs:number='5' rs:nullable='true' rs:maydefer='true' rs:write='true' 

                        rs:basetable='Employees'rs:basecolumn='TitleOfCourtesy'> 

                       <s:datatype dt:type='string' dt:maxLength='25'/> 

  </ s: AttributeType> 

               <s:extends type='rs:rowbase'/> 

        </s:ElementType> 

 </s:Schema> 

 <rs:data> 

        <z:row Address='4110 Old Redmond Rd.'BirthDate='1958-09-19T00:00:00' City='Redmond' Country='USA'EmployeeID='4' 

                Extension='5176' FirstName='Margaret'HireDate='1993-05-03T00:00:00' HomePhone='(206) 555-8122'LastName='Peacock' 

                Notes='Margaret holds a BA in English literature fromConcordia College and an MA from the American Institute of Culinary Arts.She was temporarily assigned to the London office before returning to her

permanent post in Seattle.' 

                Photo='EmpID4.bmp' PostalCode='98052' Region='WA'ReportsTo='2' Title='Sales Representative' TitleOfCourtesy='Mrs.'/> 

 </rs:data> 

 </xml> 

Displaying ADO Retrieved Data with XML Islands – Reviewing the saved file

Although the file is large, it consists basically of two parts, as shown in the browser display of this file after collapsing all the details. As seen in the next picture, the file's two parts are the 'Schema' and the 'Data' represented by their prefixes, ' s: ' and ' rs: ' as shown in the namespaces — the first four lines in the document which have the prefix xmlns.

The schema section

The next picture shows just one element from the expanded ' s ' node in the displayed XML file in the browser. You can also see that it is updatable . This particular slice corresponds to the ' Address ' field of the Employees table shown in the first picture. The fields are listed alphabetically in the persisted file. The other elements also show the various attributes of the Address field. In the original table, the Address field's Data type is text and field size is 60 . The XML attribute with the prefix 'dt' which marks the beginning of each row shows this information. The 'text' has become 'string' and the field size has become 'maxlength.' The schema information therefore is an accurate representation of the data structure.

The Data Section

The next section shows the only row of data taken from the data section. The prefix 'z' marks the beginning of the data. The XML file has only one row of the table returned corresponding to the LastName='Peacock. '

Displaying ADO Retrieved Data with XML Islands – Data types in Access 2003 and XML file

In MS Access there are several data types that are typical to its Jet Library. In order to look at how the data goes over into XML, a table, called ' Whimsical ' was contrived which has all the data types but contains only a single row of data. This was opened just like the previous table and the saved file was examined. In the next picture you see the table and in the one that follows, you see the 'schema' section. The data types, 'bitmap', and 'hyperlink' can take up a large amount of space. This one row of data saved to file takes up as much as 0.5 MB.

This is the 'Schema' section of the above file. Review each of the data types and you'll see the corresponding dt:type in the XML file.

Displaying ADO Retrieved Data with XML Islands – Displaying retrieved XML in an HTML document

Creating an XML Data Island

From the previous tutorial we know that we need to embed the XML in an XML document to produce the XML Data Island . The ADO's save() method does not produce a data island. This can be built in two steps. First of all, to associate the 'Data' contained in the XML to the bondable tags of the HTML, we need a basis of association. This is given by the following XML block with the id='test.'

 <XML id="test"> 

  </ XML> 

In the second step, you will notice that XML is already the first tag in the saved file. Since you cannot have two XML tags, you modify the saved file by prefixing ado to xml and changing it to adoxml as shown. This will be embedded in the previous block and the resulting XML is the XML Data Island.

 < adoxml xmlns:s='uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882' 

        xmlns:dt='uuid:C2F41010-65B3-11d1-A29F-00AA00C14882' 

        xmlns:rs='urn:schemas-microsoft-com:rowset' 

        xmlns:z='#RowsetSchema'> 

 <s:Schema id='RowsetSchema'> 

        <s:ElementType name='row' content='eltOnly' rs:updatable='true'> 

               <s:AttributeType name='Address' rs:number='8'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

                        rs:basecolumn='Address'> 

                       <s:datatype dt:type='string' dt:maxLength='60'/> 

  </ s: AttributeType> 

               <s:AttributeType name='BirthDate' rs:number='6'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

                        rs:basecolumn='BirthDate'> 

  <s:datatype dt:type='dateTime'rs:dbtype='variantdate' dt:maxLength='16' rs:fixedlength='true'/> 

  </ s: AttributeType> 

               <s:AttributeType name='City' rs:number='9'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'City'> 

                       <s:datatype dt:type='string' dt:maxLength='15'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Country' rs:number='12'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'Pays'> 

                       <s:datatype dt:type='string' dt:maxLength='15'/> 

  </ s: AttributeType> 

  <s: nom d'attribut = 'rs EmployeeID': number = '1 'rs: maydefer =' RS 'true: writeunknown =' true 'rs: basetable = «Employés» 

  RS: basecolumn = 'EmployeeID'rs: autoincrémentation =' true '> 

  <s:datatype dt:type='int' dt:maxLength='4'rs:precision='10' rs:fixedlength='true'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Extension' rs:number='14'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'Extension'> 

  <s:datatype dt:type='string' dt:maxLength='4'/> 

  </ s: AttributeType> 

               <s:AttributeType name='FirstName' rs:number='3'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'FirstName'> 

  <s:datatype dt:type='string' dt:maxLength='10'/> 

  </ s: AttributeType> 

               <s:AttributeType name='HireDate' rs:number='7'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'HireDate'> 

  <s:datatype dt:type='dateTime'rs:dbtype='variantdate' dt:maxLength='16' rs:fixedlength='true'/> 

  </ s: AttributeType> 

               <s:AttributeType name='HomePhone' rs:number='13'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'HomePhone'> 

  <s:datatype dt:type='string' dt:maxLength='24'/> 

  </ s: AttributeType> 

               <s:AttributeType name='LastName' rs:number='2'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'LastName'> 

  <s:datatype dt:type='string' dt:maxLength='20'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Notes' rs:number='16'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'Notes'> 

  <s:datatype dt:type='string'dt:maxLength='536870910' rs:long='true'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Photo' rs:number='15'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

  RS: basecolumn = 'Photo'> 

  <s:datatype dt:type='string' dt:maxLength='255'/> 

  </ s: AttributeType> 

               <s:AttributeType name='PostalCode' rs:number='11'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

                        rs:basecolumn='PostalCode'> 

  <s:datatype dt:type='string' dt:maxLength='10'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Region' rs:number='10'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

                        rs:basecolumn='Region'> 

                       <s:datatype dt:type='string' dt:maxLength='15'/> 

  </ s: AttributeType> 

               <s:AttributeType name='ReportsTo' rs:number='17'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

                        rs:basecolumn='ReportsTo'> 

  <s:datatype dt:type='int' dt:maxLength='4'rs:precision='10' rs:fixedlength='true'/> 

  </ s: AttributeType> 

               <s:AttributeType name='Title' rs:number='4'rs:nullable='true' rs:maydefer='true' rs:write='true'

rs:basetable='Employees' 

                        rs:basecolumn='Title'> 

                       <s:datatype dt:type='string' dt:maxLength='30'/> 

  </ s: AttributeType> 

               <s:AttributeType name='TitleOfCourtesy' rs:number='5'rs:nullable='true' rs:maydefer='true' rs:write='true' 

                        rs:basetable='Employees'rs:basecolumn='TitleOfCourtesy'> 

                       <s:datatype dt:type='string' dt:maxLength='25'/> 

  </ s: AttributeType> 

               <s:extends type='rs:rowbase'/> 

        </s:ElementType> 

 </s:Schema> 

 <rs:data> 

        <z:row Address='4110 Old Redmond Rd.'BirthDate='1958-09-19T00:00:00' City='Redmond' Country='USA'

EmployeeID='4' 

                Extension='5176' FirstName='Margaret'HireDate='1993-05-03T00:00:00' HomePhone='(206) 555-8122'

LastName='Peacock' 

                Notes='Margaret holds a BA in English literature fromConcordia College and an MA from the American Institute of Culinary Arts.

She was temporarily assigned to the London office before returning to her

permanent post in Seattle.' 

                Photo='EmpID4.bmp' PostalCode='98052' Region='WA'ReportsTo='2' Title='Sales Representative' TitleOfCourtesy='Mrs.'/> 

 </rs:data> 

 </ adoxml > 

Displaying ADO Retrieved Data with XML Islands – Creating an HTML document which can display the XML Data

AdoIsland.html

In the code shown next, insert the XML data island created in the previous section and save it as AdoIsland.htm . Make sure the DATASRC attribute of the table corresponds to the ID field of the XML Data Island. The DATAFIELD attribute refers respectively to the data fields in the XML data island.

 <html><head><title></title></head> 

  <body> 

 <table DATASRC=" #Test "> 

  <tr> 

 <tr><td> 

 <table DATAsrc="#Test" DATAFLD="rs:data" border="1" 

 bgcolor="yellow"> 

 <tr><td> 

 <table DATAsrc="#Test" DATAFLD="z:row" > 

  <tr> 

 <td><span DATAFLD ="EmployeeID"></span</td> 

 <td><span DATAFLD ="FirstName"></span</td> 

 <td><span DATAFLD ="LastName"></span</td> 

  </ tr> 

  </ table> 

 </td></tr> 

  </ table> 

 </td></tr> 

  </ table> 

 <!--Here plug in the XML Data Island --> 

  </ body> 

  </ html> 

Displaying the XML Data retrieved on the IE

Now if you browse the AdoIsland.htm file the display should appear as follows. If you refer to the table above, you can see that although all fields are in the XML Data Island, only three of them are called while displaying.

Displaying the image saved as an embedded BMP file

From the XML file you could retrieve the field for the 'Photo' and display the image on the browser. For this, you need to add another cell to the table and insert the following for the cell.

 <td><img src=""  DATAFLD="Photo"></td> 

With the above table cell added to the table, the display now appears as shown here. For this to display correctly you should have the corresponding BMP file at the same location as the AdoIsland.htm file.

Sommaire

This tutorial extends the previous tutorial to show how to access data and display it using the ADO's save() method. An example to display the persisted data using the XML Data Island was described. More importantly, the data types in MS Access as they relate to data types in the persisted XML file were shown in detail. Similar ideas will help in accessing data from a web server with Active Server Pages as well.

• 0 Commentaires

Widget Walkthrough

A widget should be created to fill a need; it should actually do something useful. What I decided on in the end was a news reader. Every day, when I turn on my computer, one of the first things I do is to go to the BBC news website and check out the technology section headlines. I decided that my news reader would take the RSS feed supplied by the BBC and list the daily technology headlines. Thus the idea for TechFeeder was born.

The very first thing that I did was draw the main element of my widget in Photoshop (any decent graphic tool will do, but you won't be able to use the Photoshop script if you use a different application). I won't go into extreme detail over exactly what I did, but the tutorial I followed advised that aqua style icons are made using a layered mixture of shading, opacity and lighting effects. There are plenty of guides out there on aquifying pictures so if you've never created one before, I'd recommend searching for one and practicing a bit before the main event.

It took a couple of attempts before I had something that looked like I wanted it to, but soon enough I had the basic appearance that I had envisioned and settled with it. I think you'll agree that while it isn't perfect and has obvious flaws, it works reasonably well. Perhaps I'll improve it for release 1.1 of my widget! While you have Photoshop open, you may as well create the image that you'll use for the about-box for your widget. The about box should match the style of your widget if possible and list things such as the version number, author details and anything else you feel is appropriate. You can create the whole thing in Photoshop or just the background and use XML to add the text. It's up to you, but in order to demonstrate some of the about-box capabilities, I just created the background in my image editor.

When you run the widget creation.jsx file, you'll be asked to submit your name, the widget version and choose a location for the widget directory to be created. Once it has finished, you'll need to go into the contents folder and open the .kon file in a text editor.

You should be presented with some code that looks very similar to this:

<?xml version=”1.0″ encoding=”UTF-8″?>
<widget version=”1.0″ minimumVersion=”2.0″ author=”Dan Wellman”>
<debug>on</debug>
<window title=”TechFeeder”>
<name>mainWindow</name>
<width>206</width>
<height>141</height>
<visible>1</visible>
<shadow>0</shadow>
</window>
<image src=”Resources/Shape 1.png”>
<name>Shape_1</name>
<hOffset>0</hOffset>
<vOffset>5</vOffset>
<width>206</width>
<height>136</height>
<opacity>70%</opacity>
</image>

This should make sense at first glance to anyone who's worked with XML before. The XML declaration comes first, followed by the <widget> tag which is the container into which all other tags must be placed. Next is the <window> tag, which in this case specifies the main window. Notice that the image that makes up the main background of the widget is specified in its own <image> block, separate from (not nested within) the window element. To make the widget semi-transparent, as many are, I've lowered the opacity of the image. I have used a percentage here, but you could also use an integer from 0 to 255 to specify the opacity.

Introduction to Widgets – Adding Your Own Code

Now you need to start adding code yourself. What I focused on first was the about-box, which is an element used solely to display a little window listing the program version, the creator, and anything else as a programmer that you want or need to display. As I'm using content from the BBC site, I felt it necessary to include their copyright information:

<about-box>
<image>Resources/about-backg.png</image>

<about-version>
<font>Arial</font>
<size>12</size>
<style>bold</style>
<hOffset>90</hOffset>
<vOffset>45</vOffset>
<color>#ffffff</color>
</about-version>
<about-text>
<data>BBC TechFeeder</data>
<font>Arial</font>
<size>18</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>30</vOffset>
</about-text>

<about-text>
<data>Copyright:(C)</data>
<font>Arial</font>
<size>12</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>90</vOffset>
</about-text>
<about-text>
<data>British Broadcasting Corporation</data>
<font>Arial</font>
<size>10</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>105</vOffset>
</about-text>
<about-text>
<data>Click here for terms and conditions</data>
<url>http://news.bbc.co.uk/1/hi/help/rss/4498287.stm</url>
<font>Arial</font>
<size>10</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>120</vOffset>
</about-text>
<about-text>
<data>of reuse.</data>
<font>Arial</font>
<size>10</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>130</vOffset>
</about-text>

<about-text>
<data>By Dan Wellman</data>
<font>Arial</font>
<size>14</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>185</vOffset>
</about-text>
<about-text>
<data>2006</data>
<font>Arial</font>
<size>12</size>
<style>bold</style>
<color>#ffffff</color>
<hOffset>90</hOffset>
<vOffset>200</vOffset>
</about-text>
</about-box>

It's a whopping amount of code for one small window, most of which is graphic, but it's easy code and should make absolute sense at a glance. The about-version code actually pulls the version number from the main kon file at run time. The reason it's so large is that at present, text in the about-box doesn't wrap and is simply cut off at the end of the window. This is why there are so many <about-text> blocks; each line is its own separate object. The <about-version> and <about-text> blocks are listed separately, much like the <image> element above. Note that the about box must feature an image in order to function and that the bit of the text that is a hyperlink must have the <url> attribute set in the relevant code block. Once complete, the about box will appear like this:

Introduction to Widgets – Displaying Data

The application will be getting information from a news feed and it is going to need to display the information somewhere in order to carry out its function. I've created a text area to display the data for its multi-line facility, and I've enclosed it in a frame element primarily because of the automatic scrollbar capabilities that this element features:

<frame name=”dataframe”>
<textarea name=”datatextarea”>
<data>Loading…</data>
<font>Arial</font>
<editable>false</editable>
<color>#000000</color>
<size>12</size>
<style>bold</style>
<height>80</height>
<width>150</width>
<voffset>35</voffset>
<hoffset>30</hoffset>
<bgcolor>#cccccc</bgcolor>
<bgopacity>0</bgopacity>
</textarea>
</frame>

If you set the data element to hold the text “Loading…” this is what will be displayed when the widget first appears on screen. This is important because it takes a few seconds before the data is pulled through and parsed from the RSS feed. You'll see in one of the functions later on that the data property of the text area is loaded after the source file has been obtained.

It's great that the scroll bar handles, track and face are all drawn for you with absolutely no additional coding when using a frame element. You can also specify a frame element that will override this automaton and can be controlled via script. Doing this is a bit beyond the scope of this article, but such an element could be used as part of a function that automatically scrolls the text displayed in the text area.

Introduction to Widgets – Setting the Preferences

Next, I tackled the preferences. The widget engine will draw the preferences box for you and include the common options such as locking the widget's position and setting the opacity. All you have to do is specify any additional options, and write the JavaScript to make them work:

<preference>
<name>textfontpref</name>
<defaultValue>Arial</defaultValue>
<title>Text Font:</title>
<type>font</type>
<description>Select a font for the news text.</description>
</preference>

<preference>
<name>textcolorpref</name>
<defaultvalue>#000000</defaultvalue>
<title>Text Color:</title>
<type>color</type>
<defaultValue>#000000</defaultValue>
<description>Select a colour for the news text.</description>
</preference>
<preference>
<name>textsizepref</name>
<defaultvalue>12</defaultvalue>
<title>Text Size:</title>
<type>popup</type>
<option>8</option>
<option>10</option>
<option>12</option>
<option>14</option>
<description>Select a font size for the news text.</description>
</preference>

<preference>
<name>textstylepref</name>
<defaultvalue>Bold</defaultvalue>
<title>Text Color:</title>
<type>popup</type>
<option>Bold</option>
<option>Italic</option>
<option>Narrow</option>
<option>Expanded</option>
<option>Condensed</option>
<option>Smallcap</option>
<option>Poster</option>
<option>Compressed</option>
<option>Fixed</option>
<option>No Style</option>
<description>Select a text style for the news text (it will only be applied if
supported by the font).</description>
</preference>

Widgets should be as customizable as possible; therefore, I've given the user control over everything that isn't an image, which in this case is just the text from the BBC news feed. Each property you are able to change has its own segment of code. The <type> attributes of the first two preferences are used by the engine to automatically create a font chooser that previews all of your installed fonts, and a color picker, as seen in other applications.

In part two of this article I'll show you how to wire up these preferences with a little bit of script to actually make them work. We'll also work on the main script that makes the whole thing tick, and look at packaging and preparing the widget for upload to the online gallery.

--

By Dan Wellman

• 0 Commentaires

The twin tasks of the XMLHttp are handling the HTTP request, and then processing the XML response. The first one is easily done by writing the appropriate syntax for creating this object. This is what is accomplished in AJAX by invoking the new constructor for XMLHTTP object. This is but one of the objects of the XMLDOM -XML D ocument O bject M odel. In this article, we look at XMLDOM in some detail before calling the XML document in an AJAX rendition in a future article.

A quick look at XMLDOM

The DOM of HTML and XMLDOM share some common traits. The basic precept that documents are hierarchically structured with nodes and nested nodes is common to both of them. The DOM object model as seen in W3C documentation is described in full here .

XMLDOM can be understood through two types of metaphors, a tree representation and a family representation. In the tree representation, the tree has nodes. Nodes can have other nodes growing out of them, or a node can stand by itself without any other nodes sprouting from it. In the family metaphor you have parents, children, siblings, and so on.

Accessing XML via XMLDOM is facilitated by ActiveX. All that is needed is to create a new ActiveXObject, via the call:

var xml_doc=new ActiveXObject (”Microsoft.XMLDOM”);

Once this is created, an XML document from a given location can be loaded. Then we can look at the various properties of this object as detailed in the XMLDOM. The following listing gives a brief description of the XMLDOM objects that are well suited for client side scripting.

In XMLDOM as well as HTML's DOM the following interfaces are used for accessing. In the present tutorial we will only look at a subset of the properties and methods of the highlighted objects.

• Attr
• CharacterData
• Commentaire
• DocumentFragment
• Document
• DOMException
• DOMImplementation
• Element
• Node
• NodeList
• NamedNodeMap
• Texte

Document

Document is the root of the XML document.

Element The element object represents the Document's various elements, such as root and other elements.

Node “Node” is a single node in the document tree representation. This has support for data types, namespaces, DTDs and XML Schemas.

Attribute “Attribute” represents the single attribute node of an element.

Text “Text” represents the text of an element or attribute.

Roaming through XMLDOM: An AJAX Prerequisite – Getting at the Innards of an XML Document

We will briefly look at some of the XML Dom objects. In order to show how the code accesses the various parts of a document, consider the following well formed XML document WebClass.xml which is located on my hard drive at:

C:/Documents and settings/computer user/Desktop/todo/Ajax/WebClass.xml .

XML document probed

 <?xml version="1.0" encoding="ISO-8859-1" ?><wclass>

<!-- My students who attended my web programming class -->

<student id="1">

<name>Linda Jones</name>

<legacySkill>Access, VB5.0</legacySkill>

</student>

<student id="2">

<name>Adam Davidson</name>

<legacySkill>Cobol, MainFrame</legacySkill>

</student>

<student id="3">

<name>Charles Boyer</name>

<legacySkill>HTML, Photoshop</legacySkill>

</student>

<student id="4">

<name>Charles Mann</name>

<legacySkill>Cobol, MainFrame</legacySkill>

</student>

</wclass> 

Slicing the XML document

First things first: we need to instantiate an XMLDocument object. This is done easily by running the following code as shown:

 <SCRIPT LANGUAGE="JavaScript">var xml_doc = new ActiveXObject("Microsoft.XMLDOM");

xml_doc.async = false;

xml_doc.load ("C:/Documents and settings/computer user/Desktop/todo/Ajax/WebClass.xml");

</SCRIPT> 

After this step we will look at a number of properities that can be accessed using code.

First Child and Last Child Properties

These properties can be accessed if you insert the following lines after loading the document as shown above but before </Script>,

 document.write ("This documents first child is a " +xml_doc.documentElement.firstChild.nodeName);

document.write("<br>");

document.write ("This document's  last child= " +

xml_doc.documentElement.lastChild.nodeName); 

and if you display it in a browser you would see the following:

 This documents first child is a #comment This document's last child= student 

Roaming through XMLDOM: An AJAX Prerequisite – Continuing the Dissection
Document Element Properties

The Document element has a child nodes collection you can access by iterating through the index. You can also access the attributes, which consist of a name and a value as shown here. The following code should be inserted after creating the XMLDOC object.

 document.write("<br>"+xdoc.documentElement.childNodes.item(0).text +"<br>");document.write("<br>"+xdoc.documentElement.childNodes.item(1).

attributes[0].name +"<br>");

document.write("<br>"+xdoc.documentElement.childNodes.item(1).

attributes[0].value +"<br>"); 

When the above snippet is run you would see the following.

 My students who took web programming class with meid

 1 

Nodes Collection

In the document we are looking at, we have a number of student nodes. We can get a reference to the student nodes using the getElementsByTagName method. From this we can find the number of such student nodes. Once we know how many there are ( nodes.length ), we can iterate through the collection and find the individuals as shown in the following code.

 var nodes=xdoc.getElementsByTagName("student");document.write("<br>Number of student nodes is "+nodes.length+"<br>");

for (i=0; i< nodes.length; i++)

{document.write("<br>"+nodes.item(i).text+"<br>");} 

If you were to include the code in the script after instantiating the xdoc object you would see the following:

 Number of student nodes is 4Linda Jones Access, VB5.0

Adam Davidson Cobol, MainFrame

Charles Boyer HTML, Photoshop

Charles Mann Cobol, MainFrame 

Node's name, type and value

Once you locate an element's child node through its collection, as in the declaration of Elem in the next snippet, you could determine its name, type and value by calling respectively the nodeName , nodeType and nodeValue properties as shown.

 var Elem=xdoc.documentElement.childNodes.item(2);document.write("<br>"+Elem.nodeName+"<br>");

document.write("<br>"+Elem.nodeType+"<br>");

document.write("<br>"+Elem.nodeValue+"<br>"); 

We have located the second child and its properties by running the above script as shown.

 student1

 null 

Family metaphor related items

As mentioned earlier, in addition to the tree representation (tree metaphor) there is also the family representation (somewhat seniority based). These are usually parent, sibling, previous sibling, next sibling, and so on. The next few lines of code will give you an idea how we may access them. We will be starting with the second student whose id=2.

 //second student is referenced.var midElem = xdoc.documentElement.childNodes.item(2);

document.write("<br>"+midElem.attributes[0].value+"<br>");

document.write("<br>"+midElem. previousSibling .text+"<br>");

document.write("<br>"+midElem. nextSibling .text+"<br>");

document.write("<br>"+midElem. parentNode .nodeName+"<br>");

document.write("<br>"+midElem.parentNode.nodeType+"<br>");

document.write("<br>"+midElem.parentNode.nodeValue+"<br>"); 

When the above code is inserted after instantiating xdoc as described previously, you would see the following displayed.

 2Linda Jones Access, VB5.0

Charles Boyer HTML, Photoshop

wclass

 1

 null 

Roaming through XMLDOM: An AJAX Prerequisite – Manipulating the XML Document
(Page 4 of 4 )

The XMLDOC object also has a large number of methods that can be invoked to create, modify, and delete nodes. The document object represents the XML file in its entirety and is also a node in the DOM. It has a large number of properties and many methods. For complete documentation the reader is referred to the W3C site. In addition to W3C there are also Microsoft extensions.

Adding a new student to the web class

Being a node, XMLDOC shares the properties of the nodes as well. A complete usage of the methods is not attempted, but a few examples are shown as related to the XML document we have been considering, the WebClass.xml file. XMLDOC object's methods will be invoked to add another student to the web class file. This is what a student node looks like. We will add another student according to this scheme.

 <student id="1">  <name>Linda Jones</name><legacySkill>Access, VB5.0</legacySkill>

</student> 

Looking at the node, student, we see that in order to add a new student node we need to add the name and legacySkill child nodes. Also we need to add the attribute Id and give a value to it. Finally we need to add the proper texts for the name and legacySkill nodes.

We assume that the new student will have:

id –> 7
name–>John Doe
legacySkill–>Fortran, Soroban The code for adding the new student is as follows:

//This creates a new student:
var newElem= xdoc.createElement(”student”);

//This line creates the attribute to the new student:
var newAtt=newElem.setAttribute(”id”,7);

//The next two lines creates elements name and legacySkill
var part1=xdoc.createElement(”name”);
var part2=xdoc.createElement(”legacyskill”);

//The next two lines create the required text for the nodes:
var newText1=xdoc.createTextNode(”John Doe “);
var newText2=xdoc.createTextNode(”Fortran, Soroban”);

//Appending the name and legacySkill to the student node
var part11=newElem.appendChild(part1);
var part21=newElem.appendChild(part2);

//Adding the text content to the name and legacySkill nodes
part11.appendChild(newText1);

part21.appendChild(newText2);

In this fashion you build the tree so that the node is defined according to the blueprint from the XML document. This completes the building of the student node.

Verifying the new student information

In order to verify, we again invoke the XMLDOC's properties as shown in the early part of this tutorial. In particular we will be using the following code to verify:

// We created newElem and the node's name is given by: document.write(newElem.nodeName);

// We get the following result for this line:
student

// We have not added the newElem to xdoc and presently the number of // nodes in xdoc are given by:
var totalnodes=xdoc.getElementsByTagName(”student”);
document.write(”<br>”+totalnodes.length);

// the result of this code gives the number of student nodes in xdoc:
4

// We look at the attributes of the new student node:
document.write(”<br>”+ newElem.attributes[0].name);
document.write(”<br>”+ newElem.attributes[0].value);

// We get the following result for the above code snippet:
id
7

// We now grab the text for the entire student node:
document.write(”<br>”+newElem.text);

// This snippet gives the following browser display:
John Doe Fortran, Soroban

// Now we get a reference to the last child of the xdoc before adding the // new student:
var lastnode=xdoc.lastChild;

// This is important. We add the newElem student node to the xdoc:
lastnode.appendChild(newElem);

// We now count the number of nodes in the new document which have // the student nodes:
var totalnodes=xdoc.getElementsByTagName(”student”);
document.write(”<br>”+totalnodes.length);

// The result of this in the browser display is:
5

This verifies that the new student has been added (we started out with 4). The file can be saved using the save (ObjTarget) method of the XMLDOC object.

Sommaire

Understanding and manipulating the XMLDOM objects is a prerequisite to writing successful code, whether it be for AJAX or for anything to do with XML files especially using Microsoft tools. It is the author's hope that the surgical presentation of this tutorial in dissecting the XMLDOM object will provide a guide to this understanding. XMLHTTP request is another object belonging to the XMLDOM; it is discussed in a previous tutorial and will be revisited again in discussing the responseXML method of the request object.

• 1 Comment

AJAX has been exciting many programmers as the latest and greatest thing in web development. This article takes a step-by-step look at the Microsoft way to script for AJAX.

Introduction This tutorial is not about Ajax Telamon from the Iliad who fought Hercules, but the latest and greatest (at least in the opinion of some) thing in web development. Ever since Google charmed the web at large with those AJAX-created Google Maps apps, the number of amount of adherence to AJAX has been growing exponentially. In this tutorial, we look mainly at the Microsoft way of scripting for AJAX. Like my previous tutorials, it's step by step all the way after a brief introduction.

Web Application Evolution Since 1992 developers have relentlessly pursued ways to make the web more appealing, more productive and more interactive. The plain text html at birth soon saw embedded images followed by appealing colors conferred by cascading style sheets. But it was left for JavaScript to bring user interaction, and thus began the heydays of scripting languages.

However, there were two major browsers sharing the web space, and two scripts to serve the user (the third, ECMA came later). This was not enough, and DHTML was born – not a new language, but a good mix of html, CSS, and JavaScript that made user interaction extremely satisfying.

AJAX came along to make the interaction more responsive without needing to refresh the page. AJAX is an acronym, and the credit for coining this name goes to Adaptive Path's SS Garret. However, Microsoft appears to be the progenitor, with its flagship ActiveX Technology making this possible. Now it is a mélange of XHTML, CSS, JavaScript, XmlHttpRequest, and XML, and its DHTML déjà vu all over.

Step by Step to AJAX – Ajax's Model of Interaction

The figure shown next is derived from Garret's article on Ajax, redrawn to render it horizontally. The figure shows both the prior art (classic interaction) as well as the AJAX embodiment. In the classic version, the client sends an HTTP(S) request to the server, the server checks to see whether any server side processing is to be carried out, processes the server related instructions and sends back the html with CSS, if it is defined. There is a synchronicity between client request and server response.

In the AJAX model, the client sends a JavaScript to AJAX, and AJAX sends the HTTP(S) request to the web server which can also serve XML. The web/XML server sends back the result in the form of XML, and AJAX relies on the Document Object Model (DOM: blue print of web document) to transmit the result in XHTML and CSS. It does so by reading the returned XML's node tree using DOM. The interaction could be synchronous or asynchronous.

Step by Step to AJAX – XmlHttpRequest

One of the key objects needed for working with AJAX is the XMLHttpRequest Object. This object does two things: it handles the httpRequest, and then it processes the XML response. This was implemented in Internet Explorer 5 for Windows as an ActiveX Object. This has been implemented by Mozilla 1.0, Apple and others in compatible forms. The W3C has similar standards for the DOM Level 3 specification. We will take a brief look at this object before we put it to work. Some of the highlighted methods and properties are later used while fetching a web page to show what values they do return.

Creating the XML HttpRequest object This is the easy part, if you need to deal only with Microsoft IE. For Mozilla you would instantiate the object using the following syntax:

var xhr=new XMLHttpRequest();

where as for IE you would use the following:

var xhr=new ActiveXObject(”Microsoft.XMLHTTP”);

Both of these methods create an object which is hidden from the user. Its methods and properties take control of the server interaction. For cross browser applications you need to come up with a branching syntax. This is not so difficult; see for example the cross-browser boiler plate code (Listing 2.0 in the link) .

Step by Step to AJAX – XMLHttpRequest Object Methods

This short list of methods is shared by all supported browsers. In this tutorial we shall look at some of the highlighted methods.

abort()

current request is stopped

getAllResponseHeaders()

returns a string containing information of headers

getResponseHeader (”headerlabel”)

returns a string containing information about a single header

open(”method”, “URL”[,asyncFlag[,"userName"[,"password"]]])

assigns various request attributes

send(content)

Transmits the data with information that may be posted, if needed

setRequestHeader (”label”, “value”)

assigns label, value pair for the header

While open() and send() are most often used, the others are also useful in some cases. The open() method begins the interaction and takes two mandatory arguments; the “method” used to open, which is either GET or POST, and the URL to which the request is made.

The GET and POST methods are similar to those used in ASP, as some of you might recognize. The GET is indicated for retrieving read only data while POST is for sending data to the server.

The URL could be complete, or a relative URL.

The third parameter which is optional (default value TRUE being asynchronous) sets the interaction to be synchronous (FALSE) or asynchronous (TRUE). If you choose the synchronous route, the script waits for the response to arrive before acting. The useful mode is to set the interaction to be asynchronous and use the onreadystatechange event (to be discussed) to get at the response.

XMLHttpRequest Object Properties The following read only properties are browser agnostic (all supported browsers understand them).

onreadystatechange

Event handler which fires every time the state changes

readState

Integer representing the status of the object
0 = uninitialized
1 = loading
2 = loaded
3 = interactive
4 = complete

responseText

Data returned in string format

responseXML

Data returned in DOM Compatible format

état

Numeric code returned by server indicating status
404: Not found
200: OK

statusText

Message string that came with the status

Step by Step to AJAX – Fetching a page using AJAX

Working with AJAX is quite simple. The code will be explained by explaining the component parts with reference to an html file, AjaxTest.htm . First you need to create an XMLHttpRequest Object along the lines discussed above. Then you make a request, in this case pass an URL as an argument to the getPage() function. Since you are getting back a page you just need to use the GET argument. Since an asynchronous interaction is intended, use TRUE for the third argument in the open() method.

Before the open() method is called the onreadystatechange eventhandler calls the statusCheck() function, where the readyState of the request is verified and the status code is verified to return OK. Both of these functions are in the <Head/> and are evaluated before the rest of the page is loaded. Review the two functions just described for the html page AjaxTest.htm . Some of the properties and methods previously described and highlighted are also returned. The script that follows this paragraph is in the <head/> section of AjaxTest.htm.

You also include code to alert you if, for some reason, the XMLHttpRequest object instantiation failed. It also needs to alert the user if the request failed because the page was unavailable, or the server was not responding, or for any other reason.

If the status is OK and the readyState shows completion, then you get the response, for this example, in the text format. Now you invoke the DOM API to get the element whose ID=”x”, in this case the <div/>, and set its innerHTML property the same as the returned text. If you look at the response produced by the alert(xhr.responseText) you would see the html of the page you requested as shown in the next picture. I particularly like the preference to use the ECMA scripting style.

 <SCRIPT LANGUAGE=javascript>
<!--
var xhr = false;
function getPage (url) {
xhr = false;
//this is the Microsoft browser compatible instantiation
xhr = new ActiveXObject("Microsoft.XMLHTTP");
if (!xhr) {
alert ('XMLHttpRequest failed to instantiate');
return false;
 )
xhr.onreadystatechange = statusCheck;
xhr.open ('GET', url, true);
xhr.send (null);
 )
function statusCheck() {
txt1.value="XmlHttpRequest_Status: " + xhr.status;
txt2.value="XmlHttpRequest_readyState: " + xhr.readyState;
TEXTAREA1.value="XmlHttpRequest_getallResponseHeaders(): " +
xhr.getAllResponseHeaders();
txt5.value="XmlHttpRequest_statusText: " + xhr.statusText
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
document.getElementById("x").innerHTML =(xhr.responseText);
} else {
alert ('There was a problem with the request.');
 )
 )
 )
 //-->
</SCRIPT> 

However, when you use the DOM API, you get the following as shown:

The <body/> of the AjaxTest.htm consists of just the following controls so that the properties, the methods and their values can be displayed. The onclick event starts the process rolling. Of course the <div/> is where the innerHTML property gets written. The html for these controls is as shown:

 <P><STRONG><SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>synchronous <SPAN
style="FONT-SIZE: large; COLOR: red">J</SPAN>avascript <SPAN
style="FONT-SIZE: large; COLOR: red">A</SPAN>nd <SPAN
style="FONT-SIZE: large; COLOR: red">X</SPAN>ML= <SPAN
style="FONT-SIZE: large; COLOR: blue">AJAX</SPAN></STRONG></P>
<P>
</P>
<P> </P>
<P><INPUT id=button1 type=button
onclick="getPage ('http://xphtek/TestXMLHttp/Greeting.asp')"
value="Get the page by XmlHttpRequest" name=button1></P>
<P><INPUT id=txt1 style="WIDTH: 396px; HEIGHT: 22px" size=51></P>
<P><INPUT id=txt2 style="WIDTH: 395px; HEIGHT: 22px" size=50></P>
<P><TEXTAREA id=TEXTAREA1 style="WIDTH: 393px; HEIGHT: 72px"
name=TEXTAREA1 cols=42></TEXTAREA></P>
<P><INPUT id=txt5 style="WIDTH: 389px; HEIGHT: 22px"
size=50></P>
<div id="x"></div> 

As previously mentioned you can reference the URL completely, as in http://xphtek/TestXMLHttp/Greeting.asp or simply by its relative URL Greeting.asp . The Greeting.asp page is a simple page as shown:

 <%@ Language=VBScript %>
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
 <script language="JavaScript">
document.write (document.lastModified);
 </ script>
 </ HEAD>
 <BODY>
<%Response.Write("<b>Welcome to programming with AJAX</b>")%><br>
<% =Date()%><br>
Hello<br> 

</ BODY>
</ HTML>

Summary The tutorial has looked at the various properties and methods of this interesting XMLHttpRequest object. It goes without saying that the browser should support JavaScript, and as a developer you should appropriately warn the user to enable JavaScript, if it is not. For Microsoft IE there is the additional requirement of browser support for ActiveX objects.

For recent browsers the older method of using iframes to update parts of a page will be replaced. However iframes may still find favor with much older browsers. In this tutorial we saw most of the properties, but the lastmodified property returned null; the syntax was double checked but to no avail. Although AjaxTest.htm was coded on Visual Interdev 6.0, it is not a requirement; plain Notepad should work as well.

• 1 Comment