Notas y trucos para Javascript accesibles

Hola!, bueno primero que todo vamos a suponer que ya sabemos que es javascript, pero lo que posiblemente no saben es ACCESIBILIDAD, algo que no siempre nos enseñan en la universidad o instituto de educación. La accesibilidad en palabras simples es en la web crear sitios con la posibilidad de que la mayoría de las personas puedan acceder a el, los usuarios mas comunes a los cuales debemos pensar en accesibilidad son:

• Personas que NO tengan Flash player
• Que no tengan Javascript Activado
• Que naveguen desde navegadores de texto
• Que naveguen desde navegadores moviles
• Y el mas clásico, Que naveguen desde conexiones lentas.

y muchos dirán: “NOO PERO SI YA ESTAMOS EN CONEXIONES DE  1 GB (Claro no en Colombia )”, entonces yo les diria:

• ¿Y las personas que entran a una red WIFI donde este saturada?
• ¿Y las personas que entran con “internet 3g”?
• ¿Y las personas que están bajando Porno Vídeos educativos y su conexión se vuelve lenta?

Así podemos seguir todo el día y buscar muchos factores por lo cual una web en la pc de un usuario normal no abre rápido,  entonces por esas personas debemos hacer javascript accesibles, ya que debemos asegurar que la web abra sin una sola instrucción javascript. Ahora vamos a en listar los puntos básicos para un JS Accesible básico jeje.

• Enlaces
• Contenido
• Animaciones

Listo, preparados….

Enalces:

Los enlaces nos acompañan desde muchos nacieron, y por eso  debemos comprender básicamente su uso que es abrir otra web, esa es su función mas no es la función de … <a href=”abrirnuevaventana(‘hola.php’)”>SSS </a> ¡NOOOOOOOO! PARA ESO NO SE USA, se usan para enlazar , no para usar instrucciones javascript, por que al momento de que el usuario no tenga javascript ese enlace no queda funcionando ni para adornar el sitio web, entonces ¿Como logramos hacer que ese enlace funcione bien?, muy sencillo: El href solo le colocaremos la url o el nombre del archivo que vamos a enlazar, osea “descarga.php” o “http://linux.org”. de esta forma estamos asegurando que todo el mundo abra ese enlace. Pero surge un problema, ¿y como ejecuto la funcion javascript?, sencillo tenemos la propiedad del html que dice “ONCLICK” con la cual quedaría de esta forma: <a href=”descarga.php” onclick =”abrirnuevaventana(‘hola.php’)”>Descarga el archivo/a>. Pero continuamos con las deficiencias, haga la prueba y vera si colocas ese código y lo pones a funcionar de seguro no te ejecuta el código javascript y de una abre la url como si no existiera el javascript, entonces para esto le agregamos la instrucción “return false”, la cual nos evita que se abra el enlace y mejor se ejecute el codigo javascript, quedaria algo asi el codigo: “<a href=”descarga.php” onclick =”abrirnuevaventana(‘hola.php’); return false;”>”.

Algo de lo que me di cuenta es que esta instruccion tiene problemas con el Puto IE7, para lo cual les dejo este enlace donde explican como solucionarlo. http://11heavens.com/IE7-bug-report-onclick-event-handler Con eso ya tienen herramientas para que sus web sean un poquito accesibles en el campo del “NO EXISTE JAVASCRIPT”, Otro punto importante es que los enlaces SOLO SE USAN PARA ABRIR ENLACES, no los use para por ejemplo para que se borren los cajones de un formulario, o para una función javascript que no tenga que ver con enlaces.

Contenido:

Ahora con el ajax, cada vez vemos mas sitios donde la información carga en vivo, así que no podemos depender del ajax para mostrar nuestra información, para lo cual existen (Yo lo digo) y con los cuales tu puedes tener tu contenido disponible con o sin javascript:

