Spinner Control: control HTML mediante Prototype

ByLuis

Spinner Control es una librería creada con Prototype que permite crear controles HTML que modifican su valor mediante botones incluidos en ellos. Ya hace tiempo implementamos nuestro propio controlador, por lo que no es necesario explicar cómo hacerlo.

spinner.png

Entre las características que ofrece encontramos lo siguiente:

  • Pulsación continua del botón considerada
  • Aumento de velocidad según el tiempo
  • Tiene en cuenta los cursores arriba y abajo
  • Trabaja con números enteros, decimales y arrays.
  • Intervalo configurable
  • Máximo y mínimo configurable
  • Fuerza máximo y mínimo cuando pierde el foco
  • Uso de prefijos y sufijos
  • Ignora parte no numéricas escritas

Spinner Control

Vía / dzone

Similar Posts

| |

Frame: Modular CSS Framework

ByLuis

Frame is a modular CSS framework that supports: Layout, Typography, Forms, Code, Table, Reset, and Print styling. It is HTML5 compatible, and provides default styles and support for HTML5 elements. Frame is accompanied by an online tool that allows you to easily generate your own build (in case you don’t need to use all the features). …

Post original

|

WebSockets en HTML5

ByLuis

HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).

Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:

if ("WebSocket" in window) {
  var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
  ws.onopen = function() {
    // Web Socket is connected. You can send data by send() method.
    ws.send("message to send"); 
  };
  ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data);  };
  ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
  // the browser doesn't support WebSocket.
  alert("Websocket is not supported in your browser");
}

HTML5 Web Sockets: A Quantum Leap in Scalability for the Web

Vía / DZone

WampServer 2.0: el nuevo WAMP5

ByLuis

WAMP5 ha cambiado y ahora se llama WampServer 2.0, el cambio no solo ser refiere al nombre, sino a una gran novedad, permite instalar distintas versiones de Apache, MySQL y PHP, pudiendo elegir la que más nos convenga en cada situación, teniendo en cuenta que no todas las versiones de PHP son compatibles con todas las versiones de Apache.
wampserver.png
Este cambio es muy importante, ya que los entornos de trabajo no son siempre los mismos y debido a imcompatibilidades es necesario crear nuestras aplicaciones en entornos de trabajo exactos al real.
Nos permite modificar las opciones de las versiones de MySQL, PHP y Apache que estén seleccionadas en ese momento, aunque aún echo en falta poder visualizar los logs de apache que desee (no solo el por defecto), elegir la aplicación para ver los logs y poder permitir modificar los virtual hosts de apache.
WampServer 2.0
Vía / OpenSourceCommunity.org

|

HTML5′s “email” and “url” Input Types

ByLuis

I’ve already covered some subtle HTML5 improvements like placeholder, prefetching, and web storage.  Today I want to introduce a few new INPUT element types:  email and url.  Let’s take a very basic look at these new INPUT types and discuss their advantages.The SyntaxThe syntax is as basic as a text input;  instead, you set the type to “email” or “ …

Post original

Impresiones sobre el desarrollo web en España

ByLuis

Mientras que algunos de los que nos dedicamos al desarrollo web estamos cansados de oír hablar de la web2.0, otros que pertenecen al mismo mundo laboral ni saben qué es, ni les importa. El desarrollo web en España es como un iceberg, lo que se ve es nada comparado con lo que está debajo del agua.

Leyendo blogs sobre desarrollo web, parece que todo el mundo sabe, usa u opina sobre jQuery, frameworks, Ajax, JSON, RIA, estándares, usabilidad o el reciente cloud computing. Pero realmente somos una minoría los que estamos interesados en estos temas. Cada día aparecen proyectos web2.0 de los que se habla durante meses, evangelizadores de lo-que-sea 2.0 nos cansan los oídos sobre qué es lo que se hace o lo que se debe hacer y cuál es el futuro inminente. Pero realmente estos proyectos son un pequeño porcentaje y el adoctrinamiento 2.0 no cala hondo en la realidad laboral española.

Entonces, ¿qué es lo que pasa? Pues sinceramente, no tengo ni idea, ni creo estar capacitado para exponer la realidad de lo que ocurre. Tan solo tengo algunas ideas, pensamientos o suposiciones sobre cuales pueden ser algunos de los motivos que pueden causar la apatía 2.0.

Es un trabajo

Lo que para algunos es un entretenimiento, una pasión o un vicio, para la gran mayoría es sólo un trabajo. Muchos de lo que se dedican a este trabajo lo hacen porque “no había de lo suyo”: muchos químicos, matemáticos, biólogos… trabajan en una profesión que no les gusta, pero que desgraciadamente es de lo único que había trabajo cuando salieron de la universidad. Además hay que sumar el hecho de que los españoles tenemos una actitud negativa ante el trabajo: el que sea una obligación, se pague mal o se explote a la gente, son motivos suficientes para que muchos hagan lo justo en su jornada laboral, y eso implica no esforzarse un poco más en aprender.

Más de lo mismo

Me acuerdo que hace años, cuando cambié de proyecto, los antiguos compañeros me preguntaron qué tal el proyecto nuevo, y mi respuesta fue: “más de lo mismo, navegador → JSP → bean → BD → HTML”.

Si nos ponemos a pensar, casi todos los proyectos web que se realizan son muy parecidos: hacer consulta a la BD y mostrar datos. Esto provoca que la creación de páginas web sea algo muy monótono y mecanizado, donde la novedad suele escasear, por lo que la necesidad de aprender algo nuevo no abunda, ya que con los conocimientos básicos que se tienen, se puede hacer cualquier aplicación.

