html - tag - ¿Ha desactivado las mejores prácticas de JavaScript?

title html

Question

Me gustaría saber si alguien optimiza sus páginas web para tener un comportamiento amigable si el usuario tiene Javascript deshabilitado. ¿Hay algún truco para proporcionar algún comportamiento de pseudo-script en tales casos? Estoy hablando de cosas básicas como abrir enlaces en ventanas nuevas. Me imagino que todavía hay mucho que puedes hacer sin Javascript. En algunos casos, podría ser útil tener una página que tenga algunas características a las que recurrir. ¿Hay alguna práctica?

Editar: buenas respuestas hasta ahora! ¿Le importaría a la gente incluir algún código de muestra (vamos, HTML es tan fácil!) Ya que no creo que haya visto una pregunta como esta todavía.

Answer 1

"Me imagino que todavía hay mucho que puedes hacer sin Javascript" - gracioso, no hace mucho tiempo que hicimos todo sin javascript.

El mejor enfoque es lo que se conoce como ''mejora progresiva''. El principio es hacer algo que funcione sin JavaScript, y luego ''capa'' en comportamientos adicionales vinculando el JavaScript a los objetos. Las bibliotecas como jQuery lo hacen sencillo, ya que admiten selectores de estilo CSS. De esta forma, puede aplicar comportamientos JS casi de la misma manera que aplicaría CSS (OK, una ligera exageración).

Es necesario pensar un poco para pensar qué es una buena línea de base y cómo se deben cambiar las páginas.

A menudo, el trabajo extra real se realiza en el lado del servidor, donde es posible que tenga que tener varios sistemas de procesamiento de solicitudes. ¡Es un gran campo para abordar en una pequeña respuesta!

Además, vale la pena pensar en quién y por qué los usuarios no usan javascript. Aquí hay algo que escribí hace un tiempo sobre el tema en caso de que le interese.

¿Un ejemplo? Tome algo simple, por ej. desea mostrar bonitas ''información sobre herramientas'' en los campos de formulario cuando el usuario se desplaza hacia ellos. En el HTML, estos podrían (por ejemplo) marcarse como párrafos:

<label for="username">User name</label><input type="text" id="username" />
<p>Username must be between 6-8 characters</p>

Para usuarios que no son JS, el aviso simplemente puede mostrarse como un buen párrafo. Así que estilo esto con CSS. Tener CSS adicional para los usuarios de JS, que oculta el párrafo por defecto. Entonces: 2 juegos de CSS, uno anula al otro.

no JS:

form p {
    margin: 10px 0 0 0;
    border-bottom: 1px solid grey;
}

js:

form p {
    position: absolute; display: none;
    width: 180px;
    background-image: url(nice-bubble.gif);
    padding: 10px;
}

Cómo aplicas CSS para situaciones JS / no JS depende de ti. Hay numerosas opciones. Personalmente, me gusta codificar JS en CSS y tener una variante noscript.css (es decir, trabajando hacia atrás) en una etiqueta. Lo cual no es XHTML válido, pero funciona bien.

Luego, tenga un JS que busque los elementos y administre el código de visualización de la información sobre herramientas. p.ej:

$(document).ready(function() {
    $(''form input'').focus(function() {...display paragraph...});
    // etc;
})

Es un código falso, pero entiendes la imagen. Lo que terminas con 1 juego de HTML, con 2 presentaciones y comportamientos adicionales, y sin JS enredado en tu HTML.

Answer 2

Cuando utiliza Javascript para abrir una ventana desde un enlace, puede hacerlo transparente para que vuelva al comportamiento original del enlace si Javascript está deshabilitado:

<a href="http://www.guffa.com" target="_blank" onclick="window.open(this.href,this.target,''width=900,height=700'');return false;">Guffa</a>

Si Javascript está habilitado, el evento onclick capturará el clic y abrirá una ventana, luego devuelve falso del evento para que no se siga el enlace. Si Jascripts está deshabilitado, se seguirá el enlace en su lugar.

Answer 3

Las personas que deshabilitan Javascript también pueden recortar CSS, Java y otras funciones de "presentación" para ahorrar potencia de procesamiento en un navegador de menor potencia. (Por ejemplo, un teléfono web o una computadora modelo anterior). Podría mitigarlo de alguna manera al agregar funcionalidad simple al servidor, como lo hicieron en los tiempos de CGI ( introducción al azar aquí ). En ese caso, su servidor podría redireccionar a los usuarios que no son JS a una versión de página GET / POST. También haría que las respuestas sean lo más simples y sin adornos posible, ya que podría enviarlas a una pantalla pequeña.

Answer 4

Para abrir enlaces en ventanas nuevas, puede usar target = "_ blank"

<a href="http://www.google.com" target="_blank">Google</a>

Donde trabajo, utilizamos una página de aterrizaje para asegurar (hasta cierto punto) que tengan Javascript habilitado antes de ingresar a la aplicación ...

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Please Wait...</title>
  </head>
  <body>
    <h1>Please Wait....</h1>
    <noscript><h1>You need a JavaScript-enabled browser to use this application!</h1></noscript>
    <script type="text/javascript">
      <!--
        location.href = "FrontPage.aspx";
      // -->
    </script>
  </body>
</html>

Además, a menudo me sorprende lo poderoso que CSS puede ser .

Answer 5

Puede usar la etiqueta <noscript> para crear un hipervínculo cuyo objetivo es _blank para abrir una nueva ventana.

También es bueno para SEO para que el motor de búsqueda como Google y Yahoo! puede identificar y rastrear sus enlaces en sus páginas web.

<noscript> también puede proporcionar una función normal a esos js-disabled browser.

Answer 6

maneja esto de una manera agradable. El sitio es completamente utilizable sin Javascript, uno puede hacer preguntas y responderlas. Las funciones avanzadas como votar no funcionan.

Debe encontrar un compromiso entre el tiempo que está dispuesto a gastar para que el sitio se pueda usar sin Javascript y la cantidad de características que tienen que funcionar.

Answer 7

jQuery realmente ayuda. Gran parte del tiempo con grandes extensiones de JavaScript (pestañas, información sobre herramientas, etc.) escribes tu marcado de una manera muy semántica.

Ejemplo: el complemento de pestañas requiere que crees divs anclados, es decir,

<a href="#Preferences">Preferences</a>
<a href="#Tools">Tools</a>
<div id="Preferences">
   blah
</div>
<div id="Tools">
   bar
</div>

Esto tiene sentido semánticamente, y sin el complemento de pestañas, obtienes cierta funcionalidad. Sin embargo, cuando tiene javascript y jquery-tabs habilitadas, obtiene una interfaz realmente agradable y rica.

Esto es realmente una mejora progresiva, como han notado otros. Escriba un marcado semántico, realce con CSS y luego realce con Javascript. Deberías terminar con algo que funcione para todos, incluso para los usuarios de linces.

Answer 8

Lo que a veces hago es establecer las características que requieren que JavaScript no se muestre, luego uso Javascript para que se muestren. De esta forma, las personas sin Javascript no verán las características que no pueden usar. Y luego ponga características alternativas en las etiquetas <noscript> .

Answer 9

Aquí hay una pregunta ( y otra ) que tienen muchas opiniones (diferentes) sobre la creación de un sitio que maneja con gracia el hecho de que JavaScript está deshabilitado.