chichote.com http://chichote.com Sat, 23 Jul 2011 01:33:57 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 El futuro de Google+ http://chichote.com/2011/el-futuro-de-google-plus/ http://chichote.com/2011/el-futuro-de-google-plus/#comments Wed, 20 Jul 2011 01:10:58 +0000 Chichote http://chichote.com/?p=624
  • Google trabaja en el auto fantastico Google trabaja en un automovil que se manejara solo, en...
  • El Apetito de Google La web http://www.scores.org ha publicado una lista de empresas absorvidas...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Hace unos días me preguntaba del futuro de google plus en muchos aspectos, son varios las novedades que la red social del buscador nos trae, entre las que destaco el círculo de amigos, es una manera grafica que se caía de cajón y que a nadie se le ocurrió antes, si la misma palabra lo dice XD.

    Pero me nace una gran duda, como todos sabemos las ganancias del gigante pasan por la publicidad, y si bien es cierto por el momento google plus no tiene publicidad, llegara el momento en que tengan que financiar semejante plataforma.
    Adsense pareciese ser el motor publicitario natural para Google+, por ser la extensión nativa del buscador al igual que adwords, PERO, y aquí viene la pregunta ¿Como harán para no ensuciar la red social con anuncios sin gracia y desaliñados, y muchas veces contrastantes y feos?, en ese punto de vista facebook es mucho mas atractivo a la vista. ¿O será que google implementara algo nuevo?

    ¿Un momento de ocio decanto en la siguiente imagen, como seria google plus ante una posible integración de adsense?

    Dale click a la foto para agrandarla

    Artículos Relacionados:

    1. Google trabaja en el auto fantastico Google trabaja en un automovil que se manejara solo, en...
    2. El Apetito de Google La web http://www.scores.org ha publicado una lista de empresas absorvidas...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/el-futuro-de-google-plus/feed/ 4     Generador de Cajas CSS3, sombras, border redondeados y degrade http://chichote.com/2011/generador-de-cajas-css3-sombras-border-redondeados-y-degrade/ http://chichote.com/2011/generador-de-cajas-css3-sombras-border-redondeados-y-degrade/#comments Fri, 03 Jun 2011 20:53:05 +0000 Chichote http://chichote.com/?p=615
  • Generador de Textos con Sombras CSS3 De la mano de WordpressThemehock.com me llego este tips para...
  • Sombras con CS3 sin imagenes Crea hermosas sombras con CS3 sin necesidad de utilizar imagenes,...
  • Animacion con CSS3 keyframe, sin javascript, sin imagenes Este articulo es una traduccion del articulo publicado por smashing...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>

    Generador de Cajas CSS3

    Varias son las opciones de esta web, entre ellas:

    • Grosor del Borde
    • Color del Borde
    • Fondo de la caja
    • Bordes redondeados
    • Sombras
    • Degrade del Fondo

    Mi Opinion

    Muerte a IE ajjajaja, en 7 y 8 no me funciono, no se si sea yo el problema, pero aunque en la web dice que funciona, a mi no me funciono.

    Demostración

    Fuente

    http://www.visualbeta.es

    Artículos Relacionados:

    1. Generador de Textos con Sombras CSS3 De la mano de WordpressThemehock.com me llego este tips para...
    2. Sombras con CS3 sin imagenes Crea hermosas sombras con CS3 sin necesidad de utilizar imagenes,...
    3. Animacion con CSS3 keyframe, sin javascript, sin imagenes Este articulo es una traduccion del articulo publicado por smashing...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/generador-de-cajas-css3-sombras-border-redondeados-y-degrade/feed/ 0     Generador de Textos con Sombras CSS3 http://chichote.com/2011/generador-de-textos-con-sombras-css3/ http://chichote.com/2011/generador-de-textos-con-sombras-css3/#comments Fri, 03 Jun 2011 20:22:02 +0000 Chichote http://chichote.com/?p=609
  • Generador de Cajas CSS3, sombras, border redondeados y degrade Otro generador mas de Codigo CSS3, esta vez corresponde a...
  • Sombras con CS3 sin imagenes Crea hermosas sombras con CS3 sin necesidad de utilizar imagenes,...
  • Animacion con CSS3 keyframe, sin javascript, sin imagenes Este articulo es una traduccion del articulo publicado por smashing...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>

    Generador de Textos con Sombras CSS3

    Puedes elegir entre 12 prediseños de estilos y 20 fuentes recogidas de Google Fonts

    Demostracion

    Artículos Relacionados:

    1. Generador de Cajas CSS3, sombras, border redondeados y degrade Otro generador mas de Codigo CSS3, esta vez corresponde a...
    2. Sombras con CS3 sin imagenes Crea hermosas sombras con CS3 sin necesidad de utilizar imagenes,...
    3. Animacion con CSS3 keyframe, sin javascript, sin imagenes Este articulo es una traduccion del articulo publicado por smashing...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/generador-de-textos-con-sombras-css3/feed/ 0     Animacion con CSS3 keyframe, sin javascript, sin imagenes http://chichote.com/2011/animacion-con-css3-sin-javascript-sin-imagenes/ http://chichote.com/2011/animacion-con-css3-sin-javascript-sin-imagenes/#comments Thu, 19 May 2011 19:58:37 +0000 Chichote http://chichote.com/?p=602
  • Debug javascript con la consola de Firebug Aburrido de debuggear con alert()?, pero eso ya puedes dejarlo...
  • Generador de Textos con Sombras CSS3 De la mano de WordpressThemehock.com me llego este tips para...
  • Generador de Cajas CSS3, sombras, border redondeados y degrade Otro generador mas de Codigo CSS3, esta vez corresponde a...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Con el uso de animaciones CSS3, los desarrolladores pueden crear animaciones suaves y de fácil mantenimiento, que realizan bien su labor y que no requieren de una gran cantidad de secuencias de comandos.

    En este artículo se cubren todas las partes importantes de la sintaxis, y veras sobre la compatibilidad con exploradores de modo que sabrás cuándo comenzar a usarlo.

    Animando una simple escena de paisaje


    Se ha creado una simple escena animada los diferentes aspectos de la sintaxis. Puede ver la página de prueba para tener una idea de lo que trata. La página incluye una barra lateral que muestra el código CSS utilizado para los diversos elementos (sol, luna, cielo, tierra y nube). Echa un vistazo rápido, para luego seguir con las distintas partes del módulo de animaciones CSS3.

    (NOTA:. Safari tiene un error que impide que la animación de terminar correctamente este error parece que se fijará en Safari con un WebKit nightly build, las versiones para el futuro de Safari debería ser el mismo que Chrome)

    El Keyframe @ Rule

    La primera cosa inusual que llamará la atención de cualquier código de animación de fotogramas clave CSS3 es la regla @. De acuerdo con la especificación, esta regla CSS @ es seguido por un identificador (elegido por el desarrollador) que se menciona en otra parte de la CSS.

    La regla @ y su identificador van seguidas de una serie de conjuntos de reglas (es decir, normas de estilo con los bloques de declaración, como en el código normal CSS). Este trozo de conjuntos de reglas está delimitada por llaves, que anidan los conjuntos de reglas dentro de la regla @, todo lo que se encuentra con otras reglas @.

    Aquí está la regla @ que se va a utilizar:

    @-webkit-keyframes sunrise {
        /* rule sets go here … */
    }

    La palabra sunrise es un identificador de nuestra elección que vamos a utilizar para referirse a la animación.

    Ten en cuenta que estoy usando el prefijo-webkit-para todos los ejemplos de código aquí y en la demo. Voy a discutir el apoyo del navegador al final de este artículo, pero por ahora es suficiente para saber que los únicos navegadores estables que apoyan este tipo de animaciones son los basados ??en WebKit.

    El Selector Keyframe

    Vamos a añadir algunos conjuntos de reglas dentro de la regla @:

    @-webkit-keyframes sunrise {
       0% {
          bottom: 0;
          left: 340px;
          background: #f00;
       }

       33% {
          bottom: 340px;
          left: 340px;
          background: #ffd630;
       }

       66% {
          bottom: 340px;
          left: 40px;
          background: #ffd630;
       }

       100% {
          bottom: 0;
          left: 40px;
          background: #f00;
       }
    }

    Con la incorporación de los conjuntos de reglas nuevas, hemos introducido el selector keyframe. En el código de ejemplo anterior, los selectores de keyframe son 0%, 33%, 66% y 100%. Los selectores de 0% y 100% podría ser sustituido por las palabras clave “from” y “to”, respectivamente, y que obtendría los mismos resultados.

    Los puntos que no están definidos (por ejemplo, from 34% to 65%) que abarque el período de transición entre los estilos definidos.

    Aunque la especificación está aún en desarrollo, algunas normas se han definido para que los usuario sigan. Por ejemplo, el orden de los keyframe clave en realidad no importa. Los keyframe clave se reproducirán en el orden especificado por los valores porcentuales, y no necesariamente el orden en que aparecen.

    Los keyframe clave que animan el Sol

    Con el fin de animar el sol en esta demostración, he establecido cuatro keyframe clave.

    En el primer keyframe clave, el sol es de color rojo (como si se tratara de salida o la puesta de sol), y se coloca debajo de la tierra (es decir, no visible). Naturalmente, el propio elemento debe tener una posición relativa o absolutamente, para que los valores de la izquierda y abajo no tengan ningún efecto. También he utilizado z-index para apilar los elementos.

    0% {
        bottom: 0; /* sun at bottom */
        left: 340px; /* sun at right */
        background: #f00; /* sun is red */
    }

    Ahora subimos el sol y cambiamos el color a un color amarillo para que se muestre como un sol de pleno dia

    33% {
        bottom: 340px; /* sun rises */
        left: 340px;
        background: #ffd630; /* changes color */
    }

    En los dos tercios en la animación (66%), el sol se ha movido hacia la izquierda 300 píxeles, pero permanece en el mismo plano vertical. Aviso algo más en el keyframe clave del 66%: he repetido el mismo color de los fotogramas 33%, para evitar que el sol se vuelve al rojo antes de tiempo.

    66% {
        bottom: 340px;
        left: 40px; /* sun moves left across sky */
        background: #ffd630; /* maintains its color */
    }

    Finalmente movemos el sol hasta el fondo con un color Rojo

    100% {
        bottom: 0; /* sun sets */
        left: 40px;
        background: #f00; /* back to red */
    }

    Asociar el nombre de animación con un elemento

    En el siguiente trozo de código vamos a añadir en ejemplo claro. Asocia el nombre de la animación (en este caso, la palabra sunrise) con un elemento específico en nuestro HTML:

    #sun.animate {
        -webkit-animation-name: sunrise;
    }

    La duración de la Animación y función de temporización

    #sun.animate {
        -webkit-animation-name: sunrise;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: ease;
    }

    Usted puede especificar la duración de la animación con la propiedad animation-duration. La duración representa el tiempo necesario para completar una sola iteración de la animación. Usted puede expresar este valor en segundos (por ejemplo, 4s), milésimas de segundo (2000 ms), y los segundos en notación decimal (3.3s).

    La función animation-timing-function, cuando se declara a toda la animación, le permite definir cómo una animación progresa con una sola iteración. Los valores para la funcion animation-timing-function son ease, linear, ease-out, step-start y mucho mas, clic aqui

    El numero de iteraciones en la animacion y Dirección

    #sun.animate {
        -webkit-animation-name: sunrise;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-direction: normal;
    }

    Esto introduce dos propiedades más: una que dice la animación cuántas veces jugar, y un indicador que le indica a la animación la posición inicial.

    La propiedad animation-iteration-count se establece en 1, lo que significa que la animación se reproducirá una sola vez. Esta propiedad acepta un valor entero o infinito.

    Además, la propiedad animation-direction se ajusta en normal (por defecto), lo que significa que la animación se reproducirá en la misma dirección (de principio a fin) cada vez que se ejecuta. En nuestro ejemplo, la animación está configurado para ejecutarse una sola vez, por lo que esta propiedad no es necesaria. El otro valor que podría especificar aquí es alternate, lo que hace que el juego de animación a la inversa en cada iteración otros. Naturalmente, para que el valor alternate surta efecto, el número de iteraciones debe tener un valor de 2 o superior.

    Animation’s Delay y Play State

    #sun.animate {
        -webkit-animation-name: sunrise;
        -webkit-animation-duration: 10s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-direction: normal;
        -webkit-animation-delay: 5s;
        -webkit-animation-play-state: running;
    }

    En primer lugar, se introduce la propiedad animation-delay, lo que hace exactamente: que le permite retrasar la animación por un periodo de tiempo. Curiosamente, esta propiedad puede tener un valor negativo, que se mueve el punto de partida, hasta la mitad, etc a través de la animación de acuerdo al valor negativo.

    La propiedad animation-play-state, que podría ser removido de la especificación, acepta uno de los dos valores posibles: running y paused. Este valor ha limitado el uso práctico. El valor por defecto está en ejecución, y el valor de paused, simplemente hace que la animación para a un estado de pausa. No se puede especificar un estado de pausa en la CSS para un fotograma clave individual, el beneficio real de esta propiedad se hace evidente cuando se utiliza JavaScript para cambiar en respuesta a la entrada del usuario o cualquier otra cosa.

    La Animación Fill Mode

    #sun.animate {
        -webkit-animation-name: sunrise;
        -webkt-animation-duration: 10s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-iteration-count: 1;
        -webkit-animation-direction: normal;
        -webkit-animation-delay: 5s;
        -webkit-animation-play-state: running;
        -webkit-animation-fill-mode: forwards;
    }

    La propiedad animation-fill-mode permite definir el estilo del elemento antes y / o después de que la animación se ejecuta.

    Demostracion

    Nota y Fuente

    No es mi intención adjudicarme la autoria del presente articulo, solo he hecho el trabajo de traducirlo y resumirlo. Todos los creditos son de Smashing Magazine

    Artículos Relacionados:

    1. Debug javascript con la consola de Firebug Aburrido de debuggear con alert()?, pero eso ya puedes dejarlo...
    2. Generador de Textos con Sombras CSS3 De la mano de WordpressThemehock.com me llego este tips para...
    3. Generador de Cajas CSS3, sombras, border redondeados y degrade Otro generador mas de Codigo CSS3, esta vez corresponde a...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/animacion-con-css3-sin-javascript-sin-imagenes/feed/ 1     Leer feed de wordpress con PHP y SimpleXMLElement::xpath http://chichote.com/2011/leer-feed-de-wordpress-con-php-y-simplexmlelementxpath/ http://chichote.com/2011/leer-feed-de-wordpress-con-php-y-simplexmlelementxpath/#comments Thu, 19 May 2011 17:04:58 +0000 Chichote http://chichote.com/?p=599
  • wordpress 3, listar multisitios Aprende a listar los diferentes sitios alojados dentro de tu...
  • Buscador de Mp3 (search api 4shared) Simple Script para buscar Mp3 con la api de 4shared,...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Simple XML es una extension de php que nos proporciona una serie de recursos muy simple para la manipulación de archivos xml. Dentro de esta extensión existe SimpleXMLElement que es una rutina de SimpleXML que nos permite ejecutar peticiones XPath a datos XML.

    vamos al ejemplo

    Ejemplo

    <?php

    header('Content-Type: text/html; charset=UTF-8');
    $xmlStr = file_get_contents('http://chichote.com/feed/');
    $xml = new SimpleXMLElement($xmlStr);

    $resultado = $xml->xpath("channel/item");

    echo "<ul>";
    foreach($resultado as $key => $val)
        {
        echo "<li><a href='".$resultado[$key]->link."'>".$resultado[$key]->title."</a></li>";
        }
    echo "</ul>";

    ?>

    Explicacion

    header('Content-Type: text/html; charset=UTF-8');

    Utilizo esta linea para forzar la codificación UTF-8 e ignorar la codficación que está configurada en el servidor, de este modo podremos visualizar caracteres especiales como ñ, acentos, etc.

    $xmlStr = file_get_contents('http://chichote.com/feed/');

    por medio de file_get_contents podemos importar un archivo remoto y pasarlo a una cadena y almacenamos dicha cadena en la variable $xmlstr.

    $xml = new SimpleXMLElement($xmlStr);

    Creamos el objeto $xml instanciando a la classe SimpleXMLElement.

    $resultado = $xml->xpath("channel/item");

    asignamos la ruta de los elementos del xml que queremos mostrar y lo guardamos dentro de la variable $resultado. En este punto obtenemos un array, el cual puede contener sub-arrays (no se si existe ese concepto :D ) y tambien objetos.

    echo "<ul>";
    foreach($resultado as $key => $val)
        {
        echo "<li><a href='".$resultado[$key]->link."'>".$resultado[$key]->title."</a></li>";
        }
    echo "</ul>";

    Y por ultimo hacemos un foreach a $resultado para obtener nuestro array linea por linea.

    Nota

    En el ejemplo rescato el link y el titulo, pero es posible obtener mas datos, puedes hacer un var_dump a $resultado para verificar.

    echo "<pre>";
    var_dump($resultado);
    echo "</pre>";

    Saludos y espero te sirva, no olvides comentar que es mi alimento al ego ajjaja.

    Artículos Relacionados:

    1. wordpress 3, listar multisitios Aprende a listar los diferentes sitios alojados dentro de tu...
    2. Buscador de Mp3 (search api 4shared) Simple Script para buscar Mp3 con la api de 4shared,...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/leer-feed-de-wordpress-con-php-y-simplexmlelementxpath/feed/ 0     JQuery Switch Page, portafolios de paginas sin salir de tu web http://chichote.com/2011/jquery-switch-page-portafolios-de-paginas-sin-salir-de-tu-web/ http://chichote.com/2011/jquery-switch-page-portafolios-de-paginas-sin-salir-de-tu-web/#comments Fri, 06 May 2011 14:03:02 +0000 Chichote http://chichote.com/?p=594
  • Galeria de imagenes estilo Facebook con JQuery y PHP En peticion de VbOkonly de Foros del Web he creado...
  • Limpiar Formulario con jquery Función muy util para limpiar formularios con jquery, nos sirve...
  • Simple Menú Dock desplegable con jquery Hace un tiempo un cliente me solicito un diseño para...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Descripción

    Script inspirado en el menu superior de la comunidad envato

    Te sera muy últil para mostrar tu portafolio de paginas a tus clientes y sin la necesidad de salir de tu web. Tambien se le puede dar otros usos como por ejemplo mostrar portafolio de fotografías.

    Codigo JQuery

    <script>

    $(document).ready(function()
        {
        $("#cuerpo").attr("src", "http://chichote.com");
        });

    jQuery(function($)
        {
        $("#home").click(function()
            {
            $("#cuerpo").attr("src", $(this).attr("title"));
            });
       
        $("#press").click(function()
            {
            $("#switch ul").toggle();
            $("#switch").css("border", "1px solid #000000");
            });
       
        $("#switch > ul > li").click(function()
            {
            $("#cuerpo").attr("src", $(this).attr("title"));
            });
        });
    </script>

    Codigo HTML

    <div id="switch">
            <span><a id="home" title="http://chichote.com"></a> <a id="press"></a></span>
            <ul>
                <li id="id_3docean" title="http://3docean.net/"></li>
                <li id="id_activeden" title="http://activeden.net/"></li>
                <li id="id_audiojungle" title="http://audiojungle.net/"></li>
                <li id="id_codecanyon" title="http://codecanyon.net/"></li>
                <li id="id_graphicriver" title="http://graphicriver.net/"></li>
                <li id="id_themeforest" title="http://themeforest.net/"></li>
                <li id="id_videohive" title="http://videohive.net/"></li>
                <li id="id_tutorials" title="http://marketplace.tutsplus.com/"></li>
            </ul>
        </div>
       
        <iframe frameborder="0" noresize="noresize" name="cuerpo" src="" id="cuerpo" height="100%" width="100%" scrolling="auto"></iframe>

    Demo y Descarga


    Artículos Relacionados:

    1. Galeria de imagenes estilo Facebook con JQuery y PHP En peticion de VbOkonly de Foros del Web he creado...
    2. Limpiar Formulario con jquery Función muy util para limpiar formularios con jquery, nos sirve...
    3. Simple Menú Dock desplegable con jquery Hace un tiempo un cliente me solicito un diseño para...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/jquery-switch-page-portafolios-de-paginas-sin-salir-de-tu-web/feed/ 0     Buscador de Mp3 (search api 4shared) http://chichote.com/2011/buscador-de-mp3-search-api-4shared/ http://chichote.com/2011/buscador-de-mp3-search-api-4shared/#comments Thu, 05 May 2011 18:01:36 +0000 Chichote http://chichote.com/?p=586
  • Galeria de imagenes estilo Facebook con JQuery y PHP En peticion de VbOkonly de Foros del Web he creado...
  • Leer feed de wordpress con PHP y SimpleXMLElement::xpath Este es un simple script que te ayudará a leer...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Descripcion

    Jquery-Search-Mp3 es un script desarrollado con php, jquery y la api de 4shared.

    Es un ejemplo que demuestra la potencia de mezclar varias tecnologias y de manera simple, sin rodeos.

    Api 4Shared

    La funcionalidad o elemento que utilizaremos en esta oportunidad es el XML que entrega 4Shared.

    A través del archivo http://search.4shared.com/network/searchXml.jsp podemos extraer listados xml muy completos y de diferentes formatos de archivos albergados en la plataforma 4Shared

    Funcionamiento de la Api

    Parametros:

    • q – Palabras a buscar

    Ejemplo: q=pearl jam

    • searchExtention – tipo de archivo (extension o categoria)

    Si necesitas una extension determinada searchExtention=mid.

    Para buscar directamente en una categoria:

    • categoria:1 – musica
    • categoria:2 – video
    • categoria:3 – foto
    • categoria:4 – archivos
    • categoria:6 – programas
    • categoria:7 – documentos web
    • categoria:8 – applicaciones mobiles

    sortType – type of sorting

    • 1 – ordenar por descargas;
    • 2 – ordenar por fecha de subida;
    • 3 – ordenar por tamaño;
    • 4 – ordenar por nombre;

    sortOrder – ordenar como (Ascendente -1, Descendente 1)

    start – offset, para utilizar paginacion

    start debe contener un numero divisible por 10

    Ejemplo de uso:

    http://search.4shared.com/network/searchXml.jsp?q=pearl+jam&searchExtention=mid&sortType=3&sortOrder=1&searchmode=3&start=10

    Respuesta XML:

    <search-result>
    <query>somebody</query> - keyword
    <total-files>24</total-files> - number of found files
    <page-number>2</page-number> - page number
    <pages-total>2</pages-total> - total amount of pages
    <start>10</start> - offset
    <files-per-page>10</files-per-page> - amount of files per page
    <files-approx-count>24</files-approx-count> - approximate number of files (when amount of found files is more than 1,000). If amount of found files is less than 1,000 it equals to <total-files></total-files>
    <result-files>
    <file>
    <name>somebody_to_shove.mid</name> - filename
    <description/> - description
    <downloads-count>8</downloads-count> - number of downloads
    <upload-date-format>hh:mm dd-MM-yyyy</upload-date-format> - upload date format
    <upload-date>04:19 19-05-2009</upload-date> - upload date
    <url>http://www.4shared.com/audio/qVaKdItF/somebody_to_shove.htm</url> - download page url
    <preview-url/> - preview url if exist
    <flash-preview-url/>- flash preview url if exist
    <user>wym</user> - username
    <size>39 KB</size> - file size
    </file>
    <file>
    ...
    </file>
    </result-files>
    </search-result>

    JQuery:

    <script>
        $(document).ready(function()
            {
            $(".play").livequery('click', function ()
                {
               
                var cancion = $(this).attr("title");
                var rep = '<object type="application/x-shockwave-flash" data="swf/dewplayer-vol.swf?autostart=true&mp3=' + cancion + '" width="240" height="20" id="dewplayer-vol"><param name="wmode" value="transparent" /><param name="movie" value="swf/dewplayer-vol.swf?autostart=true&mp3=' + cancion + '" /></object>';
                $("#reproductor").empty();
                $("#reproductor").html(rep);
                });
           
            $("tr").livequery('click', function ()
                {
                $("tr").css("background", "#FFFFFF");
                $(this).css("background", "#ADDCA4");
                });
           
           
            $(".pag").livequery('click', function ()
                {
                $("#result").html("<div style='width:16px; margin:0 auto;'><img src='img/loader.gif' alt='' \></div>");
                $.post($("#search").attr("action"), { q: $(this).attr("title"), pag: $(this).attr("rel") }, function(data)
                    {
                    $("#result").empty();
                    $("#result").html(data);
                    });
                return false;
                });

            });
       
       
        $(function()
            {
            $(".boton").click(function ()
                {
                $("#result").html("<div style='width:16px; margin:0 auto;'><img src='img/loader.gif' alt='' \></div>");
                $.post($("#search").attr("action"), $("#search").serialize(), function(data)
                    {
                    $("#result").empty();
                    $("#result").html(data);
                    });
                return false;
                });
            });
    </script>

    Codigo HTML:

    <div id="header">
            <h1><a href="http://chichote.com" title="ejemplo jquery"><img src="img/logo.png" alt="ejemplo jquery" /></a></h1>
           
            <form id="search" action="lib/search-mp3.php">
                <input name="q" type="text" value="Click aqui para Buscar" class="drop-shadow curved curved-vt-2" onclick="this.value='';" />
                <input name="boton" type="submit" value="" class="boton" />
            </form>
        </div>



       
        <div id="content">
           
           
            <div id="reproductor"  class="drop-shadow curved curved-vt-2">
                                       
            </div>
           
           
           
           
            <div id="result" class="drop-shadow curved curved-vt-2">
               
            </div>
           
           
        </div>
       
       
       
       
        <div id="footer">
            Script desarrollado por <a href="http://chichote.com">Chichote</a>
        </div>

    Codigo PHP:

    <?
    include("xml2array.php");

    $q = str_replace(" ", "%20", $_POST['q']);

    echo "<table width='100%'>";
        echo "<tr>";
            echo "<td width='90%'><b>TITULO</b></td>";             
            echo "<td width='8%'><b>OPCION</b></td>";
        echo "</tr>";

    if(isset($_POST["pag"]))
        $i = $_POST["pag"];
    else
        $i = 0;


    $pag= $i * 10;
    $result = @file_get_contents("http://search.4shared.com/network/searchXml.jsp?q=".$q."&searchExtention=mp3&sortType=1&sortOrder=1&searchmode=3&start=".$pag."");


    if($result == false)
        {
        echo "Error: se ha perdido la conexion con el server, por favor intenta nuevamente la busqueda.";
        }
    else
        {
        $result = xml2array($result);
       
        $c = count($result["search-result"]["result-files"]["file"]);
        //echo $c;
        for($j=0;$j<$c;$j++)
            {
            echo "<tr>";
                echo "<td>";
                    $titulo = str_replace("_", " ", $result["search-result"]["result-files"]["file"][$j]["name"]["value"]);
                    echo str_replace("-", " ", $titulo);
                echo "</td>";
               
                echo "<td>";
                    echo "<a class='play' title='".$result["search-result"]["result-files"]["file"][$j]["flash-preview-url"]["value"]."'><img src='".$path."img/play.png' alt='' \></a> <a href='".$result["search-result"]["result-files"]["file"][$j]["flash-preview-url"]["value"]."'><img src='".$path."img/save.png' alt='' \></a>";
                echo "</td>";
            echo "</tr>";
            }
        }

    echo "</table>";

    echo "<div id='paginacion'>";
    if($i != 0)
        echo "  <a class='pag izq' title='".$q."' rel='".($i-1)."'>Pagina Anterior</a>";
    echo "  <a class='pag der' title='".$q."' rel='".($i+1)."'>Siguiente Pagina</a>";
    echo "</div>";
    ?>

    Class xml2array.php:

    Esta es una clase que tiene como mision convertir codigo xml a array.

    Demo y Descarga


    Artículos Relacionados:

    1. Galeria de imagenes estilo Facebook con JQuery y PHP En peticion de VbOkonly de Foros del Web he creado...
    2. Leer feed de wordpress con PHP y SimpleXMLElement::xpath Este es un simple script que te ayudará a leer...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/buscador-de-mp3-search-api-4shared/feed/ 30     Sombras con CS3 sin imagenes http://chichote.com/2011/sombras-con-cs3-sin-imagenes/ http://chichote.com/2011/sombras-con-cs3-sin-imagenes/#comments Mon, 25 Apr 2011 01:46:03 +0000 Chichote http://chichote.com/?p=580
  • Generador de Textos con Sombras CSS3 De la mano de WordpressThemehock.com me llego este tips para...
  • Animacion con CSS3 keyframe, sin javascript, sin imagenes Este articulo es una traduccion del articulo publicado por smashing...
  • Generador de Cajas CSS3, sombras, border redondeados y degrade Otro generador mas de Codigo CSS3, esta vez corresponde a...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Navegando por Smaching Magazine encontre un articulo de Nicolas Gallagher donde habla de las bondades del CS3.

    Debo dejar claro que muchos de todos estos conceptos nuevos son experimentales y si bien muchos otros debieran ser estandares, no siempre ocurre esto sobre todo en versiones mas antiguas de navegadores.

    Demo y Descarga


    Artículos Relacionados:

    1. Generador de Textos con Sombras CSS3 De la mano de WordpressThemehock.com me llego este tips para...
    2. Animacion con CSS3 keyframe, sin javascript, sin imagenes Este articulo es una traduccion del articulo publicado por smashing...
    3. Generador de Cajas CSS3, sombras, border redondeados y degrade Otro generador mas de Codigo CSS3, esta vez corresponde a...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/sombras-con-cs3-sin-imagenes/feed/ 0     Cambiar puerto 25 al servidor de mail en WHM/CPANEL http://chichote.com/2011/cambiar-puerto-25-al-servidor-de-mail-en-whmcpanel/ http://chichote.com/2011/cambiar-puerto-25-al-servidor-de-mail-en-whmcpanel/#comments Mon, 04 Apr 2011 15:44:52 +0000 Chichote http://chichote.com/?p=571
  • Como habilitar o deshabilitar un cliente de webmail en Cpanel/Whm Descubre como habilitar o deshabilitar los diferentes clientes de webmail...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Uno de mis clientes es de Mexico y contratamos para sus web un vps, la sorpresa fue cuando mi cliente me avisa que tenia problemas con los email porq su ISP bloqueaba el puerto 25. De cabeza me tire al WHM para revisar como solucionarlo, por suerte no tomo tanto tiempo y WHM es medianamente intuitivo por lo que salio facil la solución.

    Paso 1


    En el menu lateral izquierdo encontrarás El Item “Service Configuration“, el cual contiene una lista de opciones, da clic en Service Manager.

    Paso 2


    Busca la opcion “exim on another port” y cambia el valor que contiene el input, que por defecto viene como “25″

    Paso 3

    Por ultimo anda hasta el final de la pagina y guarda el formulario, automaticamente WHM hara el trabajo por ti incluyendo el reinicio del servicio Exim.

    Saludos

    Artículos Relacionados:

    1. Como habilitar o deshabilitar un cliente de webmail en Cpanel/Whm Descubre como habilitar o deshabilitar los diferentes clientes de webmail...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/cambiar-puerto-25-al-servidor-de-mail-en-whmcpanel/feed/ 0     Debug javascript con la consola de Firebug http://chichote.com/2011/debug-javascript-con-la-consola-de-firebug/ http://chichote.com/2011/debug-javascript-con-la-consola-de-firebug/#comments Mon, 04 Apr 2011 15:15:24 +0000 Chichote http://chichote.com/?p=565
  • Galeria de imagenes estilo Facebook con JQuery y PHP En peticion de VbOkonly de Foros del Web he creado...
  • Simple Menú Dock desplegable con jquery Hace un tiempo un cliente me solicito un diseño para...
  • Refrescar página al cerrar Shadowbox ¿Como refrescar pagina al cerrar shadowbox?. Un tips muy util...
    • Related posts brought to you by Yet Another Related Posts Plugin.]]>     Hojeando la web de Damián Culotta me encontre con esta maravilla.

    Reconosco que soy de los que debuggeaban con alert o document.write, pero en ocaciones se torna casi insorportable. Con el objeto console del Firebug esta tarea se facilita mucho.

    Asi debuggeaba :(

    <script type='text/javascript'>
    alert('alerta de prueba');
    </script>

    o bien

    <script type='text/javascript'>
    document.write('alerta de prueba');
    </script>

    Con Firebug y el objeto console :)

    <script type='text/javascript'>
    console.log('Ejemplo de console.log');
    console.info('Ejemplo de console.info');
    console.debug('Ejemplo de console.debug');
    console.warn('Ejemplo de console.warn');
    console.error('Ejemplo de console.error');
    </script>

    Requerimientos

    Firebug y Firefox :D

    Artículos Relacionados:

    1. Galeria de imagenes estilo Facebook con JQuery y PHP En peticion de VbOkonly de Foros del Web he creado...
    2. Simple Menú Dock desplegable con jquery Hace un tiempo un cliente me solicito un diseño para...
    3. Refrescar página al cerrar Shadowbox ¿Como refrescar pagina al cerrar shadowbox?. Un tips muy util...

    Related posts brought to you by Yet Another Related Posts Plugin.

    ]]>     http://chichote.com/2011/debug-javascript-con-la-consola-de-firebug/feed/ 0