El copy/paste mató a la 2.0 star

Si al hecho de que la gente no está motivada o a lo de que es más de lo mismo, le añadimos el uso discriminado de copy/paste, nos encontramos con la situación de que la gente lo único que hace la mayor parte de su tiempo es copiar un html/script/css anterior, modificarlo para que te funcione y pasar al siguiente tema, y en muchos casos sin saber exactamente qué es lo que está cambiando.

En Java es muy típico encontrarte a personas que llevan años usándolo y que no se saben de memoria el public static void main(String args[]). ¿Para que sabérselo de memoria si siempre usan un script anterior para crear uno nuevo?. Yo personalmente no me sé de memoria el <!DOCTYPE html PUBLIC … > y no creo que me lo vaya a aprender en la vida (ni ganas que tengo).

Jefes de proyecto o analistas “mayores”

Seamos sinceros, normalmente la gente con más interés por aprender es la gente más joven, pero lógicamente, estas personas suelen ser las que más abajo del escalafón están y sólo se dedican a hacer lo que les mandan. Si quien decide qué se debe hacer, no tiene el conocimiento sobre las novedades que hay en el desarrollo web, ¿cómo se va a propagar el uso de la web2.0?.

Cuando empecé a aprender Ajax, me fue imposible ponerlo en práctica en el proyecto en estaba, los que estaban por encima mía ni sabían qué era, ni se les podía dejar por tontos. Después de mucha lucha conseguí que al menos se hiciera usando iframes ocultos, para ellos era un adelanto, para mí un atraso.

Clientes y otros politiqueos

El cliente tiene la razón, aunque te den ganas de abrirle la cabeza con un libro de O’Reilly. Esto suele llevar a la situación de peticiones imposibles y desarrollos chapuceros.

Una aplicación web no es una aplicación de escritorio, por mucho que le pese al cliente, el cual suele pedir cosas como:

  • que toda la aplicación se vea en la pantalla, que no haya scroll vertical o que haya varias capas (normalmente frames argggg) y cada capa con su propio scroll vertical (e incluso horizontal)
  • que se pretenda que se hagan uploads automáticos de ficheros, sin que el usuario haga nada en el navegador (da igual las veces que les expliques que los navegadores no lo permiten)
  • usar flash o applets porque el navegador no permite hacer algo y el cliente se empeña
  • que sea compatible con los navegadores más antiguos del mundo (alguien lo debe tener instalado y no le apetece actualizarse). Y no me refiero al IE6, sino a versiones como IE5 o Netscape 4.7 (sufrido en mis propias carnes hace no mucho)

Sobre el politiqueo, poco que decir que no conozcamos todos. Decisiones en altas esferas nos obligan a usar productos o programas que poco favor hacen al desarrollo web, y menos aún a los desarrolladores. Estas ordenes suelen estar dadas normalmente por comerciales, que de humo y motos saben mucho, pero que de desarrollo no saben nada. Resumiendo, aquellos que no saben de desarrollo web, obligan a que se haga de tal forma, imposibilitando el camino hacia la web.20.

Negocio, negocio, negocio

Al final todo es negocio y lo que realmente importa es ganar dinero, y cuanto más dinero mejor. Esto suele conllevar varias situaciones:

  • recurrir a menos gente de la necesaria
  • reducir tiempos de entrega
  • contratar gente menos cualificada y más barata, la cual suele necesitar mucha ayuda o revisión
  • reutilizar desarrollos anteriores, aunque tengan poco que ver

Debido a esto, los desarrolladores se encuentran con que tienen poco tiempo para mucho trabajo, y las prisas no son amigas de las florituras, algo de lo que la web2.0 está llena.

Conclusiones

Está claro que todo lo dicho anteriomente no es algo generalizado, existen empresas que realizan desarrollos impresionantes, jefes amantes de la web2.0 y programadores interesados en aprender más cada día. De todas formas, al final lo que importa es que seguimos haciendo las cosas mal, bueno, mal no, pero si deprecated. Y ahora con el tema de la crisis, cuando nuestra mayor ventaja puede ser la calidad de lo que ofrecemos, nos encontramos que hacemos lo mismo que el resto de los países y en algunos casos más caro, por ejemplo la India es mucho más barata y mil veces más eficiente que nosotros.

Que nadie se sienta ofendido, porque no va dirigido a nadie este post. Y si se siente ofendido, que se ponga las pilas.

Crear ventanas tipo Netvibes con Prototype

ByLuis

Crear ventanas flotantes en HTML es una de las cosas más difíciles de realizar en una página web. En alguna ocasión hemos hablado de cómo realizar ventanas con HTML y Javascript.

En este caso se trata de una extensión para Prototype que con unas simples líneas de código seremos capaces de crear nuestras ventanas de forma rápida.

ventanas_prototype.png

Para usarlo primero nos deberemos crear la estructura HTML:

<div id="page">
<div id="widget_col_0"></div>
<div id="widget_col_1"></div>
<div id="widget_col_2"></div>
</div>

Con sus CSS:

#page {
margin: 10px auto;
}
#widget_col_0 {
float:left;
width: 30%;
}
#widget_col_1 {
width: 50%;
float:left;
}
#widget_col_2 {
float:left;
width: 20%;
}

Instanciar la clase:

var  portal = new Xilinus.Portal("#page div")

Y por último añadir el contenido:

portal.add(new Xilinus.Widget(), 0)
// O con título y contenido
portal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("El texto que sea"), 1);

Prototype Portal Class

Vía / WebAppers