2
Feb
aNieto2k hace 7 días en: Programacion, estandares, flash, javascript, web, webdev
Mucho se está hablando de la muerte de Flash con la llegada de HTML5, principalmente por que sitios como YouTube o Vimeo están implementando ya versiones del tag <video /> de HTML5 en ciertas secciones y para navegadores que lo soporten. Aunque Adobe parece no verlo igual.
Por otro lado, Tobias Scheneider ha desarrollado “Gordon“, una implementación en Javascript de un reproductor de Flash usando SVG para ello.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../gordon.js"></script>
<script type="text/javascript">
window.onload = function(){
// Opciones
var opt = { id: 'stage', // ID del contenedor
width: 500,
height: 400};
// Definimos la nueva película
new Gordon.Movie('blue.swf', opt);
}
</script>
</head>
<body>
<div id="stage"></div>
</body>
</html>
El resultado es realmente sorprendente, y podemos disfrutar de algunos ejemplos directamente aquí (aún está un poco verde y solo está disponible para Firefox y WebKit). Además, tenemos disponible el código en GitHub.
2
Feb
aNieto2k hace 7 días en: Asides, Programacion, javascript, usabilidad, webdev
SixRevisions publica una interesante recopilación de editores de texto enriquecidos que nos permiten reemplazar los tristes <textarea /> por completos editores que facilitan la visualización del resultado al usuario. Muy a tener en cuenta.
1
Feb
aNieto2k hace 8 días en: Programacion, javascript, webdev
El Código Konami (Konami Code) es un truco que la gente de Konami integraba en muchos de sus juegos y que generalmente ofrecía acceso a una sección secreta.
↑ ↑ ↓ ↓ ← → ← → B A
Muchas son las aplicaciones web que integran este código, implementar este código en cualquier página web mediante Javascript es algo tan sencillo como esto:
<head>
<script type="text/javascript">
var $ = {
enabled: false,
tmp: Array(),
_konamiCode: Array(65,66,39,37,39,37,40,40,38,38),
init: function() {
this.tmp = Array(65,66,39,37,39,37,40,40,38,38);
},
konamiCode: function(e) {
if(!this.enabled) {
var t = this.tmp.pop();
if((e.keyCode-t) == 0) {
if(this.tmp.length == 0) {
this.enabled = true;
}
}
else {
this.init();
}
}
else {
this.action();
}
},
// Cambiamos por nuestra funcionalidad.
action: function() {
alert("Konami Code Activated");
}
}
</script>
</head>
<body onload="$.init()" onkeydown="$.konamiCode(event)">
</body>
Simplemente tendremos que añadir este código modificando el valor de action por el de la funcionalidad que deseemos ejecutar al completar el Konami Code.
1
Feb
aNieto2k hace 8 días en: Programacion, javascript, webdev
Hace unos meses Eric Wendelin publicó una implementación de printStackTrace(), un script que nos permite seguir una traza de ejecución de nuestros scripts ideal para detectar errores y detectar más fácilmente por donde ha pasado la ejecución de nuestro script.
Hace unos días, Eric actualizó el código integrando a Google Chrome entre los navegadores soportados por la función:
function foo() {
var blah;
bar("blah");
}
function bar(blah) {
var stuff;
thing();
}
function thing() {
if (true) {
var st = printStackTrace();
alert(st.join("\n\n"));
}
}
foo();
El resultado nos muestra por donde ha pasado la ejecución:
printStackTrace()@http://eriwen.com/js/common.4.js:53
thing()@http://eriwen.com/js/common.4.js:249
bar("blah")@http://eriwen.com/js/common.4.js:244
foo()@http://eriwen.com/js/common.4.js:239
@javascript:foo();:1
Si nos interesa, podemos ver el código del proyecto directamente desde GitHub.
27
Ene
aNieto2k hace 13 días en: Programacion, javascript, webdev
Los que nos iniciamos pronto en la informática recordamos LOGO. Aquel lenguaje de programación que nos enseñaron cuando estudiábamos y que mediante comandos muy claros podíamos mover por la pantalla un puntero (que llamabamos Tortuga) haciendo dibujos en la pantalla. En clase, lo usábamos para mover un coche teledirigido adaptado para recibir órdenes desde una interfaz con LOGO.
(Ver Imagen)
Gracias a <canvas />, ha sido posible generar un interprete desarrollado en Javascript que nos permite disfrutar de este interesante lenguaje 
25
Ene
aNieto2k hace 15 días en: Programacion, javascript, webdev
Si has trabajado alguna vez con Google Analytics, sabrás que no solo es pequeño script que colocas en el inferior de tu página y esperas a que Google añada las estadísticas y confeccione los gráficos. Google Analytics, permite una gran cantidad de configuraciones para ayudarnos a estudiar a nuestros usuarios y enfocar más nuestro diseño/contenido a lo que ellos buscan.
(Ver Imagen)
Siempre es bueno tener una chuleta a mano con todas las opciones para que trabajar con él sea más sencillo y rápido. Por eso, esta cheatsheet seguro que te sacará de algún apuro.
19
Ene
aNieto2k hace 21 días en: CSS, PHP, Programacion, Wordpress, hacks, javascript, webdev
Aunque sin él yo no podría escribir mis artículos, es posible deshabilitar el editor HTML de nuestro Wordpress de una forma sencilla con alguna de estas opciones:
1) CSS: La opción con más estilo (¿lo pillais? 
)
Sin duda se trata de la solución más rápida y sencilla ya que simplemente tendremos que añadir un estilo CSS al panel de administrador.
// Añadir el CSS directamente
function removeHTMLEditorCSS(){
echo '<style type="text/css">#editor-toolbar #edButtonHTML, #quicktags {display: none;}</style>';
}
add_action('admin_head', 'removeHTMLEditorCSS');
// Añadir un fichero CSS externo
fichero: removeHTMLEditor.css
#editor-toolbar #edButtonHTML, #quicktags {display: none;}
wp_register_style('removeHTMLEditorCSS', '/ruta/css/removeHTMLEditor.css');
wp_enqueue_style('removeHTMLEditorCSS');
2) Javascript: La más rápida
Desde Javascript podemos borrar directamente el botón y no permitir usar esta opción:
function removeHTMLEditorJS(){
echo 'jQuery(document).ready(function($) {
$("#edButtonHTML").remove();
});';
}
add_action('admin_footer', 'removeHTMLEditorJS');
3) PHP: La más limpia
En las dos anteriores, aunque son efectivas, dejamos la opción de recuperar la opción directamente desde el mismo navegador, desde PHP podemos eliminar el botón dejando la opción perfectamente deshabilitada.
function my_default_editor() {
$r = 'tinymce'; // html or tinymce
return $r;
}
add_filter( 'wp_default_editor', 'my_default_editor' );
// Versión reducida
add_filter( 'wp_default_editor', create_function('', 'return "tinymce";') );
Conclusión
Siempre que puedas estas cosas, deberían ir en un fichero de configuración alojado en el servidor y todas las opciones son igual de válidas.
18
Ene
aNieto2k hace 22 días en: CSS, Programacion, estandares, javascript, web, webdev
ie-css3.js permite que Internet Explorer identifique los pseudo selectores CSS3 y aplique los estilos asociados a ellos en nuestras páginas. Solo tendremos que incluir un fichero Javascript para poder empezar a disfrutrar de este script.
Requerimientos
El script necesita el framework DOMAssistant para funcionar, aunque no creo que adaptarlo para cualquier otro framework sea áltamente complicado. He intentado migrarlo a jQuery y MooTools y me he encontrado con la limitación de pseudo-selectores disponibles en los frameworks. Por ejemplo :nth-of-type() no está disponible en ninguno de los dos anteriores.
Instalación
Simplemente tendremos que añadir al <head /> de nuestra página la llamada a los dos ficheros javascript que necesitamos:
<head>
<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>
</head>
Selectores soportados
No están todos, pero con estos ya podemos ir haciendo más cómoda la tarea de maquetar una página para Internet Explorer. :nth-child,:nth-last-child, :nth-of-type, :nth-last-of-type, :first-child, :last-child, : only-child, :first-of-type, :last-of-type, : only-of-type, :empty
Consideraciones
Al tratarse de una versión bastante temprana tenemos que tener en cuenta una serie de consideraciones o limitaciones con las que tendremos que lidiar:
- Los ficheros CSS deben ser llamados mediante el uso del tag
<link /> aunque dentro de ellos podrás usar @import sin problemas. No será posible usar el CSS a nivel de página.
- El fichero CSS deberá estar alojado en el dominio de la página.
- El protocolo
file:// para llamar a las CSS no funcionará por temas de seguridad.
- El selector
:not() no está soportado
- La emulación no es dinámica, una vez aplicada los estilos los cambios en el DOM no se verán reflejados.
- Es compatible con las versiones 5,6,7,8 de Internet Explorer.
No es la panacea, pero seguro que a más de uno le puede sacar de un aprieto
18
Ene
aNieto2k hace 22 días en: Programacion, javascript, webdev
Hace ya un tiempo que Google ofrecío su infrastructura para alojar los frameworks Javascript más conocidos y hasta el momento, jQuery, jQuery UI, MooTools, Prototype, Script.aculo.us, Dojo,… tenían este privilegio permitiendo que estemos actualizados sin tener que cambiar nada y sin tener que preocuparnos de alojar el fichero JS en nuestro servidor.
Ahora Ext Core, tambien está disponible mediante este método, permitiéndonos usarlo de dos formas diferentes:
HTML
El formato HTML es el que nos permite usarlo mediante una llamada usando el tag <script /> a una URL que Google nos ofrece
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/ext-core/3.0.0/ext-core.js"></script>
Javascript
Mediante Javascript, nos permite controlar cuando esté cargado y ejecutar código Ext Core cuando esté listo para usarlo.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Cargamos el core
google.load("ext-core", "3.0.0");
// Cuando esté cargado
google.setOnLoadCallback(function() {
....
});
</script>
Ambas técnicas funcionan igual de bien, aunque dependemos de la disponibilidad de Google.
Actualización (18:29)
Corrigo el nombre Ext.js por el de Ext Core, ya que son productos diferentes con diferentes licencias. Steffen nos lo explica más detalladamente en su comentario.Gracias Steffen.
