Editor visual de estilos CSS para texto: CSSTXT

Vía Genbeta encuentro CSSText, un editor visual de CSS para texto. Permite crear estilos de texto visualmente marcando y desmarcando opciones, al estilo de Form Style Generator.
Por : David           comentarios 1

String tweetify con jQuery y Mootools

Javascript

David | 6/10/2009

Logo de Tweeter
Tweetefy es un término inglés perteneciente al argot informático de la Web 2.0 que, en términos de desarrollo web, viene a significar algo así como “Tweetificar, o convertir algo al estilo de Tweeter”. Sirver para convertir un texto plano al estilo de tweeter, esto significa que todos los nombres que empiecen por “@” serán interpretados como usuarios de Tweeter y se enlazará a su perfil. Si alguna palabra es precedida por una “#”, será enlazada a la búsqueda de Tweeter por ese término y si se muestra alguna URL, será sustituida por un enlace a esa URL. Vamos lo que hace Tweeter para mostrar los tweets en su página.

Hace poco escribí un pequeño artículo donde se hablaba sobre como obtener los últimos tweets mediante el Google Feed API y mostrarlos. Para completarlo me hubieran venido muy bien estos snipetts de jQuery y Mootools que sirven para hacer tweetify sobre los strings.

jQuery

El primero es para jQuery y me lo encontré en CSSTricks.

Función tweetify para jQuery


$.fn.tweetify = function() {
	this.each(function() {
		$(this).html(
			$(this).html()
				.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>')
				.replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>')
				.replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>')
		);
	});
	return $(this);
}

Uso de la función tweetify en jQuery


$("p").tweetify();

Mootools

Este código me lo encontré en el blog de David Walsh, y se trata de una ampliación de la clase String de Mootools.

Método tweetify en Mootools


//implement
String.implement({
	tweetify: function() {
		return this.replace(/(https?:\/\/\S+)/gi,'$1').replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>');
	}
});

Uso del método tweetify en Mootools


var original = '@davidwalshblog I love your #Mootools LazyLoad plugin!  http://davidwalsh.name/lazyload';
var tweetified = original.tweetify();

Resultado

En los dos casos, después de aplicar tweetify se pasaría de un texto así:


@nosolocodigo Tweet de prueba, mi blog: http://nosolocodigo.com/ #lol

A un texto así:


<a href="http://twitter.com/nosolocodigo ">@seanhood</a>  Tweet de prueba, mi blog:
<a href="http://nosolocodigo.com/">http://nosolocodigo.com/</a>
<a href="http://search.twitter.com/search?q=%23lol">#lol</a>


Panel de login ocultable con jQuery y Mootools

Javascript, Recursos

David | 6/10/2009

sliding-login-panel

En Web-kreation han compartido un panel de login ocultable, muy útil para los sitios donde se disponga de poco espacio en el diseño. Está disponible tanto para Mootools 1.2 como para jQuery.

Puedes ver una demo en Web-kreation o descargar los ficheros para implementarlo. Es muy sencillo de adaptar a nuestras necesidades, y lo mejor es que se encuentra disponible para los dos principales frameworks Javascript.

Algunos ya lo han aprovechado para crear plugins para Wordpress a partir de este código:


Popups elegantes en Joomla usando Mootools

Frameworks, Javascript, Joomla

David | 5/10/2009

Una ventana modal es el popup de la Web 2.0. Además de ser más usable y rápido, es más bonito. Joomla incorpora Mootools como framework Javascript en el core permitiendo crear popups en forma de ventana modal de una manera muy sencilla y homogénea. De hecho, cuando se programa en Joomla es recomendable usar todas las características del core Joomla para que todo quede con un “look” más consistente (Cómo usar el datepicker de Joomla).

Para poder usar los comportamientos que incorpora la librería Mootools en Joomla hay que incluir la siguiente línea de código en la primera línea del fichero index.php de tu template. Si estás desarrollando un componente, entonces añádela en el fichero view.html.php.


<?php JHTML::_( 'behavior.modal' ); ?>

JHTML en el template de Joomla
Esta línea de código genera el include de la librería Mootools y la librería Squeezebox, encargada de generar la ventana modal. Es importante usar esta función PHP ya que de esta forma te aseguras que no se cargue varias veces repetida la librería por diferentes extensiones. Una vez incluidas las librerías basta añadir la clase modal a los enlaces que queremos que generen una ventana modal. Por ejemplo:


<a class="modal" href="images/stories/imagen_grande.jpg">
    <mg src="images/stories/imagen_pequena.jpg" border="0" alt="Una imagen" />
</a>