1. Básicamente el desarrollo de una web requiere unos procesos de muchas personas y de tiempo, mas adelante les dejo un enlace sobre eso, para lo cual se debe hacer una planeacion de lo que se quiere, se necesita y lo que tenemos. Así que no podemos llegar a la “loca” y decir: “Metamole esta info aquí  y la cargamos con ajax por que se ve bonito”, ya que si hacemos esto estamos dejando a un lado los navegadores que no funcionan con javascript, por ejemplo miremos “Facebook” y haga el experimento, use o firefox u opera y desactiva el javascript, dale click en la galería de fotos, ¿Te las abre? ¡SI!, Abra los otros enlaces que por lo general cargan con AJAX, ¿Te los abre?, ¡Si!. Ahora veamos el “www.hi5.www” o los que tengan HI5 y verán que si no tiene javascript la mayoría de los enlaces no funcionan, y el contenido se pierde, voy a tomar una captura y les muestro. http://www.twitpic.com/a0iz4 Ahi vemos abajo que el enlace dice:  ”javascript: void(0);” lo cual nos advierte que si no tenemos el Javascript activado pues no mostrara bien la nueva info. entonces en conclusión para este primer punto eso, El contenido debe estar habilitado sin Javascript.
2. Haga primero en html sin nada de JS (Ya me canse de escribirlo completo), y haga las web interiores sin JS, luego de hacer la web en html, después si insertale el php. y por ultimo el javascript.
3. Asegúrate que la información inicial no se cargue con javascript.
4. Ten como prioridad hacer la web inicial sin animaciones, luego las colocas, también ten en cuenta que algunas animaciones pueden ocular información si no esta activado el JS.
5. Descarga navegadores de texto como Lynx (Linux y windows), abre tu sitio, si puedes ver la totalidad del contenido y los enlaces abren bien, estas haciendo las cosas como son.

Eso lo básico con contenido.

Animaciones:

Las animaciones hacen bonita una web, no es lo mismo una web donde se despliegue la info de forma fea, que una donde aparezcan “GLOBOS” de información o que no tenga una galería de fotos donde se muevan de forma bonita. así que use esas animaciones pero sin saturar la web, recuerda que el javascript también consume recursos en la pc del navegante. ademas las librerías de animaciones ya vienen con puntos básicos de accesibilidad, como lo son Moo, Prototype, $fx y unas cuantas por ahi. Procura usarlas, no te pongas a desarrollar las animaciones tu mismo, ya que con la filosofía del “Código libre” nos ahorrara mucho tiempo en el desarrollo de aplicaciones o webs.

Esas son las anotaciones básicas para una web “accesible” básica, pueden consultar mucho mas en internet, ya que no soy el experto, pero tampoco es necesario serlo para pensar un poquito en el usuario, ten siempre en cuenta el usuario como prioridad, y póngase en el lugar de no saber nada y ensaye cosas comunes y así miraras errores en tu web.

¡Chau! Ahh y sobre el enlace, les recomiendo http://webparahumanos.wordpress.com/ que es el blog de  @maocandamil y habla sobre “usabilidad” y los procesos que se están haciendo para la nueva versión de la web de la Universidad Del Cauca. muy recomendado.

Como utilizar el modrewrite (Basico)

Hola =)

“La continuacion de Es importante una buena “url” (Modrewrite)“

Ayer hablamos de el modrewrite, hoy vamos a ver como hacer un ejemplo sencillo, muy básico.

Primero que todo vamos a crear un archivo “.htaccess“, ¿como lo hacemos?, en Internet nos dan algunas opciones, pero les voy a mostrar 2 sencillas:

1º- Descargarme un archivo que ya contenga el punto delante .htaccess y re nombrarlo. Descargar .htaccess

