Bitacoras.com: canal "javascript"

Bookmarklet que te permitirá traducir del inglés al castellano con el servicio de Google

Axel Marazzi — Fri, 11 Jul 2008 11:23:56 +0200

Por Axel Marazzi en ALT1040 el 11 de julio de 2008 a las 11:23:56

A través de Alerta Naranja agregué un bookmarklet a mi Firefox súper útil, sobre todo si no tienes el idioma inglés completamente claro.

Con el código que muestro a continuación simplemente tendrás que hacer clic en el bookmarklet para traducir una página que esté en inglés al castellano con el servicio que brinda Google.

javascript:location='http://translate.google.com/translate?sl=auto&tl=es&u='+encodeURIComponent(location);

Si te interesa simplemente tienes que llevar este enlace a la barra donde guardas tus bookmarklets en el Firefox o cualquier navegador que te lo permita (y soporte Javascript).

Vía: Alerta Naranja

Comparte esta anotación

Etiquetas: internet, google, javascript, traductor

Unit PNG Fix: más transparencias en IE6

David Martínez — Sat, 19 Jul 2008 02:46:02 +0200

Por David Martínez en Delirios de un Informático el 19 de julio de 2008 a las 02:46:02

Como otras alternativas, el hack está programado en JavaScript, pero esta vez, tiene interesantes características:

No depende de frameworks como jQuery o Mootools

Funciona con etiquetas y con el atributo background-image de CSS

Permite elementos con ancho y alto automáticos

Es ligero: sólo 999 bytes

Muy fácil de usar: basta un
Para convertir nuestros elementos en Sliders, tendremos que añadir el siguiente código.
```
$(document).ready(function(){ $('input[type="submit"]').each(function(x,el){ // Recipiente $(el).before('
'); //Slider new Slider('slider_'+$(el).attr("id"),{ message: $(el).val(), color: "green", handler: function(){ $(el).click(); } }).init(); //Ocultamos el input $(el).css("display", "none"); }); });
```
Artículos relacionados
Compártelo

Etiquetas: programacion, javascript, webdev, captcha, jquery

3 Webs muy recomendables para el diseño web y blogs

nacho — Tue, 27 May 2008 12:32:45 +0200

Por nacho en SoyGik el 27 de mayo de 2008 a las 12:32:45

En mi netvibes, tengo muchas páginas de este tipo, pero os comento aquí tres de ellas que son las que más me gustan y leo diariamente.

Woork

Woork es un blog de Antonio Lupetti, un ingeniero y desarrollador de Italia. él nos trae tutoriales muy cortitos y fáciles al alcance de cualquiera que sepa un poquito de esto de webs. Trata de diversos temas de desarrollo web tales como PHP, Cold Fusion, JavaScript y CSS. Su forma de explicar los hermosos tutoriales, es muy buena, y para explicarlos utiliza una forma muy personal con imágenes que ilustran los conceptos de los que habla con detalles que Antonio pone a cada uno de sus tutos. Echa un vistazo a su impresionante tutorial sobre un “enfoque de arriba hacia abajo para simplificar el código CSS” en el que explica su preferencia por la creación de hojas de estilo y formato.
Tutorial Blog

Tutoriales sobre los blogs. Nos proporciona tutoriales para tenerlo a mano, recursos, y diversas listas de desarrollo web y diseño de temas como el código de snipplets para diseñadores web. También explica tutoriales sobre Photoshop utilizando capas en Photoshop para la gestión de diseños web, y tutoriales de Flash. Tutorial Blog tiene una sección en la que los usuarios envían sus propias tutorías que permiten a los lectores ver y compartir trucos e ideas.
Web Designed Wall

Web Designer Wall, dejo una de las mejores páginas de sus estilo para el final. Es como un pequeño mundo de arte y diseño web. Podremos encontrar ideas de diseño web y de retoque fotográfico, tutoriales impresionantes (quizás algunos hecho para expertos, más bien) decenas de tutoriales y explicaciones sobre CSS (como por ejemplo el efecto de gradiente que puse en los títulos de SoyGik) Técnicas para la superposición de imágenes en texto normal XHTML, y técnicas de jQuery para los diseñadores. Para los que se están iniciando en jQuerty exponen diez técnicas para obtener resultado muy chulos con jQuery. Una maravilla de página para tener de referencia.

