Bitacoras.com: canal "scripts"

Problemas con plantilla Aspire en Blogger

Oloman — Fri, 05 Sep 2008 21:28:47 +0200

Por Oloman en Oloblogger el 05 de septiembre de 2008 a las 21:28:47

Pedro de Navegantes, preguntó hace siglos como arreglar el problema de la fecha en la adaptación a Blogger del template "Aspire". La verdad es que es una plantilla muy maja y es una pena que no funcionara bien. El caso es que la fecha no se muestra en el hueco donde debería.

Para no comerme mucho el coco y, sobre todo, por escasez de tiempo, he optado por eliminar el script original y aplicar la solución que J.Miur propone para el formato de las fechas en su artículo "Blogger: la fecha de los posts", dónde os remito para ampliar información sobre el tratamiento de fechas.

Editamos la plantilla, expandimos artilugios y buscamos el head. Justo antes, insertamos el código en rojo:

Ahora buscamos el script original que se encuentra entre dos etiquetas clase DATE y que es exactamente...

<div class='date'>
<script type='text/javascript'>
var timestamp = "11:22";
if (timestamp != '') {
var timesplit = timestamp.split(",");
var date_yyyy = timesplit[2];
var timesplit = timesplit[1].split(" ");
var date_dd = timesplit[2];
var date_mmm = timesplit[1].substring(0, 3);
}
</script>
<script type='text/javascript'>document.write(date_dd);</script>
<div class='month'><script type='text/javascript'>document.write(date_mmm);</script></div>
</div>

Tenemos que sustituir todo lo anterior por esto otro...

<div class='date'>
<script>calendario('<data:post.dateHeader/>');</script>
</div>

..y con estos sencillos cambios el día y el mes de la fecha aparecen en el recuadro naranja sin problemas.

IMPORTANTE: Como el script separa los distintos elementos de la fecha basándose en la separación por un guión (-), para que todo vaya bien, en Configuración-->Formato-->Formato de cabecera de fecha, hay que escoger un formato del tipo 05-sep-2008. Podríais usar 05-Septiembre-2008, pero los meses con muchos caracteres como este, no saldrían bien.

Etiquetas: plantilla, blogger, scripts

Una imagen distinta para cada autor

Oloman — Sat, 13 Sep 2008 18:58:00 +0200

Por Oloman en Oloblogger el 13 de septiembre de 2008 a las 18:58:00

Enereo ha dejado un nuevo comentario en su entrada "Una imagen en todos los posts.

Tengo un blog compartido y me gustaría que al comienzo de cada entrada saliera una imagen dependiendo del autor que ha realizado esa entrada. Es como una forma de identificarlo previamente.

Esta cuestión nos ha dado un poco de guerra, pero no por su dificultad, sino por nuestro desconocimiento de la sintaxis del javascript. Se podría haber hecho con sentencias if anidadas directamente en la parte HTML de la plantilla, pero el sistema propuesto nos parece más elegante y más fácil de mantener cuando haya cambios de usuarios y/o de imágenes. También permite que sea más fácil colocar la imagen en cualquier parte de nuestra plantilla Blogspot.

Editamos nuestra plantilla con los artilugios expandidos y empezamos por el script. Buscamos el </head> de nuestra plantilla y justo antes insertamos...

<script type='text/javascript'>
function imagenautor(usuario) {
imagenes = new Array()
imagenes[0] = ""
imagenes[1] = "<img border='0' src='URLimagenusuario1'/>"
imagenes[2] = "<img border='0' src='URLimagenusuario2'/>"
imagenes[3] = "<img border='0' src='URLimagenusuario3'/>"

if (usuario == "usuario1")
{document.write(imagenes[1]);}

if (usuario == "usuario2")
{document.write(imagenes[1]);}

if (usuario == "usuario3")
{document.write(imagenes[3]);}

}
</script>

URLimagenusuarioX: La dirección de la imagen correspondiente al usuario X
usuarioX: El nombre del autor correspondiente. Ojo con las mayúsculas/minúsculas porque son importantes para que el script "reconozca" el nombre.

Ahora que tenemos esta instalada esta utilidad, sólo queda decidir dónque queremos colocar la imagen. En el sitio deseado hay que insertar...

Ideas sobre dónde se puede colocar:

...
<div class='post-header-line-1'>
AQUI --> Justo debajo del título de la entrada
</div>
<div class='post-body entry-content'>
AQUI --> Una línea antes del principio de la información de la entrada
<p>AQUI(*) --> En línea con la información de la entrada
<data:post.body/></p>
...

