Debido al distinto comportamiento de los navegadores web muchas veces se hace imprescindible detectar el nombre del mismo así como la versión que se está utilizando para realizar una programación determinada.
Gracias al objeto navigator de javaScript podemos detectar tanto el nombre como la versión de navegador que se está utilizando.
El objeto navigator tiene varias propiedades aunque quizás la más interesante sea userAgent. Mediante el uso de expresiones regulares aplicadas sobre esta propiedad podremos detectar la información que necesitamos.
Tenéis información detallada sobre el objeto navigator en la siguiente dirección:
Ver información detallada en javascriptkit.com
Estos son algunos de los valores de las propiedades del objeto navigator relativo a tu navegador:
- appCodeName:
- appName:
- appVersion:
- userAgent:
Fxcanvas es una implementación del elemento canvas de HTML5 para Internet Explorer. El proyecto esta desarrollado por Google y la librería tiene los siguientes requisitos:
Requisitos
- Flash Player 9+ en Internet Explorer (Algunas versiones a partir de la 10.1 puede que no funcionen correctamente)
- IE 5.5 +. (IE9 no lo soporta por ahora)
Fxcanvas nos permite trabajar solo con gráficos en dos dimensiones.
Uso
Descargar el comprimido en el directorio publico del servidor y pegar las siguientes llamadas js en la sección head de nuestro documento.
<head>
<script type="text/javascript" src="/public/path/jooscript.js"></script>
<script type="text/javascript" src="/public/path/fxcanvas.js"></script>
<!--[if IE]><script type="text/javascript" src="/public/path/flash_backend.js"></script><![endif]-->
<comment><script type="text/javascript" src="/public/path/canvas_backend.js"></script></comment>
</head>
Manuales de canvas
Si todavía no habéis trasteado demasiado con canvas podéis echar un vistazo a estos tutoriales
Ejemplo
A continuación realizaré un ejemplo muy básico en el que usaremos tanto imagenes como textos. Pongamos por ejemplo que nos piden realizar una gráfica con los resultados de las votaciones del balón de oro.
ver ejemplo
descargar ejemplo (86 Kb)
Leer el resto de esta entrada »
Hace ya unas semanas mi compañero de fatigas y uno de mis grandes comentaristas del blog XD Alberto, me metió en la cabeza la fricada de representar el movimiento ondulatorio con JavaScript. En un principio pensé que estaría jodidillo el asunto pero como veréis a continuación es bastante sencillo.
Onda vaaaaaaaaaaaaaaaa!:
Lanzar la onda!
Para conseguir pintar nuestra onda simplemente nos servimos de la ecuación del movimiento ondulatorio:
y(x, t) = A * cos(wt – kx)
donde:
- A =
- Amplitud
- w =
- frecuencia angular
- t =
- tiempo
- k =
- Número de onda
- x =
- Posición sobre el eje x
A continuación os pongo el codiguillo JavaScript que utilizo para pintar la onda por si os sirve de ayuda
Código JS
var movimiento = "";
var n_posicion = 0;
var j = 0;
var longitud = 36;
/* CONFIGURACION DE LA ONDA */
var caracter = "*"; //caracter con el que se representa la onda
var xo = 0 // valor inicial de la posición de la onda sobre el eje x
var yo = 80; // valor inicial de la posición de la onda sobre el eje y
var v = 400; // velocidad de la onda
var A = 60; // Amplitud
var T = 18; // Periodo
var longitud_onda = 10; // Longitud de onda
/* FIN CONFIGURACION DE LA ONDA */
var w = ( 2 * 3.14 ) / T;
var k = ( 2 * 3.14 ) / longitud_onda;
$("li#pos0").css({ left: yo + "px" });
function movimiento_armonico(){
$(document).ready(function(){
movimiento = movimiento + "<li id='pos"+ n_posicion + "'>" + caracter + "</li>";
$("#onda").html(movimiento);
for (i=0; i < n_posicion; i++)
{
x = xo + i
t = i;
y = yo + (A * Math.cos((k * x) - (w * t)))
$("li#pos" + i).css({ top: y + "px" });
$("li#pos" + i).css({ left: x + "px" });
}
n_posicion++;
j++;
if(j == longitud + 1)
clearInterval(onda);
});
$("#onda li:last").hide();
}
onda = setInterval("movimiento_armonico()", v);