2009-09-26 13 views
6

Estoy obteniendo más en jQuery y así he configurado un HTML/Javascript/CSS base del sitio que utilizo para todas mis pruebas.¿Cuál es actualmente la mejor configuración de HTML/CSS/Javascript?

Desde estas pruebas con el tiempo se convertirá en PHP y ASP.NET MVC sitios web, quiero aprovechar esta oportunidad para conseguir los fundamentos abajo a la derecha de nuevo por los navegadores modernos y los estándares web antes de construir los lenguajes de script en la parte superior de la misma.

He seleccionado a utilizar:

  • XHTML 1.0 Strict
  • UTF-8 codificación
  • tan pocas referencias CSS como sea posible (poner todo en archivo CSS 1 para velocidad de carga)
  • tan pocas referencias de Javascript como sea posible (1 archivo de javascript p lus el jQuery referencia base de código - Asumo utilizando el Google jQuery base de código no es la mejor práctica para la velocidad)
  • puedo comprobar el código como se construyo con la http://validator.w3.org

¿Hay algo más que deba ¿considerar?

Aquí es un ejemplo de uno de mis sitios web de prueba:

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"); 
} 
+1

para mí las elecciones que has hecho se ven bien. xhtml strict, utf-8, jquery ... Creo que eso es lo que se reduce a cuando realizas una investigación y pruebas sobre lo que funciona generalmente mejor. – markus

Respuesta

5

Personalmente me gustaría unirse al evento de clic a través de jQuery para garantizar la buena separación, así:

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

esta manera usted puede unirse a múltiples controladores de eventos. Si solo usas onclick AFAIK, solo puedes usar un manejador.

Por cierto también se puede usar cita y los espacios de nombres personalizados:

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

se desencadena por

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

y

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

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

HTH Alex

+0

gracias, sí, no intrusivo javascript es otro objetivo de diseño que voy a seguir mientras construyo estos ejemplos, simplemente no había llegado a este ejemplo todavía :-( –

5

Mueva los bloques <script> al bottom of the page.

+1

hmm, volví a moverlos explícitamente a la parte superior de la página después de haber tenido la experiencia de que los efectos de jquery no funcionaron hasta que la página se cargó por completo, p. Tenía un sitio de tarjetas flash donde el usuario tenía que esperar a que se cargara la página completa (5 segundos) antes de poder voltear las tarjetas, pero sigo escuchando que esta es la mejor práctica, pero no puede ser tan malo si a sitios como http://www.apple.com tiene 12 (doce) referencias de scripts en la parte superior de la página. –

+3

Los navegadores generalmente manejan la carga de javascript un archivo a la vez. Su página generalmente se cargará más rápido si los mueve al final, ya que todas las demás solicitudes se manejarán en paralelo antes de que comience la carga de JavaScript. Si su página tarda mucho tiempo en cargarse y la interfaz no funciona correctamente hasta que lo haga, es posible que desee tener un mensaje de carga que esté visible con el contenido real oculto hasta que la interfaz esté disponible. El último bit de javascript cargado contendría código para eliminar la imagen de carga y revelar la interfaz. – tvanfosson

4

Con respecto a los archivos CSS y JS en general, no combinaría todos los archivos JS en un solo archivo durante el desarrollo. Es muy difícil desarrollarlo en un gran archivo JS. Más bien use un módulo que los combine sobre la marcha o durante el despliegue.

suelo ir con (ambos CSS y JS):

un archivo general:

  • project.css

y uno por página:

  • project_welcome .css

y cualquier componente especial (controles de inicio de sesión, vistas de área publicitaria, etc.) tienen uno separado también.

De esta forma puede aplicar algunas técnicas de organización y no se volverá loco administrando ese único archivo grande.

HTH Alex

+0

Secundado, tener menos archivos no traerá ninguna ventaja de velocidad, Apuesto lo contrario. Está todo en caché de todos modos después de la primera solicitud. – simon

+0

Hmmm, solía tener docenas de archivos javascript en mis sitios web PHP pero decidí cambiar a uno ahora porque sigo leyendo que el problema de "dos descargas simultáneas por nombre de host" es uno de los cuellos de botella de velocidad más grandes para los sitios web, ¿cierto? –

+0

sí, puedo confirmar que si utiliza un enfoque similar al que mencioné, puede terminar fácilmente con el navegador intentando cargar más de 50 archivos JS + CSS que en el primer golpe provocarán que demore mucho tiempo. Y después de cada actualización sucede lo mismo, etc. Por supuesto, la caché se activará después de eso, pero eso no importa si su visitante no regresa después de que el primer tiempo de carga haya sido demasiado largo. Y cosas como minificar el JS es más fácil una vez que lo haya procesado en un solo archivo JS. –

0

yo recomendaría poner el JS llama por debajo del cuerpo de la etiqueta. Si sus scripts se cuelgan, entonces la página puede cargar y dejar que el comportamiento (JS) se cargue después del hecho. Me di cuenta de que la velocidad mejora mucho con este método.

Mira esto: http://stevesouders.com/hpws/rule-js-bottom.php

Cuestiones relacionadas