Quelle est actuellement la meilleure configuration HTML/CSS/Javascript?

Je suis de plus en plus dans jQuery et j'ai donc mis en place un site de base HTML/Javascript/CSS que j'utilise pour tous mes tests.Quelle est actuellement la meilleure configuration HTML/CSS/Javascript?

Depuis ces tests finiront par se transformer en PHP et des sites Web ASP.NET MVC, je veux profiter de cette occasion pour obtenir les bases vers le bas à droite pour les navigateurs et standards web avant de construire les langages de script sur le dessus de celui-ci.

J'ai choisi d'utiliser:

XHTML 1.0 stricte
UTF-8 encodage
que quelques références CSS que possible (tout mettre en 1 fichier CSS pour vitesse de chargement)
aussi peu de références Javascript que possible (1 fichier javascript p LUs la référence de base de code jquery - Je suppose que l'aide de la Google base de code jQuery est la meilleure pratique pour la vitesse)
Je vérifie mon code que je construis avec le http://validator.w3.org

est-il autre chose que je dois considérer?

Voici un exemple d'un de mes sites de test:

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
     <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
     <title>Text XHTML Page</title> 
     <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
     <script type="text/javascript" src="javascript/main.js"></script>  

    </head> 

<body> 
    <h1 class="highlightTitle">Text</h1> 
    <p class="main">First</p> 
    <p>Second</p> 
    <p id="selected" class="regular">Third</p> 
    <p>Fourth</p> 

<form action=""> 
    <div> 
     <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
     <input type="button" value="highlight title" onclick="highlightTitle()" /> 
     <p>here is another paragraph</p> 
    </div> 
</form> 

</body> 
</html>

main.cs:

p.highlighted { 
    background-color:orange; 
} 
h1.highlightTitle { 
    background-color:yellow; 
} 
h1.deselected { 
    background-color:#eee; 
} 
p.regular { 
    font-weight: bold; 
}

main.js:

google.load("jquery", "1.3.2"); 

function highlightIt() { 
    $('#selected') 
     .toggleClass('highlighted'); 
} 

function countThem() { 
    alert("there are " + $("p.main").size() + " paragraphs"); 
} 

function highlightTitle() { 
    $("h1").toggleClass("deselected"); 
}

Source

2009-09-26 Edward Tanguay

pour moi les choix que vous avez fait bien paraître. xhtml strict, utf-8, jquery ... Je pense que c'est ce qui se résume à quand vous faites des recherches et des tests sur ce qui fonctionne le mieux. – markus

Personnellement, je lier à l'événement click via jQuery pour assurer la séparation agréable, comme ceci:

$("#yourId").bind("click", highlightIt);

De cette façon, vous pouvez lier à plusieurs gestionnaires d'événements. Si vous utilisez simplement AFcl, vous ne pouvez utiliser qu'un seul gestionnaire.

BTW vous pouvez également utiliser les espaces de noms d'événements personnalisés et événement:

$("#yourId").bind("beforeHighlighting", doSomething);

est déclenchée par

$("#yourId").trigger("beforeHighlighting");

$(".hasAHelptext").bind("helptext.click", showHelptextFct); 
$(".hasAHelptext").bind("click", otherFct); 

// will only remove the showHelptextFct event handler 
$(".hasAHelptext").unbind("helptext.click");

HTH Alex

Source

2009-09-26 11:32:56

merci, oui, javascript discret est un autre objectif de conception que je vais coller à la construction de ces exemples, mais je n'ai pas encore fait dans cet exemple :-( –

Déplacez les blocs <script> vers le bottom of the page.

Source

2009-09-26 11:28:34 Rob

hmm, je les ai explicitement déplacés vers le haut de la page après avoir eu l'expérience des effets jquery ne fonctionne pas jusqu'à ce que la page a été entièrement chargée, par exemple. J'ai eu un site flashcard où l'utilisateur a dû attendre la pleine page pour charger (5 secondes) avant de pouvoir retourner les flashcards, mais je continue à entendre c'est la meilleure pratique, mais je ne peux pas être si mauvais si des sites comme http://www.apple.com a 12 (douze) références de script en haut de la page. –

Les navigateurs gèrent généralement le chargement de javascript un fichier à la fois. Votre page sera généralement chargée plus rapidement si vous la déplacez vers la fin puisque toutes les autres demandes seront traitées en parallèle avant que le chargement de javascript commence. Si votre page prend beaucoup de temps à charger et que l'interface ne fonctionne pas correctement jusqu'à ce moment, vous pouvez avoir un message de chargement visible avec le contenu réel caché jusqu'à ce que l'interface soit disponible. Le dernier bit de javascript chargé contient du code pour supprimer l'image de chargement et révéler l'interface. – tvanfosson

En ce qui concerne les fichiers CSS et JS en général, je ne combinerais pas tous les fichiers JS en un seul fichier pendant le développement. Il devient très difficile de développer dans un gros fichier JS. Utilisez plutôt un module qui les combine à la volée ou pendant le déploiement.

Je vais habituellement avec (les deux CSS et JS):

un fichier général:

project.css

et une par page:

project_welcome .css

et tous les composants spéciaux (contrôles de connexion, vues de la zone publicitaire, etc.) ont également un composant séparé. De cette façon, vous pouvez appliquer certaines techniques d'organisation et ne deviendra pas fou en gérant ce seul gros fichier.

HTH Alex

Source

2009-09-26 11:36:11

Appuyé, avoir moins de fichiers n'apportera aucun avantage de vitesse, Je parierais le contraire, tout est mis en cache après la première demande. – simon

Hmmm, j'avais l'habitude d'avoir des dizaines de fichiers javascript dans mes sites PHP, mais j'ai décidé de passer à un autre maintenant car je continue à lire que le problème des deux téléchargements simultanés par hostname est l'un des plus gros problèmes. –

oui Je peux vous confirmer que si vous utilisez une approche similaire à celle que j'ai mentionnée, vous pouvez facilement vous retrouver avec le navigateur en train de charger 50 fichiers JS + CSS qui, sur le premier hit, prendront beaucoup de temps. Et après chaque mise à jour, la même chose se produit, etc ... Bien sûr, le cache sera lancé après cela, mais cela n'a pas d'importance si votre visiteur ne revient pas après que le premier temps de chargement ait pris trop de temps. Et des choses comme la réduction du JS est plus facile une fois que vous l'avez traité en un seul fichier JS. –

Je recommande de mettre la JS ci-dessous appelle la balise body. Si vos scripts sont suspendus, la page peut charger et laisser le comportement (JS) se charger après le fait. J'ai remarqué que la vitesse s'améliore grandement avec cette méthode.

Check out out: http://stevesouders.com/hpws/rule-js-bottom.php

Source

2009-09-28 03:52:54 mager

Quelle est actuellement la meilleure configuration HTML/CSS/Javascript?

Répondre

Questions connexes