Lector RSS realizado con AJAX

Función javascript que realiza petición ajax a una página php que será la que recupere el contenido del RSS:

function showRSS(str){
   if (str.length==0) {
      document.getElementById("rssOutput").innerHTML="";
      return;
  }
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
  } else {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
         document.getElementById("rssOutput").innerHTML=xmlhttp.responseText;
      }
  }
  xmlhttp.open("GET","getrss.php?q="+str,true);
  xmlhttp.send();
}

Contenido de la página php,

//get the q parameter from URL
$q=$_GET["q"];

//find out which feed was selected
if($q=="Google"){
  $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
} elseif($q=="MSNBC") {
  $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
}

$xmlDoc = new DOMDocument();
$xmlDoc->load($xml);

$channel=$xmlDoc->getElementsByTagName('channel')->item(0);
$channel_title = $channel->getElementsByTagName('title')
->item(0)->childNodes->item(0)->nodeValue;
$channel_link = $channel->getElementsByTagName('link')
->item(0)->childNodes->item(0)->nodeValue;
$channel_desc = $channel->getElementsByTagName('description')
->item(0)->childNodes->item(0)->nodeValue;

echo("< p>< a href='" . $channel_link
  . "'>" . $channel_title . " < /a>");
echo($channel_desc . "< /p>");

$x=$xmlDoc->getElementsByTagName('item');
for ($i=0; $i<=2; $i++) {
  $item_title=$x->item($i)->getElementsByTagName('title')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_link=$x->item($i)->getElementsByTagName('link')
  ->item(0)->childNodes->item(0)->nodeValue;
  $item_desc=$x->item($i)->getElementsByTagName('description')
  ->item(0)->childNodes->item(0)->nodeValue;

  echo ("< p>< a href='" . $item_link
  . "'>" . $item_title . "< /a>");
  echo ($item_desc . "< /p>");
}

FUENTE con el ejemplo

Librerías javascript para crear presentaciones

Ahora, además de Microsoft Powerpoint, Keynote u otras aplicaciones conocidas también podemos crear presentaciones con html. Para ello podemos encontrar numerosas librerías javascript pensadas para crear presentaciones por medio de HTML y Javascript.

Te permiten realizar transiciones, pantalla completa o accesos con el teclado entre muchas otras cosas. La principal ventaja que tiene es que al estar realizadas vía web simplemente tendremos que acceder a la URL donde subamos la presentación y no tenemos que asegurarnos de que el ordenador en cuestión tenga instalado el software necesario.
También son ideales para presentar y explicar un servicio a nuevos visitantes de una forma original.

Algunos de ellos son:

– Deck.js: se trata de una bonita biblioteca JavaScript para crear presentaciones HTML.
Mientras que los usuarios avanzados pueden crear presentaciones totalmente personalizadas, hay plantillas y temas para los usuarios novatos que permiten crear una presentación de diapositivas estándar sin ningún esfuerzo.

– Fathom.js: Este es un plugin de jQuery que nos permite crear las diapositivas en HTML, con estilos CSS y controlar la lógica de presentación con JavaScript. La navegación se puede manejar con el teclado, el ratón o el desplazamiento. Permite la definición de un video para sincronizar con la presentación de diapositivas.

– Html5slides: está desarrollada por Google. Cuenta con 2 temas incorporados y soporta 3 diseños diferentes (normal, faux-widescreen, pantalla ancha).

– Dzslides: consiste en un solo archivo HTML5 CSS3 que hace de plantilla para construir las presentaciones. Además, dispone de 2 funcionalidades: incrustar el resultado en otras páginas y mostrar diapositivas con un panel de control.

– Slippy: es una librería de presentaciones HTML realizada con jQuery. Además de navegar por las diapositivas con las siguientes teclas prev-que permite a los usuarios ir directamente a la diapositiva que desee con las teclas numéricas.

– S5: Un popular motor de presentación basada en estándares que tiene todas las características que podemos pedir, incluyendo: auto-escalado de texto, representación incremental, URL única para cada diapositiva, indicador de progreso y mucho más…

Lista de plugins para utilizar en el firefox

1. – Video DownloadHelper
La manera fácil de descargar y convertir vídeos de cientes de sitios similares a YouTube.
También funciona para audio y galerías de imágenes.

2. – Firebug
SFirebug se integra con Firefox para poner una gran cantidad de herramientas de desarrollo a su alcance mientras navegas. Usted puede editar, depurar y monitorear CSS, HTML y JavaScript en vivo en cualquier página web …

3. – Greasemonkey
Este plugin te permite Personalizar la forma en que una página web muestra o se comporta, mediante el uso de pequeños fragmentos de JavaScript.

4. – CacheViewer Continued
Se trata de un plugin para Firefox que permite interactuar con la caché del navegador de forma sencilla. Con CacheViewer Continued puede previsualizar las imágenes, ver los detalles de las entradas de caché, guardar los archivos de la memoria caché en otro lugar, y eliminar los archivos de la caché.