<div class='post-footer-line post-footer-line-3'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
AQUI(*) --> Justo antes del nombre del autor
<data:top.authorLabel/>
AQUI(*) --> Justo después del nombre del autor
<span class='fn'><data:post.author/></span>
</b:if>
</span>
</div>

(*) Las opciones marcadas probablemente necesiten una modificación del script para que se muestren correctamente con el texto circundante. En concreto hay que modificar las líneas que corresponden al array de imágenes para incorporar código de formato CSS mediante un STYLE.

Así es una línea original
imagenes[1] = "<img border='0' src='URLimagenusuario1'/>"

Y así habría que dejarla
imagenes[1] = "<img style='float:left;margin:10px 10px 0px 0px;" border='0' src='URLimagenusuario1'/>"

Los valores de los márgenes y la lateralidad (right-left) se pueden cambiar sin problemas.

Puede quedar bastante bien, sustituir el nombre en texto de un autor, por la imagen de su nombre. Para ello, primero crea una imagen que sea la firma del autor y alójala. Ahora fíjate en el segundo bloque de código que se ofrece para IDEAS sobre dónde colocar el script. Coloca la imagen en alguno de los AQUI y elimina <data:top.authorLabel/>. De esta manera sólo aparecerá la imagen creada. También válido para las otras opciones.

Etiquetas: blogger, trucos, scripts

Aprende como trabajan los spammers

Fernando Tellado — Thu, 18 Sep 2008 00:09:25 +0200

Por Fernando Tellado en Ayuda Wordpress el 18 de septiembre de 2008 a las 00:09:25

Normalmente no nos debemos preocupar por el spam en nuestro blog si tenemos bien configurado Akismet o cualquier otro sistema que mantenga a raya los mensajes no deseados, esos que nos venden relojes de calamina, nos invitan a conocer los oscuros secretos del porno duro o simplemente quieren que visitemos su sitio … con insistencia.

Pero siempre es bueno conocer como la gente que se dedica a esta asquerosa práctica utiliza las variables de WordPress para tratar de obtener tráfico de nuestro blog. De paso, nos enseñará a conocer mejor nuestra propia plantilla y ¿quien sabe? poder manipularla para ponerles el trabajo mas difícil.

La Información es Poder

Lo primero que un spammer necesita saber es como funciona el formulario de comentarios. La mayoría de los formularios de comentarios de WordPress son exactamente iguales o funcionan del mismo modo, y gracias a esto es por lo que les es tan fácil a los spammers enviar comentarios en masa a los blogs.

Un formulario de comentarios "tipo" de un blog WordPress sería algo así:

Clic para ver Texto Plano

PHP:

"wp-comments-post.php" method="post" id="commentform">

"text" name="author" id="author" value="" size="30" tabindex="1" />

Nombre class="requerido">

(requerido)

"text" name="email" id="email" value="" size="30" tabindex="2" />

Email class="requerido">

(requerido)

"text" name="url" id="url" value="" size="30" tabindex="3" />

Tu Web

"comment"</span> id=<span style="color:#FF0000;">"comment"</span> cols=<span style="color:#FF0000;">"100%"</span> rows=<span style="color:#FF0000;">"10"</span>>

"image" src=submit.png"/>

" name="comment_post_ID" value="524" />

" id="_wp_unfiltered_html_comment" name="_wp_unfiltered_html_comment" value="0d870b294b" />

Para enviar un comentario desde ese formulario debemos rellenar los siguientes campos:

Nombre (author)

Email (email)

Sitio Web (url)

Comentario (comment)

Pero también hay dos campos ocultos:

comment_post_ID

_wp_unfiltered_html_comment

Spammeando con un Script

Si somos un spammer aplicado (de mierda pero aplicado) ya tenemos toda la información necesaria para poder empezar a ofrecer nuestras mierdas. Haremos un script-spam, en el que utilizaremos PHP y Curl. Definiremos un array ($postfields) que contenta la información que queremos colocar en la página:

Clic para ver Texto Plano

PHP:

<?php

$postfields = array();

$postfields["action"] = "submit";

$postfields["author"] = "Spammer";

$postfields["email"] = "spammer@spam.com";

$postfields["url"] = "http://www.soyunspammerdemierda.com/";

$postfields["comment"] = "Soy un pedazo de spammer asqueroso que quiero inundar de mierda tu blog.";

$postfields["comment_post_ID"] = "123";

