Contenido

Open Web Messenger, integra soporte en vivo a tu web

12 feb

+ 15

Open Web Messenger es una implementación Open Source de un chat que permite ser integrado fácilmente en cualquier aplicación web. Ideal para ofrecer soporte en vivo Open Web Messenger está pensado para trabajar con Agentes que darán soporte a los visitantes.

webim

Requerimientos

  • Apache 1.3.34 o superior
  • PHP 4.x o superior
  • MySQL 5.0 o superior

Instalación

  1. Creamos una carpeta llamada webim (la podemos cambiar editando el fichero libs/config.php)
  2. Subimos todos los ficheros que encontramos en el zip que descargamos.
  3. Creamos una base de datos
  4. Editamos el fichero libs/config.php para añadir los datos de la base de datos.
  5. Entra, con el navegador, http://<tudominio>/webim/install/index.php y pulsamos “Create tables”;
  6. Borramos la carpeta install/
  7. Accedemos mediante el navegador como usuario “admin”  con el password vacio.
  8. Cambiamos el password y le damos permisos 777 a  la carpeta /webim/images/avatar

Descargar

Descargar

Demo

He montado una versión de prueba. Solo está disponible si estoy como agente para activo, si no me encontrais online podeis probar el de la web oficial.

He creado un usuario agente para podais probar de hablar con otros usuarios:

  1. Página de login
  2. User: test
  3. pass: test

element.getBoundingClientRect() tambien en WebKit

12 feb

+ 0

Michael Smith, nos cuenta que la última versión de WebKit soportará esta propiedad, una propiedad que Internet Explorer 5 fué el primero en incorporar y que hace casi un año  John Resig explicó como lo habían integrado en Firefox 3.

element.getBoundingClienteRect() es una propiedad que devuelve un cuadrado, un objeto TextRectangle compuesto por la unión de rectángulos de texto devueltos por getClientRects() ideal para conocer las 4 esquinas de cualquier elemento, similar a las border-XXX del CSS.

Ejemplo

document.getElementById("pageText").getBoundingClientRect();
// --> ClientRect left = "45.5" top = "108.16667175292969" bottom = "1237.2666015625" right = "1215.5"

Descargar

Changeset 40837

Quieres saber cuando podrás usar una nueva propiedad

11 feb

+ 0

Via Ajaxian descubro When can I use…, una web que recoge, de forma muy gráfica, cuando podremos hacer uso de algunas de las características que hemos ido viendo en el blog. Desde los elementos <video /> a las CSS Animations, pasando por los @font-face y el CSS3.

when_i_can_use

Visualmente podremos saber desde que versión, estará soportada esa nueva característica que estamos deseando usar. Al final de la página, nos muestra un nivel de aceptación de estándares.

when_i_can_use_2

Esperemos que a lo largo de estos 2 años, estas cifras suban considerablemente.

¡Ayúdeme, por favor!

11 feb

+ 18

Juan Pizá me avisa de esta curiosa búsqueda en Google. Sin duda una curiosidad del SEO bastante interesante :D

  1. Busca “Por Favor” en Google
  2. Haz click sobre el 2do enlace

Por el amor de Dios!! Ayudad a esa persona!! :D

Actualización

Al parecer el pobre lleva ya varios días (desde 2002) incluso ha ido creando una secuela por capítulos xD

  1. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/b.htm
  2. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/c.htm
  3. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/d.htm
  4. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/e.htm
  5. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/f.htm
  6. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/g.htm

Con sus correspondientes mails a la policía, novia y todo

  1. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/c1.htm
  2. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/g1.htm
  3. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/g2.htm
  4. http://www.unav.es/digilab/proyectosenl/2002/nada_tiene_sentido/g3.htm

Colección de editores enriquecidos para tus aplicaciones web

11 feb

+ 4

Desde Woork, están ultimamente haciendo listado de colecciones bastante interesantes, primero fueron los mejores sistemas para hacer “crop” a imagenes con Javascript, despues nos mostraron los mejores scripts para mejorar las subidas de ficheros mediante Javascript y ahora le toca a los editores enriquecidos.

