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.

Separar los scripts del html

Hay un error común en nuestros sitios web, que es de principiante y es el de incluir código externo en el html, me refiero a esto:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
<!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
–>
</style>
</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Eso es ERRÓNEO, ¿Por que?, es sencillo, imagina que entran a tu web desde un móvil, este móvil solo admite HTML, no te admite css. que va a pasar… tu web… se va a cargar mas lento, la simple razón es que esta cargando código css que al móvil no le va a servir, por eso siempre digo que lo que es css, javascript y otros siempre vayan en un archivo aparte!.

Entonces lo correcto seria:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link href=”css/fuentes.css” id=”stilecss” rel=”stylesheet” type=”text/css” />
<title>Untitled Document</title>

</head>

<body>
<span class=”style1″>Hola mundo</span>
</body>
</html>

Lo que esta marcado con naranja es el llamado del archivo css externo, esto nos permite que no coloquemos directamente el código en el html. y así cuando el navegador web del celular, cuando vaya pasando por esa instrucción vera que es un archivo .css y dirá :O ami no me interesa el css, mejor sigo derecho y sigo mirando las demás etiquetas, en cambio si no tubieramos eso el navegador estaría diciendo font-family: Arial, Helvetica, sans-serif; , que es eso1! :S no entiendo, font-size: 18px; , no entiendo eso tampoco, ven… así que perderíamos segundos de carga y el usuario dinero en carga .

Como nombrar correctamente los divs y las clases

Cuando estas trabajando con paginas pequeñas, no tienes muchos problemas con los nombres, pero un error que uno comete generalmente es el de nombrar las clases y los objetos con cosas que uno esta pensando, entonces por ejemplo “.claudia”, “#careperro” y así cosas así. pero no eso no es lo correcto.

lo correcto es crear nombres relacionados a la posición, función y contenedores… osea si el div que vamos a crear esta dentro de un div llamado CABEZOTE, y su función es contener el logo, entonces quedaría algo así:

#cabezote_logo{
}

Ves.. es algo mas organizado, esto que nos permite, que a la hora de ubicarnos y buscar un div en especificio, lo encontraremos en menor tiempo que si estan nombrados al azar.

Recuerda no dejar espacios, pues estos le dan una orden especial al navegador que después veremos.

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

Imagenes y accesibilidad

cuando usas imágenes en un documento html, es necesario que coloques una descripción de ella, esto permite que cuando no cargue la imagen se pueda ver de que trata, ademas cuando visite una persona tu web con un navegador de texto, como lo hacen los invidentes… pueda este leer el contenido tranquilamente.

Ademas de esto, esta demostrado que Google te indexa mejor, son truquitos que se van aprendiendo a lo largo de la vida vamos a ver un ejemplo:

ahí vemos una serie de imágenes, ahora vamos a deshabilitarla con opera.

Esta captura nos sirve para también mostrarles lo del anterior post, donde hablaba de la importancia del color de fondo cuando se usa imágenes de fondo, aquí vemos que el texto y la información es totalmente visible, también observamos que al quitar las imágenes, aparecen textos que representan esas imágenes que no están… eso es bueno ya que por ejemplo si tenemos un sitio personal y esta la foto de toda la familia y en el caso que no cargue, aparecerá el nombre de cada uno de los integrantes…. esto se logra de la siguiente manera:

En dreamweaver en modo gráfico seria algo así:

donde dice ALT ahí, se coloca el texto descriptivo, tiene que ser lo mas explicativo posible. tampoco FOTO CON ARBOLES MUY HERMOSOS naaa tampoco, pero si por ejemplo foto con PEDRITO, JUANITO, MARCELA, ANDREA, ANDRES EN EL DIA DE EL AMOR Y LA AMISTAD.

Esa es una forma, si tu trabajas con el código directamente pues ya te muestro como se hace

<img src=“img/ojos_bonitos.jpg” alt=“Foto de articulo” />

alt=“Foto de articulo” es el texto que se debe insertar, para colocar la descripción de la imagen. practiquen y me comentan.

Truco para usar fireworks en ubuntu (linux)

Ubuntu es la distribución de linux mas usada del mundo, si estoy mal que me corrijan. lastimosamente aplicaciones muy buenas como las de macromedia aun no tienen soporte para linux, esto hace que usemos windows aun, no voy a entrar a discusión si linux o windows es mejor, aya cada uno si se quiere aguantar virus cada mes. pero bueh… sigamos… hay un truco que aprendí hasta hace poco, lo confieso yo en la pc del trabajo tengo windows, en el portátil tengo ubuntu y esto pues me acarreaba algunos problemas como lo son no usar bien el fireworks y el dreamweaver, al comienzo utilice el wine, pero tenia problemas no es lo mismo, hasta que se me ocurrió intentar con la virtualizacion.

Para los que no saben que es virtualizacion, consiste en cojer un sistema operativo, crear un disco duro de mentiras e instalar el nuevo sistema operativo dentro de otro algo asi:

En una ventana puedo tener windows sin ningún problema, entonces esto me da la ventaja de poder trabajar con mi UBUNTU con total libertad. eso es virtualizacion, entonces… esto lo logro con un programa llamado VIRTUALBOX.