Compártelo!

Etiquetas: servicios web, sociedad, tutoriales trucos, internet, buenas

JSON Diff, compara JSON de una forma muy visual

aNieto2k — Tue, 01 Jul 2008 00:10:35 +0200

Por aNieto2k en aNieto2K el 01 de julio de 2008 a las 00:10:35

JSON Diff, es una herramienta que nos permite comparar de forma visual dos ficheros JSON.

jQuery Sparklines, gráficas sencillas con jQuery

aNieto2k — Thu, 17 Jul 2008 12:21:25 +0200

Por aNieto2k en aNieto2K el 17 de julio de 2008 a las 12:21:25

jQuery Sparklines, nos permiten crear pequeñas gráficas basadas en líneas desarrolladas en javascript sobre jQuery.

Las opciones con las que podemos personalizar nuestras gráficas son realmente sorprendentes:

Opciones comunes:

type - line (default), bar o tristate

width - Ancho de la gráfica, por defecto "auto".

height - Altura de la gráfica, por defecto "auto".

lineColor - Color de la línea

fillColor - Color del relleno

Opciones de gráficas tipo línea:

spotColor - Oculta o muestra el color del valor final.

spotRadius - En pixels (default: 2)

Opciones de gráficas tipo Bar:

barColor - Color de los valores positivos

negBarColor - Color de los valores negativos

barWidth - Tamaño de cada barra, en pixels

barSpacing -Separación entre barras, en pixels.

zeroAxis - Centro del eje Y.

Opciones de gráficas tipo Tristate:

posBarColor - Colores valores positivos

negBarColor - Colores valores negativos

zeroBarColor - Colores para valores cero.

barSpacing - Separación entre barras, en pixels

zeroAxis - Centro del eje Y

Paso de valores

El script está pensado para recibir los valores de 2 formas completamente diferentes.

Mediante HTML

Mediante HTML, indicaremos en la llamada que recoja los datos directamente desde el HTML contendor de la gráfica, de esta forma dejamos visible estos datos en caso de no tener capacidad de ejcutar Javascript.

//HTML

1,2,3,4,5,4,3,2,1

//Javascript

$('.sparklines').sparkline('html');

Mediante Array de datos

La otra opción sería la de pasarle los datos mediante un array directamente en la llamada.

//HTML

Loading..

//Javascript

$('#ticker').sparkline([1,2,3,4,5,4,3,2,1]);

Ejemplo de uso



//HTML

8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10

//Javascript

$('#linecustom').sparkline('html', {

				height: '1.5em', 

				width: '8em', 

				lineColor: '#f00', 

				fillColor: '#ffa', 

				spotColor: '#77f', 

				spotRadius: 3}

			);

[Descargar]

JavaScript Micro-Templating

aNieto2k — Thu, 17 Jul 2008 14:42:23 +0200

Por aNieto2k en aNieto2K el 17 de julio de 2008 a las 14:42:23

John Resig, ha desarrollado un pequeño sistema de micro-templating para Javascript. Algo que poco a poco parece que se va integrando más en las páginas debido a la relevancia que está cogiendo este lenguaje.

// Simple JavaScript Templating

// John Resig - http://ejohn.org/ - MIT Licensed