Los conocidos WYSIWYG nos ayudan a darle una facilidad extra a los usuarios para escribir un código más correcto sin necesidad de conocer HTML. Poner negritas, integrar imagenes, centrar texto o cambiar el tamaño y color de las fuentes es sencillo desde estos editores enriquecidos.

  1. Yahoo! UI Library: Rich Text Editor, no lo he llegado a usar nunca pero tiene buena pinta.
  2. Free Rich Text Editor,  con solo 3 líneas de código logramos incrustar un Word en nuestra aplicación.
  3. TinyMCE, quizas el más conocido y desde su integración en WordPress uno de los más usados y soportados.
  4. FCKeditor, junto al anterior se convierten en los dos con más documentación disponible.
  5. Xinha, de esta ya hemos hablado previamente y puedo entender perfectamente que esté en la lista ya que es sin duda una opción realmente interesante.

WordPress 2.7.1 disponible

10 feb

+ 8

WordPress 2.7.1 ya está disponible, minimizando la lista de fallos detectados como siempre :D [Descargar]

Enlaces rápidos

10 feb

+ 2

Llevo unos días muy cansado y sin ganas de escribir, pero aún así el mundo sigue y hay cosillas interesantes que debemos conocer:

Usa CSS para analizar tu HTML

6 feb

+ 10

Muchas son las herramientas que nos ayudan a analizar nuestro código con el fin de mejorar la cálidad del mismo y asegurarnos de seguir unos estándares básicos en nuestas aplicaciones web. Pero usar CSS es sin duda la más clara y visualmente cómoda de las que existen.

En NealGrosskopf.com han recopilado una serie de códigos CSS que nos mostrarán los elementos que no cumplan con estos estándares:

Elementos con atributos vacios

img[alt=""], area[alt=""], *[class=""], a[href=""], a[href="#"], *[id=""], *[title=""]
{ border: 5px dotted yellow !important; }

Atributos propuestos para ser “deprecated”

body[background], table[background], td[background], th[background],
input[border], table[border]
table[cellpadding],
table[cellspacing],
object[codebase],
img[height], object[height], table[height],
a[name], form[name], img[name], object[name],
a[target], area[target],
td[valign], th[valign],
img[width], object[width], table[width]
{ border: 5px dotted orange !important; }

Atributos “deprecated”

applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align],
body[alink],
applet[alt],
applet[archive],
body[background],
body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor],
img[border], object[border],
br[clear],
applet[code],
applet[codebase],
basefont[color], font[color],
dir[compact], dl[compact], menu[compact], ol[compact], ul[compact],
basefont[face], font[face],
applet[height], td[height], th[height],
applet[hspace], img[hspace], object[hspace],
script[language],
body[link],
applet[name],
hr[noshade],
td[nowrap], th[nowrap],
applet[object],
isindex[prompt],
hr[size], font[size], basefont[size],
ol[start],
body[text],
li[type], ol[type], ul[type],
html[version],
body[vlink],
li[value],
applet[vspace], img[vspace], object[vspace],
hr[width], td[width], th[width], applet[width], pre[width]
{ border: 5px dotted red !important; }

Atributos que no forman parte de la W3C

body[bgproperties],
*[bordercolor], *[bordercolordark], *[bordercolorlight],
body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin],
table[frame]
{ border: 5px dotted magenta !important; }

Elementos vacios

/*span:empty,*/ /*div:empty,*/ li:empty, /*p:empty,*/ td:empty, th:empty
{ border: 5px solid yellow !important; }

Elementos propuestos para ser "deprecated"

input[type="button"], input[type="reset"], input[type="submit"], tt, big, small
{ border: 5px solid orange !important; }

Elementos "deprecated"

applet, basefont, center, dir, font, isindex, menu, s, strike, u,
listing, plaintext, xmp
{ border: 5px solid red !important; }

Elementos ajenos a la W3C

audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow
{ border: 5px solid magenta !important }

Atributos "deprecated" en el XHTML 1.0 Strict

a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name]
{ border: 5px dotted lime !important }

Prohibiciones del XHTML 1.0 Strict

a > a,
pre > img, pre > object, pre > big, pre > small, pre > sub, pre > sup,
button > input, button > select, button > textarea, button > label, button > button, button > form, button > fieldset, button > iframe, button > isindex,
label > label,
form > form
{ border: 5px solid lime !important }

Si te ha gustado, puedes seguir el proyecto en Google Code

Evalua el nivel de estudios para poder leer tu web

6 feb

+ 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

+ 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.

usamoses

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