5. – FoxyProxy Standard
FoxyProxy es una extensión Firefox que cambia entre uno o más proxies automáticamente, en base a patrones de la URL. Dicho de otra manera, FoxyProxy automatiza el proceso manual de modificar los parámetros de las Propiedades de Conexión de Firefox. El cambio de servidor proxy depende de la página a cargar y de las reglas de selección definidas por el usuario.

Carácteres Unicode

Incrementar días a una fecha con javascript

Código que muestra una función que devuelve la fecha actual aumentada o disminuida en días dependiendo de los días recibidos como parámetro.

/**
 * Funcion que devuelve fecha actual y fecha modificada n dias
 * Tiene que recibir el numero de dias en positivo o negativo para  
 * sumar o restar a la fecha actual.
 * Ejemplo:
 *  mostrarFecha(-10) => restara 10 dias a la fecha actual
 *  mostrarFecha(30) => añadira 30 dias a la fecha actual
 */
function mostrarFecha(days){
    fecha=new Date();
    day=fecha.getDate();
    month=fecha.getMonth()+1;
    year=fecha.getFullYear();

    document.write("Fecha actual: "+day+"/"+month+"/"+year);
    

    tiempo=fecha.getTime();
    milisegundos=parseInt(days*24*60*60*1000);
    total=fecha.setTime(tiempo+milisegundos);
    day=fecha.getDate();
    month=fecha.getMonth()+1;
    year=fecha.getFullYear();

    document.write("Fecha modificada: "+day+"/"+month+"/"+year);
}

Fuente

JSBin, JSBeautifier y JSFiddle

JSBin es un servicio online que nos permite introducir código HTML, CSS y JavaScript y verificar su funcionamiento. Está pensado para que los desarrolladores puedan trabajar de manera colaborativa.

En http://jsbin.com podemos editar sin dificultades, incluir alguna de las librerías más comunes e incluso, guardar la URL del proyecto y hacerla pública. (Más info.)

JSBeautifier, te organiza y modifica estéticamente tu código Javascript, de modo que este sea más placentero a la vista y siga estándares de formatos de programación.

jsbeautifier.org

JSFiddle, potente herramienta para Javascript y frameworks como JQuery y Prototype.js
Al igual que as anteriores se trata de una herramienta 100% web. Lo que JSFiddle te ofrece es un ambiente de varias ventanas dentro de tu navegador web, en donde en una de ellas puedes escribir HTML, y en otra sentencias de Javascript (como por ejemplo, selectores de JQuery), y después en otra ventana ves el resultado.

Con JSFiddle eliges la versión de la librería que deseas, copias un pedazo de HTML (o utilizas el que te ofrecen por defecto), lo modificas, y escribes tu Javascript para ver si hace lo que esperas que hagas, y listo. Varios minutos se reducen a segundos.

JSFiddle

Patrón Decorator para Javascript

El patrón decorator es un patrón de diseño que permite añadir un comportamiento adicional a un objeto existente dinámicamente.

var JQuery ={
	getNombre:function(){
		return "Pepe"; 
	}
};

//Decorado del objeto con la capacidad de formar un nombre completo
(function($){
        $.test = function(apellido){ 
                      return JQuery.getNombre() + " " + apellido;
        }
})(JQuery);

// Usando la funcionalidad decorada
console.log( JQuery.test("Contreras") );

El resultado obtenido es: “Pepe Contreras”

Patrón Módulo Revelado para Javascript (Revealing Module)

Se trata de uno de los patrones más utilizados y elegantes a la hora de organizar código javascript. Su principal atractivo es que resulta extremadamente útil para conseguir código reusable y, sobre todo, modular.
Consiste en una función que actúa como contenedor para un contexto de ejecución. En su interior, se declaran una serie de variables y funciones que solo son visibles desde dentro del mismo.

if(!es){
     var es = {};
}
if(!es.com){
     es.com = {};
}
if(!es.com.disastercode){
     es.com.disastercode = {};
}


es.com.disastercode.lib = ( function(){
  var prop = 'propiedad';

  var privateMethod = function(){
        return 'método privado';
  }
 
  return {
        publicMethod : f1,
	publicMethod2 : f2
  }
  
  
  function f1(){
        return privateMethod() + prop;
  }
  function f2(){
        return "";
  }
	
})();

var prueba = es.com.disastercode.lib;
console.log(prueba.publicMethod());

El resultado obtenido es: “método privadopropiedad”

Crear un select multiple con checkbox . Utilizando JQuery.

    Green
    Red
    Blue
    Orange
    Purple
    Black
    White

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.attr("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.click(function() {
                if (checkbox.attr("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
            });
        });
    });
};

$(".multiselect").multiselect();

Fuente

Juego de diamantes online

Este juego ha sido realizado bajo las tecnologías DHTML, JQUERY y PHP.

Para su realización se ha optado por reutilizar un proyecto ya existente y que estaba basado en un motor de juego realizado en javascript de tipo Open Source.
Para obtener más información consultar, Open Source Diggy:

http://www.mobilegameengines.com/html5/engines/128-diggy

https://github.com/richtaur/diggy

La dirección es http://diamantebomba.disastercode.com.es.