Ventana modal en Joomla
Con el código introducido en este bloque se mostraría por pantalla la imagen pequeña, y al hacer click sobre ella aparecería una ventana modal con la imagen grande en alta resolución.

Se pueden añadir más opciones al enlace, por ejemplo:


<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="http://www.nosolocodigo.com"> Popup con iframe a nosolocodigo.com </a>

Ventana modal en Joomla con iframe
Con el código introducido en el bloque de arriba se mostraría una ventana modal con un iframe que puede apuntar a cualquier sitio. En este caso está apuntando a la página principal de este Nosolocodigo, pero si estás desarrollando una aplicación podría apuntar a una vista raw, o una vista html con el parámetro tmpl=component. Vamos, que puede apuntar a donde sea. Las opciones se definen en el atributo rel del enlace, creo que no hace falta más explicación.

Esto está muy bien para lanzar las ventanas desde un enlace, haciendo click sobre él, pero ¿y si queremos lanzar las ventanas usando una función Javascript? Pues entonces sigue leyendo..

En caso de que lo que se quiera sea lanzar la ventana modal desde Javascript puedes usar la siguiente función:


<a class="modal" id="popup" rel="{handler: 'iframe', size: {x: 550, y: 450}}" href="http://www.nosolocodigo.com"></a>

<script>
      window.addEvent('domready', function(){
	   window.addEvent('load', function(){
	         SqueezeBox.fromElement($('popup'));
	   });
      });
</script>

Esta función se ejecutaría automáticamente en el evento load y provocaría que en el enlace con id popup se mostrará una ventana modal exactamente igual que si hiciéramos click sobre el enlace. Igual que se ha utilizado el evento load se podría usar cualquier otro evento.

Por último, si quieres lanzar una ventana modal instantáneamente sin haber definido previamente ningún enlace en el documento HTML, he implementado esta función que he encontrado por los foros de Joomla.org y que me funciona bastante bien. La función hay que definirla previamente para después usarla. Puedes crear un fichero Javascript y añadirlo al head del template usando el API de Joomla.


  SqueezeBox.loadModal = function(modalUrl,handler,x,y) {
       this.initialize();      

       var options = $merge(options || {}, Json.evaluate("{handler: '" + handler + "', size: {x: " + x +", y: " + y + "}}"));      

       this.setOptions(this.presets, options);
       this.assignOptions();
       this.setContent(handler,modalUrl);

   };

Una vez añadida la definición del método loadModal, para usarlo, simplemente hay que llamarlo de la siguiente forma:


window.addEvent('domready', function() {
         SqueezeBox.loadModal('http://www.nosolocodigo.com','iframe',650,450);
 });

Como puedes ver, se puede dejar el template preparado para introducir popups tanto para imágenes como para enlaces externos/internos. Si además deseas programar extensiones en Joomla y quieres más, dispones de toda la potencia del framework Mootools para desarrollar tu aplicación.


Qué hay D-news, videomagazine de noticias para diseñadores

Qué hay D-news logoQué hay D-news es un videomagazine que se emite semanalmente donde se tratan temas sobre diseño, tecnología y recursos web. Muy bien presentado por Daniela Henao, y con una buena producción. Al verlo me he quedado con ganas de más, pero eso es buena señal, además en el último capítulo (1×28), sale Nosolocodigo.
Por : David           comentarios 2

Mostrar tweets relacionados con Realtime Related Tweets

Javascript

David | 2/10/2009

Realtime-Related-Tweets-BarHoy he descubierto un plugin de jQuery que es verdaderamente útil. Se trata de Realtime Related Tweets, un plugin con el que, según los tags del artículo que se este visualizando, se mostrarán los últimos tweets del usuario que quieras. El plugin obtiene los tags de los enlaces con el atributo rel=”tag”.
Características:

  1. Muestra los tweets relacionados con el post según los tags de el artículo.
  2. Muestra tu línea de tiempo de twitter, relacionado con el post o no, según se quiera.
  3. Devuelve solo tweets con enlaces o no, según se configure.
  4. Limita los tweets a 1 o más usuarios. (from/to/mention users!)
  5. Limita los tweets por geolocalización.
  6. And y Or en las busquedas.
  7. Efectos de transicion como opacity, height, font-size.
  8. Fácil personalización por CSS.
  9. Muestra o esconde algunas partes como el avatar, nombre del author, fecha.
  10. Implementación mediante Javascript o mediante un autoload usando un fiv con la clase “related-tweets”.

Modo de empleo

Con Autoload

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>
 
<div class="related-tweets">Cargando..</div>

Autoload con opciones

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js" type="text/javascript"></script>
 