(function(){

  var cache = {};



  this.tmpl = function tmpl(str, data){

    // Figure out if we're getting a template, or if we need to

    // load the template - and be sure to cache the result.

    var fn = !/\W/.test(str) ?

      cache[str] = cache[str] ||

        tmpl(document.getElementById(str).innerHTML) :



      // Generate a reusable function that will serve as a template

      // generator (and which will be cached).

      new Function("obj",

        "var p=[],print=function(){p.push.apply(p,arguments);};"  



        // Introduce the data as local variables using with(){}

        "with(obj){p.push('"  



        // Convert the template into pure JavaScript

        str

          .replace(/[\r\t\n]/g, " ")

          .split("<%").join("\t")

          .replace(/((^|%>)[^\t]*)'/g, "$1\r")

          .replace(/\t=(.*?)%>/g, "',$1,'")

          .split("\t").join("');")

          .split("%>").join("p.push('")

          .split("\r").join("\\'")

        "');}return p.join('');");



    // Provide some basic currying to the user

    return data ? fn( data ) : fn;

  };

})();

Una vez cargado este código, podremos usarlo de la siguiente manera:

//HTML

/* Sin procesamiento en el template */



/* Con procesamiento en el template */





// JAVACRIPT 

var results = document.getElementById("results");

results.innerHTML = tmpl("item_tmpl", dataObject);



var show_user = tmpl("item_tmpl"), html = "";

for ( var i = 0; i < users.length; i   ) {

  html  = show_user( users[i] );

}

Como curiosidad, John comenta que el definir los

Menú UNO
Menú UNO - Item Nº 1
Menú UNO - Item Nº 2
Menú UNO - Item Nº 3
Menú UNO - Item Nº 4
Menú UNO - Item Nº 5
Menú DOS
Menú DOS - Item Nº 1
Menú DOS - Item Nº 2
Menú DOS - Item Nº 3
Menú DOS - Item Nº 4
Menú TRES
Menú TRES - Item Nº 1
Menú TRES - Item Nº 2

Para los menúes horizontales podemos usar este ZIP  que incluye un demo aunque lo único necesario es el archivo dropdown.js que alojaremos en una servidor y cargaremos antes de </head>
<script type="text/javascript" src="URL_dropdown.js"></script>
Luego, incluiremos el CSS que podrá variar de acuerdo a nuestros gustos, pero algunas de las propiedades principales son estas:


<style type="text/css">
.dropdown {
  float:left;
  padding-right: 5px;
}
.dropdown dt {
  width:125px;
  cursor:pointer;
}
.dropdown dt:hover {
}
.dropdown dd {
  display: none;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 200px;
  z-index: 200;
}
.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 10px;
  width: 200px;
}
.dropdown li {
  display:inline;
}
.dropdown a, .dropdown a:active, .dropdown a:visited {
  display:block;
  padding:5px;
  width:170px:;
}
.dropdown a:hover {
}
</style>
Para usarlo, debemos armar una lista donde cada item tendrá un código similar a este:
<dl class="dropdown">
  <dt id="nombre-ddheader" onmouseover="ddMenu('nombre',1)" 
      onmouseout="ddMenu('nombre',-1)">Texto del menú</dt>
  <dd id="nombre-ddcontent" onmouseover="cancelHide('nombre')" 
      onmouseout="ddMenu('nombre',-1)">
    <ul>
      <li><a href="URL_item1">Item 1</a></li>
      <li><a href="URL_item2">Item 2</a></li>
      <li><a href="URL_item3">Item 3</a></li>
      <li><a href="URL_item4">Item 4</a></li>
    </ul>
  </dd>
</dl>
Pueden tenerse tantos de estos bloque como sea necesario y sólo debemos tener en cuenta que el ID sea diferente para cada uno de ellos.

El ejemplo del post se encuentra en este archivo de texto .

Para crear un menú vertical podemos usar este otro ZIP  que también incluye un demo y donde todo lo necesario es el archivo flyout.js que alojaremos en una servidor y cargaremos antes de </head>
<script type="text/javascript" src="URL_flyout.js"></script>
Luego, incluiremos el CSS que es similar al anterior, la única variante es que en lugar de definir la clase dropdown como   flotante:
.dropdown { /* para el menú horizontal */
  float:left;
  padding-right: 5px;
}
la definimos como un bloque y establecemos su posición como relativa:
.dropdown { /* para el menú vertical */
  display: block; 
  position:relative
}
El resto es exactamente igual y un ejemplo se encuentra en este otro archivo de texto .



   




Etiquetas: javascript



Como conseguir compatibilidad entre navegadores siempre
aNieto2k — Fri, 20 Jun 2008 03:14:40 +0200
Por aNieto2k en aNieto2K el 20 de junio de 2008 a las 03:14:40

