aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Andrés Nieto

Palma de Mallorca, España

Menú

Buscador

Creando Javascript Accesible

5 Jun

aNieto2k hace 30 días en: Accesibilidad, Asides, Programacion, javascript, webdev

+ 1

Via SentidoWeb descubro este interesante tutorial con el que podemos ser conscientes de los problemas que debemos tener en cuenta y solventar a la hora de desarrollar nuestros scripts en Javascript.

Sexy Forms, el bueno, bonito y barato de los scripts para formularios

25 May

aNieto2k hace 41 días en: Accesibilidad, Programacion, javascript, webdev

+ 8

Eduardo Sada, me avisa de que ya tiene lista una versión estable de Sexy Forms. Se trata de un script desarrollado como plugin de MooTools (está trabajando en la versión jQuery) con el que nos permite hacer formularios más estéticos sin perder la funcionalidad de los elementos del mismo.

(Ver Imagen)

Entre las ventajas que ofrece frente a scripts similares, nos encontramos mejoras estéticas como la posibilidad de usar templates y una integración perfecta en los principales navegadores.

Y quizás lo más importante de todo, sin perder la accesibilidad necesaria para que nuestro formulario pueda ser usado por cualquiera y como quiera.

Demo

Eduardo, nos deja una página de ejemplo para que veamos el resultado y descargar el script directamente desde allí.

Google cae y caemos todos

14 May

aNieto2k hace 52 días en: Accesibilidad, Actualidad, Programacion, de la red, estandares, javascript, web, webdev

+ 17

Hoy, ha caido Google, y todos sus servicios, aunque parezca irreal e improbable,… ha pasado. Y el problema es que no solo han caido los servicios de Google Mail, Google Maps, … sinó que todas las páginas que usan sus servicios. Por poner un ejemplo, en el trabajo hemos estado unos minutos estresados mirando el por que nuestra aplicación no terminaba de cargar, y al darnos cuenta de que Google estaba caido hemos caido en el problema, y menudo problema.

El problema era que estamos llamando a Google Maps en <head /> de la aplicación, algo realmente lógico partiendo de que es lugar en el que meter la lógica de nuestra aplicación. Por desgracia, cuando el servicio está innaccesible o lento, esto produce un tiempo de espera considerablemente largo. Para ello, la solución es hacer un buen desarrollo que no dependa del Javascript de ese servicio y además, incluirlo en la parte inferior de la página, justo antes de </body>.

Con la llegada de servicios como Ajax Libraries, este problema se acentúa ya que estamos delegando el framework JS a Google, y si este cae, todo lo que tenemos montado para él, dejará de funcionar.

Importante recordar, que los scripts ajenos a la aplicación, osea ubicados en un servidor externo debería estar justo antes del cierre de <body> y así, nos ahorramos problemas de carga innecesarios como los de hoy.

<script type="text/javascript" src="mi-script-en-google.js"></script>
</body>

Posible solución a un problema así

Bueno, se me ocurre una solución sencilla para comprobar si el servició está disponible y en caso de no estarlo, ofrecer una alternativa.

var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC de Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
   if (typeof jQuery == 'function') return;
        var sc = document.createElement("script");
        sc.type = "text/javascript";
        // SRC local
        sc.src = 'http://www.anieto2k.com/wp-content/themes/anieto2k08/js/jquery-1.2.6.min.js';
        document.getElementsByTagName("head")[0].appendChild(sc);
   // Tiempo en milisegundos que estimamos pueda tardar.
}, 200);

sc.onload = sc.onreadystatechange =  function(e){
    clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);

Sin duda, la mejor opción siempre es tenerlo alojado en tu servidor. Pero si por algún motivo esto no es posible, quizás te pueda ayudar.

Técnicas WCAG 2.0 por Olga Carreras

6 May

aNieto2k hace 60 días en: Accesibilidad, Asides, Programacion, estandares, web, webdev

+ 1

Olga Carreras responde a 10 de las dudas más habituales sobre accesibilidad. Y es que este año Olga se ha volcado en hacernos mejores desarrolladores web, a las pruebas me remito.

Javascript Image Combobox, dale vida a tus select

16 Abr

aNieto2k hace 80 días en: Accesibilidad, Programacion, javascript, usabilidad, webdev

+ 15

Javascript Image Combobox es un plugin jQuery que permite que nuestros elementos <select/> tenga una vida que hasta ahora no podían tener.

(Ver Imagen)