$postfields["_wp_unfiltered_html_comment"] = "0d870b294b";

//Url del formulario a donde se envía el spam

$url = "http://www.UnBlogIncautoSinAkismet.com/blog/suggerer_site.php?action=meta_pass&id_cat=0";

$useragent = "Mozilla/5.0";

$referer = $url;

//Inicio de sesión CURL

$ch = curl_init($url);

//CURL options

curl_setopt($ch, CURLOPT_POST, 1);

//Publicación de datos $postfields

curl_setopt($ch, CURLOPT_POSTFIELDS, $postfields);

//Se define un useragent (Mozilla/5.0)

curl_setopt($ch, CURLOPT_USERAGENT, $useragent);

//Se define un refferer ($url)

curl_setopt($ch, CURLOPT_REFERER, $referer);

//Obtenemos la página de resultados

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Salimos de CURL

$result = curl_exec($ch);

curl_close($ch);

//Para finalizar, mostramos el resultado

echo $result;

Ya está, el spammer ahora solo tiene que lanzar el script y publicará automáticamente el mensaje. Por supuesto, un spammer real normalmente no escribe directamente la URL del post del blog, sino que crea un loop que obtiene una lista de un fichero de texto, o incluso de una lista de resultados de búsqueda de Google.

Y, por supuesto, el script anterior es solo un ejemplo, a efectos ilustrativos, no un script de spam realmente funcional.

Y ya sabes, cuídate de los spammers, que en el mejor de los casos llenen tu bandeja de Akismet.

Etiquetas: programacion, tutoriales, trucos, wordpress com, wordpress org

47 Javascript plugins

acadio — Tue, 23 Sep 2008 11:51:26 +0200

Por acadio en Blog Xcitingart el 23 de septiembre de 2008 a las 11:51:26

En webdesignerwall encuentro un gran recopilatorio de 47 Javascript Plugins. Ideal para construcción de páginas web y ahorro de mucho tiempo para efectos especiales:

Pop up de ventanas y zoom

Galerías

Carruseles

Sliders

Pestañas

Scrolls animados

Tooltips

Acordeones

Sustitución de texto en flash e imágenes

Switchers de la hoja de estilos

Estilo de Formularios

Validación de formularios

Javascript in Modern Web Design

Etiquetas: scripts

Como poner citas aleatorias en tu web

Xana — Mon, 29 Sep 2008 14:08:09 +0200

Por Xana en La Buhardilla Pixel el 29 de septiembre de 2008 a las 14:08:09

Como poner citas aleatorias en tu web… Con este sencillo scrip puedes poner en tu sitio un número de citas, refranes, etc.

Click para ver el codigo...

Si quieres que aparezca en el body escribe lo siguiente….

¡ojo!

puedes configurarlo para que aparezca donde tu quieras, en una table, en un div, en un iframe, en un alert, en fin ….

tan solo comentar que puedes ir añadiendo mas citas, todas las que quieras, tan solo, en las nuevas citas, escribe…

Quotation[5] = “Cuanto más aprendo, mas ignorante me siento”;

Quotation[6] = “Creo que algún día tiraré la toalla :-(”;

y así sucesivamente con el 7, el 8, el 9, etc.

Compartelo:

Entradas relacionadas

Etiquetas: actualizaciones, tips, html, novedades, scripts

Un original efecto rollover para texto

Oloman — Tue, 07 Oct 2008 23:12:46 +0200

Por Oloman en Oloblogger el 07 de octubre de 2008 a las 23:12:46

En www.scrollovers.com han ideado un script para aplicar un simpático efecto para tus enlaces con un resultado que se puede ver en esta página demo.

Como habrás podido comprobar, el enlace cambia de color al pasar por él, pero al mismo tiempo, hace un scroll vertical del texto, que queda como muy resultón.

Para poder usarlo, primero hay que instalar después de ]]></b:skin> el siguiente formato CSS y la llamada al script:

