{"id":280,"date":"2009-01-21T10:01:51","date_gmt":"2009-01-21T09:01:51","guid":{"rendered":"http:\/\/www.sortea2.com\/blog\/?p=280"},"modified":"2009-01-21T10:19:37","modified_gmt":"2009-01-21T09:19:37","slug":"evitar-problemas-cuando-javascript-no-esta-habilitado-en-el-navegador","status":"publish","type":"post","link":"https:\/\/www.sortea2.com\/blog\/2009\/01\/evitar-problemas-cuando-javascript-no-esta-habilitado-en-el-navegador\/","title":{"rendered":"Evitar problemas cuando Javascript no est\u00e1 habilitado en el navegador"},"content":{"rendered":"<p>Cuando una p\u00e1gina de nuestra web necesita obligatoriamente <strong>tener javascript habilitado <\/strong>en el navegador para poder mostrarse correctamente, pero no queremos que los usuarios que no lo tengan habilitado accedan autom\u00e1ticamente a otra p\u00e1gina para que pueda llevar a cabo la tarea que quer\u00eda utilizar, tenemos que idear un m\u00e9todo que detecte si javascript est\u00e1 habilitado y, en caso negativo, redireccionar a otra p\u00e1gina.<\/p>\n<p>Este problema lo tuvimos en la pantalla de <a href=\"http:\/\/sortea2.com\/sorteos\">sorteos simples<\/a>, quer\u00edamos que los usuarios sin javascript pudieran explotar todas las posibilidades de nuestro sistema para sortear. Para ello, creamos una p\u00e1gina alternativa a esta, la de <a href=\"http:\/\/www.sortea2.com\/sorteosnoscript\">sorteos simples sin javascript<\/a>. Como vemos, visualmente es practicamente id\u00e9ntica, pero a la hora de darle al bot\u00f3n de \u00a1sortear! el resultado necesita que la p\u00e1gina se actualice.<\/p>\n<p>Bien, ya ten\u00edamos las dos p\u00e1ginas, pero \u00bfc\u00f3mo hacer que la gente que no tenga javascript sepa facilmente que hay otra p\u00e1gina que hace exactamente lo mismo  y que s\u00ed le funciona?. La soluci\u00f3n que pensamos que era la m\u00e1s f\u00e1cil era usando la cl\u00e1sica etiqueta de <strong><code>&lt;noscript&gt;&lt;\/noscript&gt;<\/code><\/strong>. Esta etiqueta lo que hace es ejecutar lo que haya dentro en el caso de no tener javascript. Entonces lo que hab\u00eda que hacer era que lo que hubiera dentro fuera una instrucci\u00f3n que redireccionara la p\u00e1gina a otra.<\/p>\n<p>La instrucci\u00f3n es una etiqueta meta, la siguiente:<\/p>\n<div id='codigo'>\n&lt;NOSCRIPT&gt;<br \/>\n&lt;META HTTP-EQUIV=&#8217;Refresh&#8217; CONTENT=&#8217;0;URL=$parametro&#8217;&gt;<br \/>&lt;\/NOSCRIPT&gt;\n<\/div>\n<p>M\u00e1s tarde veremos por qu\u00e9 en el atributo URL ponemos una variable de javascript, pero si unicamente necesitas redireccionar una p\u00e1gina, puedes poner directamente la p\u00e1gina a la que quieres que se redireccione.<\/p>\n<p>Con este c\u00f3digo ya podr\u00eda funcionar todo correctamente, aunque nosotros tuvimos que ir m\u00e1s all\u00e1, porque hicimos una funci\u00f3n que, entre otras cosas, miraba que p\u00e1gina quer\u00eda ser redireccionada y la redireccionaba donde deb\u00eda.<\/p>\n<p>Un fragmento de la funci\u00f3n ser\u00eda este:<\/p>\n<div id=\"codigo\"> $paginanojs = array(1 =&gt; \u201csorteos-simples\u201d, 2 =&gt; \u201csorteos\u201d, 3 =&gt; \u201cregistro\u201d, 4 =&gt; \u201clogin\u201d);<\/p>\n<p> for ($i = 1 ; $i &lt;= count($paginanojs)  ; $i++)<br \/> {<br \/> <span class=\"indented\">if ($noscript == $paginanojs[$i])<\/span><br \/> <span class=\"indented\">{<\/span><br \/> <span class=\"indented\">if ($noscript == &quot;sorteos-simples&quot;)<\/span><br \/> <span class=\"indented\"><span class=\"indented\">$parametro = &quot;..\/sorteosnoscript&quot;;<\/span><\/span><br \/> <span class=\"indented\">elseif ($noscript == &quot;sorteos&quot;)<\/span><br \/> <span class=\"indented\"><span class=\"indented\">$parametro = &quot;..\/nojs?pag=sorteos_av&quot;;<\/span><\/span><br \/> <span class=\"indented\">else<\/span><br \/> <span class=\"indented\"><span class=\"indented\">$parametro = &quot;..\/nojs?pag=&quot;.$paginanojs[$i];<\/span><\/span><\/p>\n<p> <span class=\"indented\">echo<\/span>&quot;&lt;NOSCRIPT&gt;&quot;.<br \/> &quot;&lt;META HTTP-EQUIV=&#8217;Refresh&#8217; CONTENT=&#8217;0;URL=$parametro&#8217;&gt;&quot;.<br \/> &quot;&lt;\/NOSCRIPT&gt;;<\/span><\/p>\n<p> <span class=\"indented\">$noscript = 0;<br \/><\/span> <span class=\"indented\"> break;<\/span><br \/> <span class=\"indented\">}<\/span><br \/> } <\/div>\n<p>A esta funci\u00f3n se la llama con el par\u00e1metro <strong>$noscript<\/strong>, y ya hace lo que predeterminadamente hemos programado.<\/p>\n<p>En nuestro caso, necesit\u00e1bamos que las p\u00e1ginas de <a href=\"http:\/\/sortea2.com\/registro\">registro<\/a>, de <a href=\"http:\/\/sortea2.com\/login\">login <\/a>y de <a href=\"http:\/\/sortea2.com\/sorteos-avanzados\">sorteos avanzados <\/a>fueran a una p\u00e1gina auxiliar, porque no hab\u00edamos creado ninguna p\u00e1gina que hiciera su misma funci\u00f3n pero sin javascript, en estas p\u00e1ginas lo que se hace es informar al usuario de que no puede utilizar esas funciones. Puede que en el futuro habilitemos estas p\u00e1ginas para este tipo de usuarios.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando una p\u00e1gina de nuestra web necesita obligatoriamente tener javascript habilitado en el navegador para poder mostrarse correctamente, pero no queremos que los usuarios que no lo tengan habilitado accedan autom\u00e1ticamente a otra p\u00e1gina para que pueda llevar a cabo la tarea que quer\u00eda utilizar, tenemos que idear un m\u00e9todo que detecte si javascript est\u00e1 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[20,19,21],"class_list":["post-280","post","type-post","status-publish","format-standard","hentry","category-tutoriales","tag-habilitado","tag-javascript","tag-truco"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts\/280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/comments?post=280"}],"version-history":[{"count":5,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts\/280\/revisions"}],"predecessor-version":[{"id":285,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/posts\/280\/revisions\/285"}],"wp:attachment":[{"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/media?parent=280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/categories?post=280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sortea2.com\/blog\/wp-json\/wp\/v2\/tags?post=280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}