Lo que es actualmente la mejor configuración de HTML / CSS / Javascript?

StackOverflow https://stackoverflow.com/questions/1481022

Pregunta

Me estoy poniendo más en jQuery y así he creado un HTML / Javascript sitio de base CSS / que utilizo para todos mis pruebas.

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 encima de él.

He seleccionado a utilizar:

  • XHTML 1.0 Estricto
  • UTF-8 codificación
  • tan pocas referencias CSS como sea posible (poner todo en 1 archivo CSS de la velocidad de carga)
  • el menor número de referencias de Javascript como sea posible ( 1 archivo javascript más el código de jQuery de referencia de base - Asumo utilizando el Google base de código jQuery es la mejor práctica para la velocidad)
  • verifico mi código como se construyo con la http://validator.w3.org

¿Hay algo más que deba tener en cuenta?

Este 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");
}
¿Fue útil?

Solución

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

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

De esta manera puede unirse a múltiples controladores de eventos. Si sólo utiliza onclick yo sepa sólo se puede utilizar siempre un controlador.

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top