Se trata de una extensión que permite que los items de los <select /> tengan una imagen para facilitar la selección de items dentro de un listado de opciones.

Para ello hacen uso de un atributo (no estandar) del elemento <option /> llamado icon, que indicará de donde coger la imagen que mostraremos junto al <option />.

 <select name="webmenu" id="webmenu" onchange="showValue(this.value)">
    <option value="calendar" icon="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" icon="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" icon="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" icon="icons/icon_email.gif">Email</option>
    <option value="faq" icon="icons/icon_faq.gif">FAQ</option>
    <option value="games" icon="icons/icon_games.gif">Games</option>
    <option value="music" icon="icons/icon_music.gif">Music</option>
    <option value="phone" icon="icons/icon_phone.gif">Phone</option>
    <option value="graph" icon="icons/icon_sales.gif">Graph</option>
    <option value="secured" icon="icons/icon_secure.gif">Secured</option>
    <option value="video" icon="icons/icon_video.gif">Video</option>
  </select>

Despues con una línea de Javascript este atributo se convertirá en una imagen alojada dentro del <select />.

MSDropDown.init();

Si quieres ver una demo de como quedaría, puedes echarle un vistazo aqui.

Poniendonos al día, un poco de todo

5 Mar

aNieto2k hace 122 días en: Accesibilidad, CSS, Programacion, Wordpress, estandares, javascript, web, webdev

+ 1

Bueno, ya estamos al lío. Hagamos un pequeño listado de lo más interesante de estos días ausente.

Wordpress

NoFollow filter: Agustin Garassino desarrolla un plugin (su primer plugin) que nos permite definir previamente que url’s tendrán el atributo rel=”nofollow” en nuestros posts.
Wordpress Mobile Edition: Alex King renueva el plugin que nos permite mostrar el contenido de nuestro Wordpress adaptado a los dispositivos móviles. En esta versión, por fín tenemos compatibilidad con WP-SuperCache.
Wordpress 2.7.1: Otra nueva versión que soluciona una buena tanda de tickets abiertos y que nos acercan más a una prometedora versión 2.8.
The Definitive URL Sanitizer: David Martinez crea un plugin que nos sanéa perfectamente las URL’s de nuestros posts. Se acabaron los carácteres raros en nuestras URL’s (Via Sentido Web)

WebDev

Twitter se traga tu PageRank: En Adseok nos cuentan lo peligroso que se está convirtiendo Twitter.
Navegar seguro por Internet: En Usolab nos muestran una comparación de los principales navegadores y las vulnerabilidades descubiertas y solventadas. Una buen motivo para motivar el cambio.
Juicer: Herramienta para comprimir nuestros ficheros Javascript y CSS.
Detecta la posibilidad de usar APNG en tus aplicaciones web: Código Javascript que nos permite detectar la capacidad del navegador del usuario para usar imagenes APNG.
Crea un Web Slide dinámico en 5 minutos: Internet Explorer 8 nos trae la posibilidad de crear herramientas que se integrarán con el navegador llamadas Web Slide. IEBlog nos muestra que en 5 minutos podemos crear una completamente dinámica.
Más velocidad al javascript con WebKit: Nos muestran unas comparativas de velocidad de las mejoras que se están implementando al nuevo WebKit. Las mejoras son simplemente impresionantes, QtWebKit está obteniendo mejores resultados de los previstos.
Testea tu diseño con un aumento del 200% de tus fuentes: 456 Berea St. se hace eco de es medida que aparece en el WCAG 2.0 y que nos pide que ampliemos un 200% el tamaño de nuestras fuentes (medida para obtener nivel AA).
Manipulando video usando canvas: Firefox 3.1 integrará la opción de manipular video directamente desde Javascript gracias a canvas. Tenemos un ejemplo (que únicamente funciona con Firefox 3.1).
CSS Transformation en SVG: La gente de WebKit está planeando añadir las opciones que disponemos con CSS Transformation a los ficheros SVG.
CSS Orientado a Objetos: Interesante propuesta de llevar la Orientación a Objetos al CSS.
El arte de lanzar errores en Javascript: Nicolas C. Zakas, nos muestra como usar throw new Error(); para lanzar errores y delegar así al navegador la forma de mostrarlo.
Usando el portapapeles con Javascript: Interesante técnica de usar el portapapeles del sistema operativo para alojar información de nuestras páginas web.

Varias