El primer color (#200091) es el del enlace normal y el segundo (#79001A) el que se mostrará al pasar el cursor. Podeis cambiarlo sin problemas por los que se ajusten a vuestro diseño.

Una vez hecho lo anterior, sólo tendrás que añadir la clase y el tipo scrollover al enlace en que quieras que aparezca el efecto. El ejemplo del principio se ha redactado así:

<a href="#" class="scrollover" type="scrollover">PRUEBA EL EFECTO AQUI</a>

Aunque me parece que ya queda bastante bien tal cual viene, también se pueden cambiar otros parámetros. Para eso teneis que modificar ciertas variables en el fichero scrollover.js:

scrollovers_ScrollSpeed: la velocidad con que se produce el scroll.
scrollovers_ScrollDownOnMouseOver: para invertir el sentido del movimiento, cambia a "false"
scrollovers_TypeName: si dejas esta variable con un entrecomillado vacío, no tendrás que indicar en el enlace el tipo scrollovers, porque se aplicará el efecto a todo tipo de enlace. Ojo con las imágenes.

Si haces esto, no tendrás más remedio que guardar el fichero modificado en tu propio alojamiento. En cualquier caso, es conveniente hacerlo por si desaparece la fuente original o simplemente por agilizar la carga. Puedes bajarlo desde este enlace.

No lo he probado, pero el autor comenta que es válido para Firefox 2.0, Internet Explorer 5.5-6-7, Safari 3 (Windows) Y Opera 9. A mí no me ha dado problemas en ninguno de los dos primeros.

Etiquetas: dise, scripts

Script para crear un buscador de dominios libres

Juanguis — Fri, 20 Jun 2008 15:41:18 +0200

Por Juanguis en Punto Geek el 20 de junio de 2008 a las 15:41:18

Max’s Whois es un script muy útil que te permite instalar un buscador de dominios libres gratis. El buscador funciona haciendo un whois a cada dominio y luego indica si el mismo está libre o no. Lo bueno es que soporta varios tipos de domonios, como lo son los COM, NET, ORG, INFO, NAME, US, BIZ, CA y TV.

Su instalación es muy sencilla, para decirlo de alguna manera es Plug & Play, lo subimos al servidor y listo, ya esta funcionando. Creo que dándole un poco de estilo con CSS pueden dejarlo muy original.

Pueden ver un demo del script en total funcionamiento desde aquí, y quédense tranquilos que va a quedar online por mucho tiempo por si lo quieren seguir usando.

ShareThis

Etiquetas: scripts

Nube de etiquetas 3D. Blogumus

Oloman — Mon, 22 Sep 2008 14:51:56 +0200

Por Oloman en Oloblogger el 22 de septiembre de 2008 a las 14:51:56

La había visto en algún blog y me gustó mucho, pero no había tenido tiempo de averiguar dónde conseguir el SCRIPT. La verdad es que prácticamente lo había olvidado, pero el otro día dándome una vuelta por El Escaparate de Rosa, encontré que publicado un post sobre como instalar la susodicha. Puedes probar en la imagen adjunta para apreciar el efecto.

Por cierto, todo lo que no encontreis aquí, seguro que lo teneis en el espacio de Rosa. No recuerdo si ya lo he dicho, pero por si acaso: El escaparate fue uno de los sitios que más me ayudó a empezar en esto de los blogs. Ahora ha sido todo un orgullo que 22 meses después, Oloblogger sea motivo de cita allí. Ya sólo me falta que Vagabundia -otro de mis profesores de cabecera- encuentre aquí, algún día, algo que le guste tanto como para comentarlo.

Volviendo al tema, el código para esta nube de tags que se publica en Blogger Buster está basada en un SCRIPT de un tal Roy Tanck. El efecto conseguido es muy atractivo visualmente y consigue embobarte un rato mientras pasas el puntero arriba y abajo viendo como se mueve. También podeis encontrar -en inglés- un código alternativo para el caso de que no os funcione el que aquí se reproduce. Con mi version de explorer, sólo funcionó el segundo.

El código y las intrucciones para su instalación y personalización, las podeis ver pinchando en el dibujito.

Etiquetas: artilugios, scripts

Problemas con posts aleatorios

Oloman — Wed, 01 Oct 2008 01:44:17 +0200

Por Oloman en Oloblogger el 01 de octubre de 2008 a las 01:44:17

A través de un correo, ayer me avisaron de que el botón para acceder a una entrada al azar, no funcionaba bien. Exactamente, lo que ocurría era que en lugar de ir a una entrada del blog, nos llevaba a un comentario en concreto dentro del feed de comentarios. Eso sí, lo hacía cojonudamente porque también era de forma aleatoria.

Pero en fin, como no era de eso de lo que se trataba, he logrado encontrar la fuente original del script y resulta que ya habían resuelto el problema. Al parecer, algún cambio en el sistema de feed ha sido el origen de todo.

Este es el nuevo código para la barra lateral, que habrá que poner en lugar del que se indicó en la entrada del 26 de Junio. Aunque no me parece necesario, si quereis poner el artilugio en la plantilla, en Phydeaux3 encontrareis cómo hacerlo:

<div id="myLuckyPost"></div>
<script type='text/javascript'>
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href;
}
}
}
function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<a href="#random" onclick="feelingLucky()" title="Entrada al azar">Entrada al azar</a>