Cuando has terminado una aplicación y la abres con un navegador diferente al que lo habías hecho durante la fase de desarrollo, te das cuenta de que te queda prácticamente el mismo tiempo que has tardado en desarrollar la aplicación puliendo los detalles en los diferentes navegadores.



Este es el mayor problema con el que nos encontramos los desarrolladores web y por el que más me han solicitado ayuda por mail. Ya hemos hablado varias veces de por que ocurre esto, y básicamente es por que cada equipo de desarrollo encargado de desarrollar cada uno de los navegadores interpreta de una forma u otra los estandares definidos por la W3C. De ahí que aparezcan tests con los que la W3C se asegura de que los navegadores han entendido lo que solicitaban.



Por suerte o por desgracia, existen centenares de navegadores y nunca podemos saber a ciencia cierta que navegador va a usar cada visita, por ese motivo tenemos que pulir nuestro código, añadir opciones específicas (los llamados hacks) o incluso desarrollar sitios aposta para abarcar el máximo de estos navegadores.



Solo la experiencia nos hará reducir el tiempo que perdemos en estas "modificaciones". Hay mucha gente muy buena, con muchísima experiencia que comparte sus conocimientos y de esta gente tenemos que aprender, por ello una lista de "normas" a tener en cuenta antes de empezar nos podría ayudar a conseguir el equilibrio perfecto



	Siempre usa el DOCTYPE strict y valida los estandares HTML/CSS


	Usa siempre un sistema para resetear tus CSS


	Usa opacity:0.99 en elementos de texto para limpiar el renderizado de Safari


	Nunca redimensiones imagenes desde el CSS o HTML


	Revisa el renderizado de la fuente en todos los navegadores. Nunca uses Lucida.


	El tamaño del texto es % en el body y em para el resto


	Todos los divs flotantes deben llevar display:inline y overflow:hidden


	Los contenedores deben tener overflow:auto y activa hasLayout usando un width o un height


	No uses ningún estilo CSS3 extravagante


	No uses imagenes PNG transparentes a menos que hayas cargado el apha.


Artículos relacionados


Historial de navegadores web
Webkit a punto de superar el Acid3 Test
Otro CSS Hack para Safari
Transparencias en tus imagenes con CSS
Validación del XHTML
Compártelo





 



Etiquetas: css, programacion, estandares, javascript, web


Dynamic Drive, servicio completo para webmasters
Hector Russo — Mon, 21 Jul 2008 18:03:36 +0200
Por Hector Russo en GeeksRoom el 21 de julio de 2008 a las 18:03:36

Dynamic Drive es un sitio en donde pueden obterer Javascripts y DHTML original para su sitio o blog, en forma totalmente gratuita, además posee varias aplicaciones en línea muy útiles, fáciles de usar y que sirven para mejorar tu web.


[/caption]




























Script y DHTML quizás podemos descargar de varios sitios en la web, pero encontrar todas las herramientas juntas, que presenta este sitio en línea, es un poco difícil.


Entre esas aplicaciones en línea tenemos un optimizador de imágenes que cuando introducimos el path de un gráfico a optimizar y le indicamos si el output lo queremos en el mismo tipo de fichero u otro como Gif, JPG o PNG, nos dá como resultado una serie de imágenes en distinas resoluciones.


También encontrarán un generador de Favicones, que son esos pequeños íconos que se encuentran al principio de la URL en la barra de direcciones, que identifican al sitio en cuestión, como por ejemplo pueden ver en este momento el ícono de la G de GeeksRoom.


Otra herramienta importante es el generador de .httaccess password, para utilizar password en directorios  y también un generador de .httaccess banning, para generar el código necesario para banear IP´s, sitios que nos enlazan y desabilitar el hot linking de imágenes.


Y les puedo seguir nombrando un generador de gradientes, un procedimiento que busca por nombres de dominios y un generador de botones.


Un sitio muy completo para Webmaster, en donde podemos encontrar casi todo lo que necesitamos para nuestra tarea diaria de creación y mantenimiento de un sitio o blog.