2º- Renombrar un archivo mediante la consola de windows.
Pasito a pasito:
2.1- Crea un archivo en blanco .txt y llévalo a c:/ (llámalo mismamente nuevo.txt)
2.2-Ve a Inicio (abajo a la izquierda en XP) luego clicka en Ejecutar… , escribe cmd y se abrirá la consola de windows.
2.3- Para asegurarnos que estamos en c:/ escribimos en la consola cd c:\ (si no lo estamos nos llevará)
2.4- Renombramos el archivo escribiendo rename nuevo.txt .htaccess

Tomado de: http://blog-indomita.blogspot.com/2008/06/crear-un-archivo-htaccess-o-loquesea-en.html

Si estas en linux es demasiado sencillo, simplemente creas un archivo en blanco y lo re nombras así “.htaccess” sin comillas lógico.

Bueno, ya después de creado, sigue el paso de modificar el contenido, por obvias razones esta en blanco, entonces lo primero que vamos a hacer es escribir esto:

Options +FollowSymLinks
RewriteEngine on
Rewriterule ^(.*)\_(.*)\.html$ index.php?pagina=$1&nombre=$2

si vemos la estructura que tiene es la siguiente, donde aparezca ^(.*)\ nos va a indicar que es la primera variable de la url, y el siguiente ^(.*)\ es la segunda variable, entonces en este caso la primera variable en la url la indico con $1 y la segunda con $2 y así consecutivamente, si vemos hay un guion bajo “_“, este es un carácter que yo usare para separar las variables. entonces la url en el navegador quedaría:

5_articulo-sobre-modrewrite.html

si vemos el 5 indica la pagina osea la variable $1, y el texto “articulo-sobre-modrewrite” nos indica la segunda variable osea $2.

Hagamos un ejemplo, digamos que se necesita por medio de modrewrite hacer una url bonita que quede por ejemplo,

la-pagina-de_andreslara501_lanzada-en-el_2008_y-el-es-de_colombia.html

¿Como la hacemos?, sencillo, la clave esta en saber identificar las variables.

Options +FollowSymLinks
RewriteEngine on
Rewriterule la-pagina-de_^(.*)\_lanzada-en-el_(.*)\_y-el-es-de_(.*)\.html$ index.php?nombre=$1&ano=$2&pais=$3

Ahora si vamos con la explicación, los ^(.*)\ van ubicados donde ira las variables en la url, como me muestra el ejemplo el primer ^(.*)\ contiene el nombre que es ANDRESLARA501 y es la variable $1, el segundo ^(.*)\ contiene el año y es la variable $2 que contiene 2008, y la tercera variable es $3 que contiene el país osea COLOMBIA.

Así podemos jugar con el modrewrite, haciendo muchas cosas muy vacanas (Sinónimo de chevere, divertido, espectacular, palabra muy usada en Colombia) así que anímate, entre mas lo uses en tus aplicaciones php, mejor serán, por que tus usuarios comprenderán mejor la url.

Recuerda que el archivo .htaccess va en la carpeta donde esta el archivo .php que le hagamos el tratamiento del modrewrite.

Chau y éxitos

Dato curioso: Escribiendo al final casi coloco “Modrewitter” jajajaja hay dios

Es importante una buena “url” (Modrewrite)

Cuando la internet comenzó su auge, todo era en .htm después se comenzó a usar el .html, y se comenzó a utilizar las paginas dinámicas, osea que el contenido no fuera fijo, por ejemplo paginas como:

index.php?pagina=3

Esto era contenido generado por la maquina (En este caso una computadora con Apache o algún programa para servidores). Entonces se generaban muchas paginas en relación a una base de datos.

Google siempre ha dado algunas pautas para el mejor funcionamiento de la web, como conocemos Google tiene el llamado “Googlebot”, que lo que hace es rastrear las web de la Internet, al hacer esto, se indexan webs tanto como .html como .php y .asp en fin, muchas webs con extensiones diversas, entonces Google miro que el contenido dinámico generado desde los php, como index.php?pagina=1 , index.php?pagina=2, index.php?pagina=3 y asi, eran contenidos que podrían ser falsos y solo sirven para aumentar el numero de paginas indexadas en el buscador.