Aunque parezca lo contrario, el código no es muy distinto del anterior ya que sólo se ha incorporado una función más. Lo que ocurre es que en la otra ocasión se puso del tirón.

Igual que entonces, se puede incluir una imagen a continuación de la frasecita "Entrada al azar" o en lugar de ella.

Etiquetas: artilugios, trucos, promocion, scripts

Script gratuito para crear tu hosting de imágenes

Juanguis — Thu, 05 Jun 2008 03:31:11 +0200

Por Juanguis en Punto Geek el 05 de junio de 2008 a las 03:31:11

A partir de hoy voy a innaugurar una nueva categoría en el blog donde publicaré scripts gratuitos para diversos usos, normalmente van a ser para montar herramientas propias en sus servidores, como en este caso, un hosting de imágenes, algo que no se puede bancar cualquier servidor, pero el que tenga los recursos lo puede hacer.

El script en cuestión es de Scripteen, que originalmente estuvo a la venta, pero ahora está libre para que cualquiera lo pueda descargar y usar. Algunas de las caracterísitcas que podemos destacar de este script son:

Interfaz muy agradable para el usuario
Listo para incluir publicidad con alto CTR
Multi-upload mediante AJAX
Subida de imágenes desde internet, mediante la URL
Generación de thumbnails automáticos
Registración de usuarios para crear galerías
Y un largo etcétera

Pueden ver un demo del script funcionando en Zemgy. Y para descargarlo tienen que seguir este link, Scripteen Free Image Hosting Script.

ShareThis

Etiquetas: scripts

Entrada al azar

Oloman — Wed, 25 Jun 2008 18:51:08 +0200

Por Oloman en Oloblogger el 25 de junio de 2008 a las 18:51:08

Hace tiempo que quería poner un botón para mostrar un post al azar, pero los scripts que iba viendo por ahí requerían instalar librerías externas, suscribirse a marcadores sociales, crear una relación completa de entradas, tocar la hoja de estilo y engorros similares.

Este pequeño artilugio permite a los lectores de vuestros respectivos espacios, ver entradas antiguas pero que pueden seguir siendo interesantes y que, sin este sistema, probablemente permanecerían en el pozo del olvido. En cierta forma, este sistema se puede considerar un método más de autopromoción.

Casualmente he encontrado en el blog de MissMole esta utilidad pero con un código muy sencillo de implementar. Tanto como que sólo se trata de añadir un nuevo Elemento de Página en nuestra barra lateral y copiar el código que a continuación facilitamos:

<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; window.location = entry.link[0].href;} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Click <img src="http://img368.imageshack.us/img368/4980/dadosbut7.gif">'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

La parte marcada en negrita es la que podeis cambiar, sustituyendo la palabra Click por la frase que os parezca y mostrando vuestra propia imagen sustituyendo la URL de la que aquí se ve por otra. Para quitar la imagen y dejar sólo texto, hay que eliminar toda la expresión <img src="http://img368.imageshack.us/img368/4980/dadosbut7.gif">

Si quereis usar esta misma imagen pero con fondo negro, la URL sería http://img368.imageshack.us/img368/6863/dadosmy1.gif

Etiquetas: artilugios, trucos, promocion, scripts

Skin para NSV Player - Shoutcast

Roberto Jimenez — Thu, 29 May 2008 23:12:29 +0200

Por Roberto Jimenez en power.org.mx el 29 de mayo de 2008 a las 23:12:29

Desde el dia de ayer me puse a trabajar en rediseñar el reproductor de E. Crispen, el cual es un reproductor para NSV (Video por medio de un Servidor Shoutcast). Esto con la noticia de que pronto tendremos un nuevo release con soporte para iPod touch y para IPhone de los servidores de Shoutcast.

Puestas las cartas sobre la mesa me dispuse a trabajar y el resultado pues fue como lo queria un diseño fresco con respecto al anterior que se veia un poco fuera de tono.

Dentro del archivo adjunto a este artículo encontrarán la plantilla modificada para poder ser utilizada dentro de su sitio web en la cual solo deberan modificar :

var leakurl = "http://direccion:puerto/;stream.nsv";

Y listo a Disfrutarlo

Demos : Reproductor Antiguo | Reproductor con Skin