Como no puedo demorarme mucho explicando la instalacion del virtualbox, saltamos ese paso, suponiendo que tienen instalado ubuntu o fedora o cualquier distro linux, y que tienen el virtualbox, entonces hay un truco muy especial para trabajar bien con el virtualbox y que pareciera que el fireworks esta instalado en el escritorio, en mi caso gnome, entonces lo que yo hago es lo siguiente:

Me posiciono en la ventana.

Ahora presione la tecla de host, que por defecto es el CONTROL de la derecha, y despues la L, entonces CONTROL+L.

Y listo tenemos integración de los dos escritorios, el explorer y gnome, ahora abrimos fireworks

No es el mejor manual pero peude servir de algo.

Colocar un div junto de otro (Seguimos con los cursos)

Hasta ahora hemos visto como crear divs, con clases… y si hemos analizado los divs son verticales, pero no sabemos aun como se colocan divs horizontales, entonces es muy sencillo de haces, pero algunas personas tienden a confundirse.
Para indicarle al navegador que divs queremos que queden juntos verticalmente, le damos la propiedad float.
Depende de a donde lo queramos alinear le daremos left ó right. Entonces:
#cajon1{
float:left;
}
#cajon2{
float:left;
}
Ahora, para diferenciarlo, vamos a colocarle colores a cada cajón:
#cajon1{
float:left;
background:#CC6600;
}
#cajon2{
float:left;
background:#000FFF;

}
Algo asi quedaría.

Para los descuidadines, aqui les coloco el codigo html….
<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>

Hey!!! pero aun no hemos acabado, digamos que queremos que un div no siga siendo alado, para que quede abajo… le damos la propiedad clear:boot;, nos dará un resultado asi:

Si se observa el div3 se bajo… entonces les voy a mostrar el código css:

#cajon3{
clear:both;
background:#000FFF;
}

<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>
<div id=”div3″>Texto que va en el div3</div>

Ya es parte de su imaginacion como usar estas propiedades, no es necesario usar tablas para organizar nuestras webs, recuerda solo usar tablas cuando muestres datos estadisticos.

Mucho ojo con este error en css

Hoy estoy haciendo una aplicacion llamada ARMIN, un gestor de proyectos, y me encontre un caso peculiar que ya me habia pasado mucho antes, hay veces por pereza o por descuido no le damos espacio a algunas propiedades en css, y les voy a mostrar el caso:

tenemos:

Esa es la esquina del diseño de la aplicacion la cual estoy cortando y diagramando en css, ahora, todo estaba bien… este es el codigo en css para generar solo el cuadro que dice CONTACTOS:
  

#menu_derecho{
      margin:11px 6px 0px 6px;
      background:url(‘../img/fondo_derecha.gif’)#00CCCC repeat-x;
      float:right;
      width:185px;
      height:300px;
  }

todo super bien, en el maldito firefox, que no me gusta pero toca testear la aplicacion ahi, salio perfecto, en mi opera preferido tambien, y lo veo en ie7 y adivinen, :S tenemos problemas!, una captura para que se den cuenta.

Vista desde la zorra, :

Vista desde el ie

Y el problema radica en que al momento de declarar la propiedad BACKGROUND,       

background:url(‘../img/fondo_derecha.gif’)#00CCCC repeat-x;

no le di espacio entre gif’)# , la forma correcta es gif’) # ,asi es nuestro amigo explorer y sus mañas . chau!

Evitar la mayoria de problemas en css, neutralizar propiedades

En css tenemos un problema muy grande, que es la diferencia entre navegadores, cada navegador quiere tomar algunas formas de interpretar las propiedades del css. entonces por eso hay un truco llamado NEUTRALIZACION de css yo lo llamo asi y consiste en lo siguiente:

insertamos este codigo al comienzo de nuestro archivo css, esto nos permitira que iniciemos la mayoria de las propiedades desde 0 y quen o tengamos problemas mas adelante. aqui va el codigo:

/* CSS Document */
@charset “utf-8″;
/*Neutralizando elementos*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { border:0;
}
body{
color:#000;
text-align:left;
margin:0px;
}
img {
border: none;
text-decoration: none;
}
/*Fin de la neutralizacion*/

Quieres saber como se ve tu web desde un movil?

Cuando haces una web, muchas veces deseas saber como seria tu web desde un móvil, entonces desde hace algún tiempo, opera incorporo una opción para ello. la cual modifica el navegador y te permite ver tu web como desde un móvil.

Primero, abrimos www.opera.com :


Nos ubiucamos en le menu que dice DOWNLOAD y le damos en OPERA DESKTOP:

Descargamos el opera y lo instalamos.

Ahi tenemos la foto de opera instalado, ahora simplemente abrimos la pagina que deseamos ver en forma movil, en este caso vamos a utilizar http://buzzeando.com/ una pagina al azar que encontre en wordpress:

ahora simplemente le damos SHIFT + F11 y listo!!!!

Listo tenemos una pagina vista como desde un celular, gracias al unico OPERA



Si quieren volver a el estado anterior, ale estado full le dan SHIFT + F11.

Hay un dato para recordar, y es que DREAMWEAVER incorpora en su software una vista de movil, y este usa la ultima version del opera.