A Google se le ocurrió que las paginas .html serian mejor catalogadas que las index.php?pagina=3…. pero hecha la ley, hecha la trampa, en php hay algo llamado “modrewrite” (Modulo de re escritura, Me perdonan si esta mal traducido) entonces el modrewrite lo que hace es cuando tu llames con alguna dirección lógica, te redireccione a una foto, o a un .php o a un .html, No me entendieron cierto?, jaja bueno aquí va el ejemplo:

Tenemos:

index.php?pagina=1

Aplicándole el modrewrite podría hacer que me quedara así:

articulo-sobre-modulo-de-re escritura-pagina_1.html

Como ves, se cambio la url “.php” por una “.html” y esto permite que Google valore mas nuestro articulo, esto también sirve a la hora de indexar el contenido en el buscador, por que le estaremos dando mas parámetros para que Google los agregue a la hora de encontrar una búsqueda. Por ejemplo:

si tienes la dirección index.php?pagina=1, el buscador a la hora de indexar, no esta tomando ninguna palabra clave de la url, pero cuando es: articulo-sobre-modulo-de-reescritura-pagina_1.html le estoy dando las palabras claves: “articulo”, “sobre”, ” Modulo”, “re escritura”, “Pagina”.

Todo esto sumado a una estructura basada en estándares, y un muy buen contenido original, nada de COPY & PASTE. Nos proporciona una buena indexacion en Google y en los mas afamados buscadores de la Internet.

Aclaro: Indexacion = El proceso que hace el buscador al momento de tomar información de documentos y archivos de Internet, para clasificar, ordenar y agrupar para la facilidad a la hora de la búsqueda.

Un ejemplo sencillo es de la pagina de ELTIEMPO.COM http://eltiempo.com a continuacion les muestro la captura donde pueden ver en la area de la url el modrewrite aplicado.

Mañana escribiré el articulo de un basico de modrewrite, por ahora pues les pido disculpas y si quieren pues peguen una googleada.

Cualquier cosa escriban a mi mail:

andreslara501(Arroba)Hotmail.com

o sino en mi twitter, igual pueden ver lo que estoy haciendo :

http://twitter.com/andreslara501

Variables globales PHP

 

En el mundo del php se esta evolucionando constantemente, es cierto sigue siendo el mismo FOR, IF y todo sigue igual, la diferencia son en funciones y novedades, una de ellas es que las variables globales se deshabilitaron por cuestiones de seguridad.

entonces por ejemplo, antes llegábamos y colocábamos
index.php?variable1=”holas”

y en php imprimíamos asi:

echo $variable1;

ahora como las variables globales están des habilitadas por defecto, entonces accedemos asi:

echo @$_GET["variable1"];

GET por que estamos trabajando las variables por get, si fuese un formulario por donde enviamos las variables y usa post, remplazamos el GET por POST.

echo @$_POST["variable1"];

para los que estabamos acostumbrados a imprimir asi nomas, es complicado al comienzo, igual hay una forma de evitar colocar GET y POST. Es una porcion de codigo.

/***VARIABLES POR GET ***/

$numero = count($_GET);
$tags = array_keys($_GET);// obtiene los nombres de las varibles
$valores = array_values($_GET);// obtiene los valores de las varibles

// crea las variables y les asigna el valor
for($i=0;$i<$numero;$i++){
$$tags[$i]=$valores[$i];
}

/***VARIABLES POR POST ***/

$numero2 = count($_POST);
$tags2 = array_keys($_POST); // obtiene los nombres de las varibles
$valores2 = array_values($_POST);// obtiene los valores de las varibles

// crea las variables y les asigna el valor
for($i=0;$i<$numero2;$i++){
$$tags2[$i]=$valores2[$i];
}
/*fin normalizador get y post*/No se de donde lo tome, si el autor del código anda por ahí avísenme