Descargar Skin para NSV Player

Nota: Este Skin/Plantilla es exclusivo para Internet Explorer.

Etiquetas: descargas, scripts, crispen, nsv, player

Fondo del blog cambiante

Oloman — Thu, 21 Aug 2008 22:03:27 +0200

Por Oloman en Oloblogger el 21 de agosto de 2008 a las 22:03:27

Como lo de generar frases aleatorias e imágenes aleatorias ya lo tenemos visto, ahora vamos a explicar como generar un fondo de página de manera aleatoria. Cada vez que accedamos a la página o que refresquemos, aparecerá un fondo distinto.

En ocasiones sólo sirve para volver un poco locos a los lectores, pero si se utilizan imágenes con cierta homogeneidad en los tonos, quizás puede ser interesante su aplicación en determinados casos.

El script está basado en una matriz donde debemos introducir las direcciones de las imágenes a mostrar de fondo. Si se desean más de tres, habrá que añadirlas donde se indican, poniendo entre los corchetes el siguiente número que toque. Luego, una función genera un número aleatorio hasta el máximo de la longitud de la matriz. Por último, se expresan las instrucciones para aplicar el fondo según el número generado.

En esta ocasión, hay que buscar la etiqueta </head> y justo antes de ella, teclear (o copiar), todo este código:

La forma de mostrar la imagen es configurable cambiando REPEAT y CENTER por otros atributos como NO-REPEAT, REPEAT-X o REPEAT-Y, para el primero primero, o LEFT (RIGHT) junto con TOP (BOTTOM) para el segundo.

Etiquetas: imagenes, trucos, scripts

Interfaces PHP 5

Carlos Montalvo — Wed, 10 Sep 2008 04:27:42 +0200

Por Carlos Montalvo en CalinSoft el 10 de septiembre de 2008 a las 04:27:42

Al contrario que las clases abstract, que proporcionan un medio para expresar conceptos abstractos en programación, las interfaces se han diseñado para asegurar la funcionalidad dentro de una clase. Específicamente, las interfaces son medios para definir el conjunto de métodos que debe tener una clase para implantar dicha interfaz. Para utilizar las interfaces, deben declararse con la palabra clave interfase.



interface printable

{

	public function printme();

}

Las interfaces, para ser útiles, deben implantarse mediante una o más clases. En el ejemplo hemos definido la interfaz printable, que estipula que cualquier clase que implante una interfaz el método printme(). Para crear una clase que implante una interfaz como ésta, utilizamos la palabra clave implements en la definición de clase, seguida por una lista de interfaces implantadas.



class Integer implements printable

{

	private $value;

	public function getValue(){

		return (int) $this->value;

	}



	public function printme(){

		echo (int) $this->value;

	}

}

Hemos modificado la clase Integer original del entrada anterior para implantar la interfaz printable definida en el primer ejemplo. Como clase que implanta esta interfaz, se asegura efectivamente que la clase Integer va a proporcionar los métodos definidos por la interfaz.

Ahora que hemos definido una clase que implanta una interfaz, podemos utilizar este hecho dentro de nuestro código para asegurarnos de que cualquier función o método que requiera determinada funcionalidad de una clase la tendrá disponible desde la clase sin comprobar el nombre de clase específica utilizando la indicación de tipo o el operador instanceof. En su lugar, podemos utilizar estas técnicas para especificar la interfaz printable como muestra el siguiente ejemplo.



interface printable

{

	public function printme();

}



abstract class Number

{

	private $value;

	abstract public function value();



	public function reset(){

		$this->value = NULL;

	}

}



class Integer extends Number implements printable

{

	private $value;

	function __construct($value){

		$this->value = $value;

	}



	public function getValue(){

		return (int) $this->value;

	}



	public function printme(){

		echo (int) $this->value;

	}

}



/* Creamos una funcion que requiera de la interfaz printable*/

function printNumber(printable $myObject){

/* Si se llama a esta funcion, podemos estar seguros de que tiene un método printme()*/

	$myObject->printme();

}



$inst = new Integer(10);



printNumber($inst);

Hemos utilizado las interfaces para asegurarnos de que la función printNumber() siempre va a recibir un objeto que tiene un método printme().

Por tu preferencia puedes ser el primero siempre

Entradas Relacionadas:

Clases y Métodos abstractos en PHP 5

Scripts 09/04

Definiciones de POO

Convertir Array de datos en Objeto y viceversa (PHP)

Comenzando MVC con php

Etiquetas: actualidad, php5, programacion, scripts