Extensiones de Firefox del Futuro: Aza Raskin tuvo un sueño y lo convirtió en un post. Nos muestra como le gustaría que fueran las extensiones del futuro de Firefox.
Blueding: Pablo Gallego me envia esta aplicación que ha desarrollado con la que podremos enviarnos contenido (fotos, video,..) directamente por Bluetooth a nuestro móvil.

Evalua el nivel de estudios para poder leer tu web

6 Feb

aNieto2k hace 149 días en: Accesibilidad, Programacion, webdev

+ 3

JuanPe, mi sensei, me muestra por mail txReadability, una curiosa herramienta que analiza tu página web para estimar el nivel de estudios que requiere una persona para leer tu página. Usando un cálculo basado en el número de silabas y las frases de más de 100 palabras obtenemos el Huerta Reading Ease (HRE).

Huerta Reading Ease = 206.84 - (0.60 * P) - (1.02 * F)
P = Número de sílabas por 100 palabras. 
F = Número de frases por 100 palabras.

El cálculo sobre el texto de tu aplicación arrojará un resultado numérico de 0-100 con el que podremos determinar si nuestra página es fácil o dificil de leer.

Calificación (Huerta Reading Ease Score)	Descripción de dificultad	Nivel estimado de grado de lectura	Estándar Internacional de Clasificación de Educación (ISCED)
0 – 30	Muy difícil	Graduado de universidad	Avanzado
30 – 50	Difícil	Grados 13 a 16	Avanzado
50 – 60	Moderadamente difícil	Grados 10 a 12	Secundaria alta (últimos años)
60 – 70	Normal	Grados 8 a 9	Secundaria baja (primeros años)
70 – 80	Moderadamente fácil	Grado 7	Secundaria baja (primer año)
80 – 90	Fácil	Grado 6	Primaria
90 – 100	Muy Fácil	Grado 5	Primaria
-1	No se pudo calcular la facilidad de lectura porque: no hubo suficientes palabras para analizar; o el contenido no tuvo puntuación de fin de frase

Usamos.es, informes de usabilidad y accesibilidad gratis

5 Feb

aNieto2k hace 150 días en: Accesibilidad, Programacion, usabilidad, webdev

+ 7

Fran de Mas Que Accesibilidad, me avisa de que por fín, despues de un año dandole vueltas al proyecto, Usamos.es ha visto la luz.

Usamos.es es una consultoría de accesibilidad y usabilidad que tiene como meta mejorar las páginas web de instituciones y empresas con el fín de mejorar en acceso a estas y ofrecer un camino más sencillo y eficaz para completar acciones en dichas páginas.

Actualmente los informes automáticos son gratuitos pero este no va a ser el único aliciente de esta aplicación, sinó que periódicamente nos van a tener informados de técnicas, documentos y el estado de los temas que más directamente tocan al usuario.

Visita Usamos.es

Simplemente pregunta: Integración de la accesibilidad en el diseño

9 Dic

aNieto2k hace 208 días en: Accesibilidad, Asides, Programacion, estandares, web, webdev

+ 1

Daniel TorresBurriel nos comenta que Shawn Lawton publica de forma gratuita llamado “Simplemente pregunta: Integración de la accesibilidad en el diseño“. El título ya es bastante explicito así que si te gusta el diseño y quieres hacer que este sea lo más accesible posible, te recomiendo que lo leas detenidamente.

Atajos de teclado en Wordpress

4 Nov

aNieto2k hace 243 días en: Accesibilidad, Programacion, Wordpress, estandares, hacks, javascript, web, webdev

+ 5

Esta mañana he visto en AyudaWordpress un artículo traducido de Weblog Tools Collection que a su vez es una mención del codex de Wordpress en el que muestran las teclas de acceso rápido (o atajos de teclado) de Wordpress 2.7.

Yo desde la versión 2.5 (creo que fué la primera con jQuery) uso un marcador que nos muestra todos los accesskey definidas en las páginas de Wordpress.

(function() { var salida = 'Teclas rápidas de Wordpress\n'; jQuery("*[accesskey]").each(function(x,el){var text = (jQuery(el).val() != '')?jQuery(el).val():jQuery(el).text(); if (text != '') salida += jQuery(el).attr("accesskey") + ' --> ' + text + '\n';});alert(salida);})()

Puedes salvar el marcador directamente desde este enlace.

PD: Este script se encarga de encontrar cualquier accesskey de cualquier página (con jQuery), no solo de Wordpress. Si ejecutas el enlace sobre esta página verás las definidas para aNieto2k

← Anterior ↑