<div class="related-tweets" options="{
   debug:true
   ,from_users:'TechCrunch,mashable'
   ,links_only:1
   ,animate:'fontSize'
   ,enter_time:500
}">Cargando..
</div>

Sin Autoload

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://realtime-related-tweets-bar.googlecode.com/files/jquery.relatedtweets-1.0.min.js"></script>
 
<script type="text/javascript">  
   $(document).ready(function(){
      $('#rrt').relatedTweets({
         debug:true
         ,from_users:'Mike_More'
         ,status:1
         ,realtime:0
         ,n:20
         ,show_avatar:0
         ,show_author:0
      });
   });
</script>
 
<div id="rrt">Cargando..</div>

Se puede obtener más información en more tech tips o en la página de Google Code donde se aloja el proyecto. También se puede ver un ejemplo en la página de Google Code.


Herramientas para webmasters de Bing

Al igual que las Webmastertools de Google, Microsoft ha lanzado sus herramientas para webmasters de Bing. Muy recomendable configurarlas adecuadamente, ya que parece que Bing va a ser un serio contendiente para Google, ahora que va a ser el motor de busquedas de Yahoo. Fernando Tellado nos proporciona más información.
Por : David           Comentarios desactivados

10 errores de seguridad que debes evitar en Joomla

Joomla

David | 28/09/2009

Ponle un candado a JoomlaLa seguridad es un aspecto muy importante a la hora de mantener un sitio web. ¿De que sirve gastar tu tiempo y dinero en algo, si cualquiera te lo puede tirar por tierra en cualquier momento? Nunca se está los suficientemente seguro, aunque si no eres un maniático de la seguridad seguramente te bastará con unos cuantos consejos que hará la vida más difícil a los scriptkiddies que merodean la red buscando alguien a quien fastidiar. Por lo tanto, si te estimas mínimamente tu trabajo, una vez hayas instalado Joomla es conveniente que lleves a cabo unas cuantas comprobaciones de seguridad.

Joomla es un CMS open source, con sus ventajas y sus inconvenientes. El hecho de que hayan muchos ojos mirando nuestro código no siempre es bueno desde el punto de vista de la seguridad. Además, muchas de las extensiones que instalamos las damos por seguras cuando realmente no sabemos si sus desarrolladores han usado técnicas de programación seguras.