Cuenta atrás para una cierta fecha

marycarmeneh — Tue, 16 Sep 2008 23:24:58 +0200

Por marycarmeneh en Conocimientos Web el 16 de septiembre de 2008 a las 23:24:58

El código para insertar en tu página es el siguiente:

<HTML>

Ejemplos Javascript: ejemplo práctico

Con este código lo que saldrá en tu página web será:

Faltan -106 días para Fin de Año

Si quieres que haga el cálculo para otra fecha tendrás que cambiar, donde pone:

document.write(”Faltan “ difference ” para Fin de Año“) , la palabra Fin de Año la puedes sustituir por el 31 de diciembre, por ejemplo

y en countup(2008,12,31) poner la fecha que desees, de forma (año,mes,día)

Comparte este artículo

Etiquetas: scripts

Iconos por categoria en cada post

Oloman — Thu, 18 Sep 2008 02:48:13 +0200

Por Oloman en Oloblogger el 18 de septiembre de 2008 a las 02:48:13

En las bitácoras, está bastante generalizado el uso de imágenes acompañando el texto de las entradas. Como nos gusta que cada imagen tenga relación con el tema, pues no tenemos más remedio que irlas añadiendo "a mano".

Ahora bien, para cierto tipo de diseños, puede ser interesante ilustrar el comienzo de una entrada, con una imagen tipo icono. Esta imagen sería fija para todas las entradas que, por ejemplo, tuvieran la misma etiqueta (categoría). Al tiempo, servirían de enlace rápido a cada categoría. Como segunda opción, también podemos diseñar otro tipo de imágenes más grandes y acompañar nuestros post con ellas de manera fija, pero en función de la etiqueta temática. En una entrada anterior, ya se vió como hacer una imagen fija para cada post.

Para conseguir esto de manera automática, se puede utilizar la misma idea que explicamos anteriormente para colocar imágenes personalizadas para cada autor en un blog colectivo. Habría que colocar este código antes del </head>

<script type='text/javascript'>
function imagenetiqueta(etiqueta) {
imagenes = new Array()
imagenes[0] = ""
imagenes[1] = "<img src='URLimagenETIQUETA1' style='float:left;display:block;border:solid 1px;' title='Categoría: ETIQUETA1'/>"
imagenes[2] = "<img src='URLimagenETIQUETA2' style='float:left;display:block;border:solid 1px;' title='Categoría: ETIQUETA2'/>"

if (etiqueta == "ETIQUETA1")
{document.write(imagenes[1]);}

if (etiqueta == "ETIQUETA2")
{document.write(imagenes[2]);}

}
</script>

Las URLimagenETIQUETAX y ETIQUETAX, tienen que ser sustituidas por vuestros propios dibujos y etiquetas, respectivamente. Una vez más, tened cuidado con poner el nombre de las etiquetas literalmente, teniendo en cuenta mayúsculas y minúsculas. Si contienen acentos u otros caracteres, copiar la palabra con todos los símbolos que aparecen en la barra de direcciones, cuando se accede a una categoría desde el enlace. Por ejemplo, Diseño = Diseño
Más adelante (con los artilugios expandidos), buscamos el sitio dónde queremos colocar los iconos e insertamos:

<div style='height:40px;'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagenetiqueta("<data:label.name/>");</script></a></b:loop></div>

La altura en pixels (40px) del DIV, habrá que cambiarlo por la que tengan vuestras imágenes.

Para una sola imagen, esta última parte del código tendría que ser de esta otra manera, pero sólo cogería la primera etiqueta que leyera. Además, el STYLE del SCRIPT presentado en primer lugar, tendría que ser adaptado para que se "encajara" en el texto, quitando las etiquetas <div> y </div>

<div style='height:40px;'><a expr:href='data:label.url' rel='tag'><script type='text/javascript'>imagenetiqueta("<data:label.name/>");</script></a></div>

Etiquetas: blogger, trucos, dise, scripts

Cursor con efecto Texto girando

marycarmeneh — Sun, 21 Sep 2008 22:05:18 +0200

Por marycarmeneh en Conocimientos Web el 21 de septiembre de 2008 a las 22:05:18

Código Javascript:

Colocar el código entre las etiquetas y

Comparte este artículo

Etiquetas: scripts

Indice automático para tus posts

Oloman — Sat, 27 Sep 2008 13:56:08 +0200

Por Oloman en Oloblogger el 27 de septiembre de 2008 a las 13:56:08