Enlace: Dynamic Drive

























Etiquetas: weblogs, dhtml, dynamic drive, herramientas web, javascript


Controla tus minuaturas de una vez por todas 2.5…
aNieto2k — Wed, 16 Jul 2008 16:56:58 +0200
Por aNieto2k en aNieto2K el 16 de julio de 2008 a las 16:56:58

Llevo unos días mirando de montar un sistema con el que permitir crear miniaturas desde Wordpress 2.5+ indicandoles el tamaño de las mismas, osea que además de los tamaños que podemos definir en Opciones > Miscelanea, tambien nos permite crear unas miniaturas con el tamaño especificado en el momento de subir las imagenes.



Por el momento me las crea sin problemas, ahora solo necesito encontrar una forma de introducir las medidas de una forma cómoda y usable para los usuarios y poder recuperar el nombre de la imagen redimensionada a nuestra voluntad.



Os dejo un ejemplo de como redimensionar las imagenes.

function change_sizes($sizes = array()) {

	update_option('NUEVO_size_w', 400);

	update_option('NUEVO_size_h', 400);

	return array_push($sizes, 'NUEVO');

}



add_filter('intermediate_image_sizes', 'change_sizes');


Añadiendo este código al fichero functions.php de nuestro theme o al my-hacks.php, añadirá un nuevo perfil de imagenes llamada "NUEVO" y que creará imagenes de 400x400 pixeles además de las que ya está creando actualmente.



Iré contando cosillas de como evolucionan las cosas ;)Artículos relacionados


Controla tus minuaturas de una vez por todas 2.2
ImagesControlSize, somete tus miniaturas a voluntad
ImagesControlSize, somete tus miniaturas a voluntad
Creador de miniaturas online
Redimensiona las imagenes de tus posts
Compártelo





 



Etiquetas: php, programacion, wordpress, hacks, javascript


Combos dependientes accesibles con PHP y jQuery
aNieto2k — Tue, 27 May 2008 01:25:34 +0200
Por aNieto2k en aNieto2K el 27 de mayo de 2008 a las 01:25:34

En el último proyecto en el que estoy desarrollando en el trabajo he tenido que crear unos combos dependientes, hasta el momento siempre los había hecho con Javascript, usando Ajax para cargar los datos de un combo a otro, pero para este proyecto quería hacerlo un poco más accesible. Como ya hemos visto en muchos posts, el desarrollar pensando en ser accesibles para todo el mundo es complicado, pero no imposible. Empecemos
 Lo primero que tenemos que hacer es tener claro que es lo que queremos hacer, en el ejemplo, una select de destino que dependerá de una select padre llamada pais.   
 Viendo que es lo que necesitamos crear, veamos como podría ser una aproximación al código PHP que necesitamos. Al código...
 Primero vayamos por partes, y como hay que empezar por alguna definamos la estructura en el servidor y ya iremos subiendo. destino.php <?php if ($_POST["type"] == "xml") header ("content-type: text/xml"); ?> 
 Este fichero es un ejemplo rápido de un XML bien formado, que a su vez hará de elemento

Bitacoras.com: canal "javascript"

Bookmarklet que te permitirá traducir del inglés al castellano con el servicio de Google

Unit PNG Fix: más transparencias en IE6

Artículos relacionados

3 Webs muy recomendables para el diseño web y blogs

JSON Diff, compara JSON de una forma muy visual

Artículos relacionados

jQuery Sparklines, gráficas sencillas con jQuery

Opciones comunes:

Opciones de gráficas tipo línea:

Opciones de gráficas tipo Bar:

Opciones de gráficas tipo Tristate:

Paso de valores

Mediante HTML

Mediante Array de datos

Ejemplo de uso

Artículos relacionados

JavaScript Micro-Templating

Como conseguir compatibilidad entre navegadores siempre

Artículos relacionados

Dynamic Drive, servicio completo para webmasters

Controla tus minuaturas de una vez por todas 2.5…

Artículos relacionados

Combos dependientes accesibles con PHP y jQuery

Empecemos

Al código...

Abracadabra...