En RSJoomla han elaborado una lista de los errores de seguridad más comunes que la gente suele cometer cuando instala Joomla. Los he traducido y puesto aquí ya que pienso que pueden resultar de utilidad para mucha gente. Ahí van:

  1. NO usar siempre la última versión de Joomla
    Los desarrolladores de Jooma lanzan periódicamente nuevas versiones con mejoras de seguridad y correcciones de bugs que se van detectando por la comunidad, por lo tanto es imprescindible estar siempre actualizado a la última versión, ya que si no lo haces, todo el mundo sabrá que fallos de seguridad tiene tu código y serás un blanco fácil. Otro punto importante es tener una buena política de creación de backpus por si algún día tienes un imprevisto, poder restaurarlo todo. Existen extensiones que facilitan la tarea de realiza backups.
  2. NO revisar los permisos de los directorios de Joomla después de instalarlo
    Los directorios que tenga una máscara de permisos mayor de 755 pueden comprometer la seguridad de tu sistema Joomla, dejando una puerta abierta a atacantes que podrán leer o escribir sobre los ficheros de instalación de Joomla, o incluso subir sus propios ficheros. Imagínate que pasaría si alguien lee el fichero configuration.php de tu Joomla…
  3. NO revisar los permisos de los ficheros
    Recomendado usar una máscara de permisos de 644 o más restrictiva. De lo contrario se le están poniendo las cosas demasiado difíciles a los atacantes.
  4. Permitir las subidas de ficheros descontrolada (foros, comentarios, gestion de descargas…)
    Los hackers pueden (y lo harán) utilizar estas aplicaciones para subir scripts maliciosos a tu sitio. Debes permitir el menor número de extensiones posibles y NUNCA, bajo ningún concepto, permitir subir ficheros ejecutables (.php, .php3, .php4, .php5, .phtml). Puedes utilizar RSFirewall! que automáticamente bloquea subidas de ficheros peligrosas y también puede escanear tu sitio en busca de scripts maliciosos o cosas sospechosas en tu sitio.
  5. Dejar los ficheros y directorios importantes accesibles por cualquiera en el directorio público
    Debes proteger ficheros y directorios especialmente sensibles como el fichero configuration.php, el directorio tmp de Joomla, o el directorio log de Joomla. La mejor manera es moverlos a a un sitio no público, es decir, fuera del document root del servidor web. Para cambiar el directorio log hay que dirigirse a Administrator » Site » Global Configuration » System » Path to Log. Para cambiar el directorio tmp hay que dirigirse a Administrator » Site » Global Configuration » Server » Path to Temp-folder. Para cambiar la ruta del fichero configuration.php hay que modificar los ficheros /includes/defines.php/administrator/includes/defines.php, en concreto las constantes:
    define( ‘JPATH_CONFIGURATION’, JPATH_ROOT );
    Si por ejemplo quieres mover el fichero a una carpeta con nombre “seguro” situada en un nivel superior, deberías de hacer lo siguiente:
    define( ‘JPATH_CONFIGURATION’, JPATH_ROOT.DS.’..’.DS.’seguro’ );
  6. NO tener PHP configurado correctamente
    Estas son algunas configuraciones que debes tener en tu servidor para que no se comprometa su seguridad. (Estas configuraciones pueden ser aplicadas editando solamente el fichero php.ini)

    • Deshabilitar register_globals. Desconfiar de las extensiones de Joomla que te pidan habilitar esta opción. Dejando la opción register_globals=ON la seguridad de Joomla se puede ver comprometida. A partir de PHP 4.2.0 esta opción se puso a OFF por defecto, y en PHP 6.0.0 será borrada por completo.
    • Deshabilitar safe_mode, se recomienda deshabilitar esta opción por que causa más problemas que soluciones. En PHP 6.0.0 será eliminada esta opción.
    • Comprobar allow_url_fopen, lo mejor es que no se permita abrir ficheros remotos a un script.
    • Comprobar allow_url_include, esta opción permite incluir ficheros php remotos, y ser ejecutados, en un script. Lo mejor es inhabilitarla.
    • Utilizar disable_functions para deshabilitar algunas funciones que pudieran dejar tu sitio vulnerable. Algunas de estas funciones son: system, shell_exec, exec, phpinfo, etc.
    • Utilizar open_basedir para definir las rutas desde donde PHP tiene permiso para acceder a ficheros mediante funciones como fopen() o gzopen(). Si algún fichero esta fuera de las rutas incluidas en open_basdir, PHP no permitirá abrirlos.

    Se recomienda usar las siguientes configuraciones de PHP:

    • register_globals = OFF
    • safe_mode =OFF
    • allow_url_fopen =OFF
    • allow_url_include = OFF
    • disable_functions = system, shell_exec, exec, phpinfo… (Puedes encontrar más funciones en este enlace)
    • open_basedir=/tu/ruta/a/joomla
  7. Utilizar el usuario “admin”
    Cuando se instala Joomla, este viene con un usuario con nombre “admin” creado por defecto. En su momento salió una vulnerabilidad que utilizaba este usuario para atacar el sistema, y aunque fue corregida, es aconsejable cambiar el nombre del usuario para evitar posibles futuras vulnerabilidades y para evitar posibles ataques de fuerza bruta para averiguar la contraseña del usuario admin. Utilizar el usuario “admin” con una contraseña débil, es una forma de facilitar la faena a los atacantes de nuestro sitio.
  8. Utilizar contraseñas débiles para usuarios del Back-End
    Utiliza contraseñas difíciles de averiguar, no uses palabras comunes, ya que si usas una palabra común, seguramente se podrá obtener mediante un ataque de fuerza bruta. No utilices la misma contraseña para todas tus cuentas. Un buen consejo puede ser utilizar mnemotecnias para recordar fácilmente tus claves. Por ejemplo, para la contraseña “hmlPynee8″ se podría usar la frase, “hola me llamo Pedro y nací en el 82″.
  9. NO utilizar un buen antivirus en tu ordenador
    Tanto en el servidor como desde el que accedes al panel de gestión. Sin un buen software antivirus, tu servidor puede ser víctima de un ataque al servidor FTP, SSH, etc… Tu ordenador personal desde el que accedes al panel de control de Joomla puede ser víctima de un ataque de phishing si no estás protegido debidamente.
  10. Asumir que tu sitio está bien protegido si no se ven signos de ataques
    Lo mejor es estar siempre atento y no confiarse nunca, ya que el día menos pensado puedes ser atacado y quedarte sin tu web. Así que ya sabes, nunca te confies y permanece alerta.
  11. Permitir el listado de directorios
    Este es mío, jejeje. Permitir que alguien liste los directorios de tu sitios es un fallo de seguridad, ya que estas ofreciendo información importante al atacante. Una forma sencilla de evitarlo es incluir un fichero con nombre index.html, con contenido en blanco, en cada directorio, de esta forma se le mostrará este fichero al atacante cuando acceda al directorio, en lugar de obtener el listado completo de ficheros.