Luzdeluna comentaba hace muuuuuucho tiempo (sigo mal de idem), que tenía la necesidad de encontrar una manera de poder mostrar los títulos de todas las entradas que tenía publicadas, a modo de índice. Como tiene la tira (más de 1.000) lo de hacerlo a mano tenía mala pinta, por lo que preguntaba como hacerlo de una manera automática.

La verdad es que después de mucho buscar, sólo he encontrado un sistema bueno en Beautiful Beta, publicado hace ya ¡17 meses! y, cómo no, traducido y explicado hace tiempo por Rosa y J.Miur.

Más que bueno, es espectacularmente bueno, porque además de mostrar el contenido deseado, permite ordenar las entradas por el título del post, por su fecha e incluso filtrarlas por etiquetas (categorías).

Seguramente, lo mejor para no cargar mucho todas las páginas del blog, sea crer una entrada con fecha anterior e instalar allí todo el código. De esta manera, el SCRIPT sólo se ejecutará cuando se cargue esa página y no todas. Evidentemente, para que el usuario pueda acceder a esa página, habrá que poner algún botón, imagen o enlace de texto, que lleve allí. VER EJEMPLO.

Dicho esto, el código que habría que poner en la entrada sería este:

<table align="center"><tr><td><div id="toc"></div><div id="toclink"><a href="javascript:showToc();" id="imgTocLink">Indice de entradas</a></div><br />
<script src="http://b49dxw.bay.livefilestore.com/y1pVqzRsj2FLlbf6Z3LWGfxR2MxLDC6qcs8c_3yuog7Y9iBKV8dLmkRtMCiSlAoQ8P3MTQ5PY5sEKxW13lPSZ32vQ/blogtoc_esp.js"></script>
<script src="http://TUDIRECCION.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"/><br />
<script src="http://TUDIRECCION.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=200&callback=loadtoc"/><br />
</td></tr></table>

Hay que sustituir TUDIRECCION por vuestra dirección. El fichero Javascript (.JS) que contiene el código principal, conviene que lo alojeis en vuestro propio servidor de ficheros para un acceso más rápido. Luego sustituis la dirección marcada por la vuestra. Si todos cargamos desde la misma dirección, la cosa o se ralentiza o se bloquea del todo. En este enlace podréis descargarlo.

Observad, que los bloques de texto marcados en negro y en gris son prácticamente iguales. En el primero, los valores inicial (start-index) y final (max-results), van del 1 al 100. Para ver 200 entradas, hay que añadir la parte en gris (101-200). Cada 100 post, teneis que añadir un trozo de código igual, continuando la numeración.

Ahoro sólo queda darle formato a la tabla para que salga como más os guste. Para ello hay que colocar después de la etiqueta <head> o justo antes de </head>, las siguientes clases CSS y entre los corchetes los atributos. Como Vagabundia lo ha redactado muy bien y no veo la forma de mejorar la explicación, lo copipasteo:

Al final de la entrada correspondiente de Beautiful Beta, podeis encontrar un ejemplo de formato ya relleno. Podeis copiarlo, ver como queda y luego modificar los valores de color, ancho, fondo, etc.

Existe otra manera de colocar el índice como un artilugio. Se trata de poner un enlace en la barra lateral que, al pincharlo, desplegará delante de la primera entrada todo el contenido de vuestro blog. El código es prácticamente el mismo y la forma de implantarlo está explicada en El escaparate de Rosa.

Etiquetas: blogger, scripts

Convencer a los visitantes de tu sitio mejorar sus navegadores web

Xtreme — Tue, 29 Jul 2008 21:40:30 +0200

Por Xtreme en XeroBlog el 29 de julio de 2008 a las 21:40:30

Los navegadores antiguos (en versión) no sólo son inseguros, sino que también son un problema para los diseñadores web, pues tienen que diseñar sitios al mismo tiempo que lo hacen para diferentes versiones en mente.

Si te gusta ayudar a las personas a mejorar sus anticuados navegadores, Pushup ha creado un script que puede ser fácilmente integrado en cualquier blog o sitio web.

Este JavaScript comprueba la versión del navegador del visitante y le muestra un vínculo de actualización en caso de que una nueva versión esté disponible - ver imagen.

Tu visitante puede hacer clic en el vínculo para instalar la nueva versión de su navegador, o elegir ser recordado después de un tiempo que tu especifiques.

Enlace | PushUpTheWeb.com: Browser detection and Upgrading

También te podría interesar...

Etiquetas: recursos, javascript, navegadores, scripts