Acarus: APT para Pentesting

Pocas cosas dan tanto miedo como las siglas APT: "Una amenaza persistente avanzada, también conocida por sus siglas en inglés, APT (Advanced Persistent Threat), es un conjunto de procesos informáticos sigilosos y continuos, a menudo orquestados por humanos, dirigidos a penetrar la seguridad informática de una entidad específica. Una APT, generalmente, fija sus objetivos en organizaciones o naciones por motivos de negocios o políticos. Los procesos de APT requieren un alto grado de cobertura…

Contenido completo del post en http://ift.tt/mDaonR o haciendo clic en el título de la noticia

desde Segu-Info – Noticias de Seguridad Informática http://ift.tt/1FnX6aJ
via IFTTT

5 de los mejores plugins para crear Formularios de Contacto para WordPress | GeeksRoom

Una parte importante del blog para que los lectores se puedan comunicar con ustedes los webmasters o editores es la página de contacto. En esa página de contacto en su blog pueden tener una dirección de email para que el usuario haga clic y con su cliente de email les envíe directamente un email o algo más profesional y mucho más cómodo para el lector, un formulario de contacto. En WordPress hay muchos plugins que permiten agregar un formulario de contacto y 5 de los mejores son los siguientes, Contact Form 7 Es el que utilizamos en este blog.  Ofrece muchas características y permite al usuario crear un formulario personalizado.  Si no quieren personalizar, viene con un formulario preestablecido que solicita al lector escribir su nombre (obligatorio), dirección de email (obligatorio), página web (opcional) y la caja de texto para escribir el mensaje.  Ahora no es algo fácil de personalizar intuitivamente, pero muestran varios ejemplos como para en poco tiempo poder crear uno formulario

Origen: 5 de los mejores plugins para crear Formularios de Contacto para WordPress | GeeksRoom

Cómo usar Dashicons en WordPress

Desde WordPress 3.8 tenemos a nuestra disposición los maravillosos Dashicons pero ¿sabes cómo utilizarlos?

Los Dashicons son iconos a partir de fuentes que se pueden utilizar en publicaciones, temas, plugins o incluso la interfaz de administración de WordPress para sustituir a imágenes, mucho más pesadas. Además, los Dashicons son totalmente escalables en tamaño al ser vectores, por lo que se adaptan de maravilla a todo tipo de resoluciones de pantalla sin perder calidad.

Ahora bien, usarlos no es tan fácil como contarlo.

Añadir soporte de Dashicons

Antes de nada debes hacer que tu tema soporte Dashicons, para lo que debes ir al fichero functions.php del mismo y añadir lo siguiente:

//Soporte de dashicons
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

WordPress ya soporta Dashicons así que para otros usos no necesitas nada más. Esto es necesario para que el tema muestre Dashicons.

Cómo añadir Dashicons en temas y plugins

Si vas a añadir, por  ejemplo, tipos de entrada personalizadas en un tema de tu creación lo ideal es que las distingas mediante un icono específico que las distinga del resto.

El primer paso es ir a la página oficial de Dashicons de WordPress, donde elegirás el icono a utilizar haciendo clic sobre el mismo para, a continuación copiar el código que necesitas para incorporarlo en tu tema, normalmente en CSS, aunque también ofrece obtener el HTML o incluso el glifo.

Apuntas el nombre del icono y lo añades a la función de tu tipo de entrada personalizada, así:

$args = array(
'label' => __( 'libro', 'libro' ),
'description' => __( 'Descripción del tipo de entrada', 'libro' ),
'labels' => $labels,
'supports' => array( ),
'taxonomies' => array( 'category', 'post_tag' ),
'menu_position' => 15,
'menu_icon' => 'dashicons-book-alt',
'capability_type' => 'post',
);

La etiqueta o descripción es la que tu quieras, solo tienes que definir la variable menu_icon con el nombre del Dashicon elegir, en el ejemplo “dashicons-book-alt”.

Lo que conseguimos es que nuestro tipo de entrada personalizada se identifique en el escritorio de WordPress con un bonito icono de un libro.

Si lo que queremos es añadir un icono distintivo a una página de ajustes de un plugin el proceso es parecido. Lo primero es elegir el icono, como antes, y a continuación añadimos el nombre del mismo a nuestra función del plugin que añada la página de ajustes, por ejemplo. Algo así:

function miplugin_custom_menu_page() {
add_menu_page(
'Página de opciones del plugin',
'Opciones',
'manage_options',
'miplugin/options.php',
'',
'dashicons-admin-tools', 81
);
}
add_action( 'admin_menu', 'miplugin_custom_menu_page' );

 Cómo usar Dashicons en un menú personalizado de WordPress

Pero no solo para desarrolladores están hechos los Dashicons, sino que podemos usarlos donde queramos. Un uso muy interesante sería en un menú personalizado, que quedará mucho más chulo si lo acompañamos de  un bonito icono.

Una vez elegido el icono a utilizar, de nuevo de la página de Dashicons vista al principio de este artículo, en esta ocasión copiamos el código HTML.

Lo siguiente es aplicar la segunda variante del truco que ya vimos para usar imágenes en los menús personalizados de WordPress, solo que en este caso el código a utilizar será el que nos facilita la página de Dashicons, así de simple.

A modo de recordatorio, el proceso es este:

  1. Crea un elemento nuevo de menú en el que en la denominada Etiqueta de navegación, en vez de poner el típico texto, simplemente pega el código HTML del Dashicon.
  2. La URL del elemento del menú será el que tu quieras, por supuesto.
  3. Guarda los cambios.

Cómo usar Dashicons en cualquier otro sitio

Creo que es bastante obvio que puedes usar Dashicons en cualquier parte. Copiando el código HTML puedes añadirlos para ilustrar tus publicaciones, como elementos meta en tu tema mediante CSS o HTML, lo que quieras.

Si vas a utilizarlos como elemento común en tu tema simplemente crea una clase CSS para su uso posterior en el tema, y si los usas puntualmente simplemente utiliza el HTML donde quieras mostrarlos.

Para incorporar un Dashicon en tu CSS podría ser algo así:

.myicon:before {
content: "\f155";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
vertical-align: top;
}

Para tus publicaciones, puedes copiar y pegar el HTML del icono a usar o, si los usas mucho, incluso instalar un plugin como JM Dashicons Shortcode que te facilita la inserción de iconos en tus entradas o páginas.

desde Ayuda WordPress http://ift.tt/1E2ZIy3
via IFTTT

Cambia textos por defecto de WordPress sin tocar una línea de código

Ya varias veces hemos visto cómo se cambian textos por defecto de WordPress usando el maravilloso código str_replace pero ¿y si no quieres modificar códigos? Entonces nada mejor que Say what?, una chulada de plugin que viene a hacer lo mismo pero con una interfaz la mar de sencilla. Simplemente añades el texto a modificar, le das al enlace “Edit” y lo cambias a tu gusto, así puedes pasar … Simplemente añade una nueva cadena de texto original de WordPress y le pones el nombre que se te ocurra. Más fácil no se puede.

Visita la pagina del plugin aquí, para mas información.

Crea tu propio plugin SEO

Siempre estamos con la discusión de cuál es el mejor plugin de SEO, que si el de Yoast porque tiene más cosas, que si el All in one SEO pack porque no falla nunca, que si Fernando está loco, que si meto las tags manualmente, etc. Pero ¿y si creas el tuyo propio? Así que basta de debates estériles y discusiones inútiles de a ver quién la tiene más larga y manos a la obra a crear un plugin SEO básico que añada las descripciones meta y un título para Open Graph con su descripción a la cabecera de las … Sigue leyendo que hay más

desde Ayuda WordPress http://ift.tt/1iO0oZo
via IFTTT

Cambiar el idioma de WordPress automáticamente

En sitios multilenguaje puede ser de gran utilidad ofrecer que, dependiendo de la configuración de idioma del usuario, detectado del navegador, WordPress cambie de idioma automáticamente. La idea es que si el navegador del usuario está en un idioma, WordPress se muestre en ese idioma, y si el tema también está bien configurado para la traducción, que también se muestre en el idioma del usuario. Hay un requisito, y es que tanto el tema como la instalación de WordPress dispongan de los archivos .mo de traducción necesarios, pero si eso no es problema solo tienes que hacer lo siguiente: :: … Sigue leyendo que hay más

desde Ayuda WordPress http://ift.tt/1kFRUUo
via IFTTT

Detectar el país de origen del visitante web con JQuery

Un método bastante sencillo para detectar el país (sin necesidad de utilizar alguna clase php o similares) del usuario que esta entrando en nuestra web, es usando la API de wipmania. Este es un servicio web gratuito de Geolocalizacion ip (ademas cuenta con un plugin para firefox por si a alguien le interesa xD), por medio de jQuery realizaremos una consulta a este servicio y obtendremos unos cuantos parámetros como son: latitud, longitud, zoom, dirección, ciudad, país, código del país, región.

Si copiamos y pegamos en nuestro navegador directamente la url «http://api.wipmania.com/jsonp?callback=?» notaremos de inmediato como retorna información utilizable para cumplir con el objetivo de geo referenciación. Ya solo hace falta utilizar JSON para recuperar los con jQuery de la siguiente forma:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$.getJSON('http://api.wipmania.com/jsonp?callback=?', function (data) {
  alert('País: ' + data.address.country);
});
</script>

Para conocer mas parámetro deben visitar la pagina del api de wipmania, deben recordar que es un servicio gratuito por lo que tendrá mas de algunas limitación, específicamente la cantidad de consultas que podemos realizar, pero para pequeños proyectos no esta nada mal y si les interesa el servicio pueden adquirir una membresía profesional o corporate.

Obtener dirección IP con jQuery

Si queremos conocer nuestra dirección IP mediante jQuery podemos utilizar la función getJSON, esta hace una petición de datos al servidor que retorna la información con notación JSON.

Para llevar a cabo esto utilizaremos un servicio gratutio disponible en http://getjsonip.com

Función para mostrar ip con jQuery:

$.getJSON("http://jsonip.com?callback=?",function(data){
    alert( "Mi ip: " + data.ip);
});

Pueden probar ingresando directamente la dirección http://jsonip.com?callback=? en su navegador y veran como retorna la ip en notación json, asi con la función descrita arriba podrán usarla en sus aplicaciones web, mobile o para probar en ambientes de desarrollo.

espero les sea útil.

Formulario multi pasos con CSS y Jquery

Vamos a ver la forma de crear una sencillo formulario  del tipo multipaso, muy útil cuando tenemos formularios muy extensos o con demasiados campos, utilizaremos Jquery easing para animar la transición de las diferentes etapas o partes de las que se compondrá y le daremos el toque artístico con un poco de CSS (no esperen mucho, no soy bueno para el CSS).

Bueno lo primero sera confeccionar nuestro formulario, para ello utilizaré el siguiente código, el cual no presenta secretos.

En primer lugar definimos la cantidad de pasos para confeccionar una barra de progreso, para mantener informado al usuario y evitar que deje el formulario abandonado y perdamos trafico,  en este ejemplo serán 3 (Configurar tu cuenta, Perfil Social y Detalles Personales).

<form id="formulario">
<!-- progreso -->
<ul id="progreso">
<li class="active">Configurar tu cuenta</li>
<li>Perfil Social</li>
<li>Detalles Personales</li>
</ul>
</form>

La barra de progreso sera una simple etiqueta ul  con un id llamado progreso, con sus correspondientes etiquetas li (tantas como pasos tenga el formulario) [highlight color=yellow]no olvidar asignar la clase active al primer li[/highlight] que mediante jQuery y CSS posteriormente la dotaremos de vida.

Luego de definir los step o pasos del formulario, creamos diferentes campos fieldsets para contener cada paso y dentro todo lo que se requiera (inputs, h2, h3, p, label, etc).

<!-- fieldsets -->
<fieldset>
    <h2 class="fs-title">Crear su cuenta</h2>
    <h3 class="fs-subtitle">Paso 1</h3>
    <input type="text" name="email" placeholder="Email" />
    <input type="password" name="pass" placeholder="Password" />
    <input type="password" name="cpass" placeholder="Confirmar Password" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
    <h2 class="fs-title">Perfil social</h2>
    <h3 class="fs-subtitle">Tu presencia en las redes</h3>
    <input type="text" name="twitter" placeholder="Twitter" />
    <input type="text" name="facebook" placeholder="Facebook" />
    <input type="text" name="gplus" placeholder="Google Plus" />
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
    <h2 class="fs-title">Detalles Personales</h2>
    <h3 class="fs-subtitle">Nunca venderemos tu informaci&oacute;n personal</h3>
    <input type="text" name="fname" placeholder="Nombre" />
    <input type="text" name="lname" placeholder="Apellido" />
    <input type="text" name="phone" placeholder="Telefono" />
    <textarea name="address" placeholder="Direcci&oacute;n"></textarea>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>

En cada fieldset, adicional a los campos que requiramos, debemos agregar un input tipo button para avanzar de paso en paso y otro para retroceder (según corresponda), por tanto en este ejemplo necesito agregar uno el primer fieldset para avanzar, dos al segundo y uno para retroceder en el ultimo junto a uno tipo submit.
Si probamos el código obtendremos una simple pagina de fondo blanco con un formulario donde veremos todos los campos así.

Un toque de sensibilidad

Ahora lo principal es hacer mas vistoso nuestro formulario, para ello sacamos nuestros dotes artísticos (mas de alguien fumara algo para encontrar su inspiración xD) y nos zambullimos en CSS, yo no tengo estudios formales en CSS, pero la web es basta y repleta de información al respecto, al final de este articulo les dejare algunos link relacionados para el que desee profundizar alguno de los temas tratados en este post.

Primero importaremos una fuente tipografica desde el CDN de fuentes de google, yo usare la fuente Montcerrat, pero pueden usar la que estimen, desde google fonts podran navegar, buscar y elegir la que mas les agrade.

/*importamos una fuente personalizada desde google*/
@import url(http://fonts.googleapis.com/css?family=Montserrat);

Un pequeño reset de estilos al documento,  sera muy básico.

/*reset basico*/
* {margin: 0; padding: 0;}

Altura del documento html y aplicamos un combo de imagen como patern + gradient, cave señalar que la mayoría de CSS que usaremos, no aplica en internet explorer, esto debido a su incompatibilidad con esta versión de CSS 3 (pero bueno a quien le importa esos dinosaurio xD).

html {
    height: 100%; /*Image only BG fallback*/
    background: url('bitmaps/gs3.png'); /*background = combo gradient + imagen pattern*/
    background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
}

A pesar que mencione que no funcionaba bien en internet explorer  debemos asegurarnos que los otros navegadores entiendan nuestra codificación de estilos y para ello utilizaremos los prefijos para sus respectivos motores de render:

[checklist]
  • -webkit- : Para la familia Chrome / Chromium y Safari
  • -moz- : Para Mozilla Firefox y derivados
  • -o- : Para Opera (o si, aun existe)
  • -ms-: Para internet explorer 9 (pero linear-gradient no funciona bien en ie)
[/checklist]
background: -webkit-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -moz-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -o-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');
background: -ms-linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('bitmaps/gs3.png');

Aplicamos la fuente importada

body {
    font-family: montserrat, arial, verdana;
}

Ahora el formulario y su contenido

/*estilo formulario*/
#formulario {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    position: relative;
}
#formulario fieldset {
    background: #ffffff;
    border: 0 none;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    width: 80%;
    margin: 0 10%; /*Posicionamos todos los fieldset uno encima del otro*/
    position: absolute;
}
/*Ocultamos todos menos el primer fieldset*/
#formulario fieldset:not(:first-of-type) {
    display: none;
}
/*inputs*/
#formulario input,#formulario textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 13px;
}
/*buttons*/
#formulario .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}
#formulario .action-button:hover,#formulario .action-button:focus {
    -webkit-box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}
.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

Solo resta la parte superior del formulario, donde se marcan los pasos:

/*progreso*/
#progreso {
    margin-bottom: 30px;
    overflow: hidden; 
    counter-reset: step; /*CSS contador para numerar los pasos, lo aprendi en http://www.w3schools.com/*/
}
#progreso li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    float: left;
    position: relative;
}
#progreso li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: white;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*conectores de progreso*/
#progreso li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: white;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1; /*lo pone detrás de los números*/
}
#progreso li:first-child:after {
    /*el conector no es necesario antes de que el primer paso*/
    content: none; 
}
/*marca activo/completado los pasos en verde*/
/*El numero del paso y el conecto quedaran en verde*/
#progreso li.active:before,#progreso li.active:after {
    background: #27AE60;
    color: white;
}

Con esto hemos terminado la parte «artistica» de nuestro formulario. Si probamos nuestro formulario notaran que se ve bien esteticamente, que solo vemos la primera parte del formulario, pero al darle click al boton Next, no pasa nada, ahora le daremos vida con un poco de JQuery.

Crearemo un nuevo archivo con extension js, llamenlo como quieran, yo lo llamare funciones.js

$(document).ready(function(){
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //propiedades fieldset que vamos a animar
var animating; //

$(".next").click(function(){
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();

    //activar el siguiente paso en progreso usando el índice de next_fs
    $("#progreso li").eq($("fieldset").index(next_fs)).addClass("active");

    //mostrar el siguiente fieldset
    next_fs.show(); 
    //ocultar el fieldset actual con estilo
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //como la opacidad de current_fs está reducida a 0 - almacenado en "now"
            //1. escala current_fs hasta 80%
            scale = 1 - (1 - now) * 0.2;
            //2. traer next_fs desde la derecha (50%)
            left = (now * 50)+"%";
            //3. aumentar la opacidad de next_fs a 1 a medida que avanza
            opacity = 1 - now;
            current_fs.css({'transform': 'scale('+scale+')'});
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
        }, 
        //Esto viene del plugin easing
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();

    //des-activar paso actual en progreso
    $("#progreso li").eq($("fieldset").index(current_fs)).removeClass("active");

    //mostrar el fieldset anterior
    previous_fs.show(); 
    //ocultar el fieldset actual con estilo
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. escalar previous_fs de 80% a 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
        }, 
        //Esto viene del plugin easing
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})

});

Ahora si hemos terminado, si desean que su formulario envié deben editar la ultima función del script.

Adicionalmente deben refererciar al plugin easing porque ocuparemos uno de sus metodos para animar nuestro formulario.

<!-- jQuery easing plugin -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>

A continuacion les dejare un enlace con una demo de este formulario y un link donde podrán descargar el ejemplo completo listo para usar o editar a su conveniencia.

Referencias

 

Demo

Ver Demostración

Descargar ejemplo

Efecto Loading mientras carga nuestra pagina web

Crear un efecto de «cargar página» o «loading» en JQuery mientras se van cargando todos los elementos de la página web es realmente sencillo (aunque cuando me toco por primera vez hacerlo, no me lo parecía xD) gracias a la función load() de jQuery.

Ahora un ejemplo sencillo y básico que puedes customizar con css de mil formas.

  • Insertamos un div con id «cargando» al principio o final de la etiqueta body de nuestra página web:

 

<div id="cargando">

</div>

Y desde aquí ya va todo el contenido (divs, imágenes, etc…) de tu pagina …

  • Un poco de CSS al div que aparecerá primero por encima del resto de los elementos (con posición absoluta obviamente) hasta que se carguen todos los elementos del documento, que es cuando este div desaparecerá.
#cargando {
    position:absolute;
    width:100%;
    height:100%;
    background:#fff url(imagenes/loading.gif) no-repeat center;
}
  • Escribimos un pequeño script dentro del «head» de nuestro documento, generalmente:
$(window).load(function () {
  // Una vez se cargue al completo la página desaparecerá el div "cargando"
  $('#cargando').hide();
});

Este es un ejemplo sencillo de como hacer un cargador usando jquery, pero con un poco de imaginación y destreza con CSS puedes hacer un cargador de página mucho más original (Puedes crear diferentes imágenes de loading en http://www.ajaxload.info/).

Importante: La parte crucial de este sencillo loading es el uso de $(window).load() en lugar del clasico $(Document).ready()

para que lo tengan mas claro pueden crear un documento html con imágenes y ver como se comportan ambas.

$(document).ready(function() {
// se ejecuta cuando se carga el documento HTML y DOM está listo
alert("el documento está listo");
});

$(window).load(function() {
// se ejecuta cuando la página completa está completamente cargado,
// incluyendo todos los marcos, objetos e imágenes
alert("la ventana está cargada"); 
});

Descargar ejemplo completo:

[Descarga no encontrada]

Como saber cuando google bot visita nuestro sitio web

google robot

Sí deseas saber el momento exacto y por cuales páginas ha pasado el robot de google (Googlebot) en su o sus sitios web. Solo debes utilizar el siguiente código en el header del sitio y cuando el bot de google aparesca recibiran un email con la IP, navegador y url destino de la araña o robot de google.

Deben cambiar la dirección de email por la suya (obvio), si no les funciona puede ser que su hosting o servidor tengan la funcion mail de php truncada, en ese caso pueden usar la libreria phpmailer ampliamente documentada en internet:

if ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Googlebot' ) != false ){
    mail('miemail@midominio.com', 'Paso de Googlebot', '
        IP: '.$_SERVER['REMOTE_ADDR'].' -
        Sistema operativo y navegador: '.$_SERVER['HTTP_USER_AGENT'].' -
        Web destino: '.$_SERVER['REQUEST_URI'].''
    );
}

y el correo que recibiremos sera parecido a la siguiente captura:

Scroll to up sencillo con css y jquery

scrollup

A continuacion les presento un sencillo efecto «scroll to up» muy comun en los sitios web.

primero necesitamos crear el codigo html que luego animaremos con jquery y estilizaremos con css.

<div id="IrArriba">
<a title="" href="#Arriba">
<span>Arriba</span>
</a>
</div>

muy sencillo, esto lo ubicamos en el footer de nuestro sitio web, si es una plantilla html con copiar el codigo antes de </body> bastara, si en cambio en un template wordpress u otro cms deberan editar la plantilla footer.php o similar y agregar el codigo.

Ahora lo estilizaremos un poco con css.

#IrArriba{bottom:30px;display:none;position:fixed;right:30px;z-index:9999;}
#IrArriba a{text-decoration: none;text-align:center;}
#IrArriba span{cursor:pointer;display:block;position:relative;width:42px;border:solid 1px #FF0000;border-radius:30px;padding:10px;color:#FF0000;font-weight:bold;}
#IrArriba span:hover {background-position: left bottom;}
#IrArriba span:focus {background-position: left bottom;}

bastante simple, aunque debo decir que el estilo css presentado en muy básico (no es mi fuerte xD), si quisieramos podriamos utilizar una imagen en lugar de un texto para la etiqueta span, y modificar ligeramente el css.

#IrArriba {
    bottom: 30px;
    display: none;
    position: fixed;
    right: 30px;
    z-index: 9999;
}
#IrArriba span {
    background: url("../images/boton_arriba.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    cursor: pointer;
    display: block;
    height: 42px;
    position: relative;
    width: 42px;
}
#IrArriba span:hover {
    background-position: left bottom;
}
#IrArriba span:focus {
    background-position: left bottom;
}

Pero hasta el momento aunque se ve bien no es mas que un texto o una imagen en pantalla, dotemoslo de vida con un sencillo codigo jquery.

jQuery(document).ready(function($) {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 0) {
                $('#IrArriba').fadeIn();
            }else{
                $('#IrArriba').fadeOut();
                $('.preg_flotante a').removeClass('selected');
            }
        });
        $('#IrArriba a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }
            , 800 );
            $('.preg_flotante a').removeClass('selected');
            return false;
        });
});

Y como resultado tendriamos algo similar a estas capturas.

Tips para wp-config.php en WordPress

Si eres un usuario avezado o novel de wordpress, ya estarás enterado de la importancia del archivo wp-config.php, es en este archivo donde debemos realizar la primera configuración para instalar nuestro sistema wordpress, pero existen opciones muy interesante que no están disponibles de forma transparente en dicho archivo, opciones que nos permiten ajustar la performace de nuestro wordpress y empezar a experimentar mejoras notables en el funcionamiento o incluso prescindir de plugins para realizar algunas tareas, simplemente editando este archivo. A continuación daremos un recorrido por estas opciones dando reseñas de las misma y puedan entenderlo fácilmente.

Una buena practica y como medida de seguridad es renombrar, mover (o incluso ambas opciones) la carpeta wp-content ([highlight color=yellow]Desde la versión 2.6, puede mover el directorio wp-content, que tiene sus temas, plugins, y subidas, incluso fuera del directorio de la aplicación WordPress.[/highlight]), esto debido a que muchos hacker(s) ya sabemos de la existencia de esta carpeta y los diferentes scripts que utilizamos para automatizar los intentos de ataque (o «auditoria», como lo llamo yo xD) buscan por defecto esta carpeta y se complica un poco mas la detección de errores o bugs.

A continuación alguna de estos parámetros de configuración, para mas detalles no duden en consultar la pagina del codex de wordpress relacionada con el archivo wp-config.php.

[box type=alert color=yellow size=full]Siempre incluir el http:// cuando requiera url y nunca terminar la url con un slash (/)[/box]
// Moviendo la carpeta wp-content
// desde la versión 2.6 es posible mover la carpeta donde se encuentran
// los plugins, temas y carpeta de subidas
//esto es una opcion muy recomendable como medida de seguridad.

define( 'WP_CONTENT_DIR', 'http://servidor-de-archivos/wordpress/wp-content' );

// Moviendo la carpeta de uploads
// Si solo queremos mover o renombrar la carpeta de subidas podemos usar:

define( 'UPLOADS', '/public/subidas' );

// Modificando el intervalo de autoguardado en las entradas
// cuando se edita una entrada WordPress usa AJAX para realizar un
// autoguardado por defecto 60 segundos, podemos modificarlo:

define('AUTOSAVE_INTERVAL', 160 );

// Revisiones de las entradas
// WordPress por defecto guarda copias cada vez que editamos
// una entrada, esto a largo plazo terminara por llenar la tabla de
// wp_posts con entradas marcadas como revisiones, podemos deshabilitar
// o cambiar el máximo de las revisiones:

define('WP_POST_REVISIONS', false ); //deshabilitarlas
define('WP_POST_REVISIONS', 3); //poner maximo a 3

// Definir el dominio del sitio en las cookies
// si usamos subdominios para almacenar en el mismo hosting mas
// instalaciones de WordPress, podemos definir en cada instalación el
// dominio a usar para evitar problemas con el login:

define('COOKIE_DOMAIN', 'www.midominio.com');

// Aumentar la memoria asignada a PHP
// en algunos servidores compartidos la memoria asignada a PHP es muy baja
// y esto hacé que WordPress presente el error:
// Allowed memory size of xxxxxx bytes exhausted, podemos aumentar
// este valor para evitar este error:

define('WP_MEMORY_LIMIT', '96M');

// Vaciar la papelera de entradas y paginas
// podemos configurar el tiempo en el que WordPress mantiene las entradas
// y paginas en la papelera

define('EMPTY_TRASH_DAYS', 3 ); //3 días

// Optimización a automática de la Base de datos
// desde la versión 2.9 existe un script capaz de automatizar y reparar
// la BD MySql podemos habilitarlo:

define('WP_ALLOW_REPAIR', true);

// Deshabilitar globalmente la edición de temas y plugins
// esta linea deshabilita la edición de código desde el panel de control:

define('DISALLOW_FILE_EDIT',true);

// Deshabilitar las actualizaciones e instalación de plugins y temas
// en algunos proyectos es recomendable realizar manualmente estas
// actualizaciones y por seguridad deshabilitar la instalación de temas
// y plugins:

define('DISALLOW_FILE_MODS',true);

// Permite forzar el uso de SSL para el login de usuarios y de
// administradores:
// las opciones son true para habilitar y false para desactivar

define('FORCE_SSL_LOGIN',true); //ssl para usuarios
define('FORCE_SSL_ADMIN',true); //ssl para administradores

Y esto es todo por el momento, en otro articulo, profundizaremos mas este tema.

Lenguajes, lenguas y dialectos

o García Morales

Case Reas y Ben Fry, en su libro Processing. A Programming Handbook for Visual Designers and Artists sugieren Como los lenguajes humanos, los lenguajes de programación pueden ser agrupados en conjuntos relacionados

Esta conexión podría sugerir una conexión más fuerte, pero no es así. El desarrollo de los lengua­jes de programación nada o poco tiene que ver con sus parientes humanos. De hecho, los len­guajes de programación se parecen mucho más entre sí, son muchos menos y, se puede decir sin herrar demasiado, que tienen casi las mismas raíces; a diferencias de las lenguas.
Se estima que, en las casi 200 naciones del globo, se hab­lan más de 5000 lenguas y 41000 dialectos mientras que existen sólo unos cientos lenguajes de programación dife­rentes producidos por menos de una cuarta parte de todas las naciones.
Según la Wikipedia un lenguaje de programación es un conjunto de símbolos y reglas sintácticas y semánticas que definen su estructura y el significado de sus elementos y expresiones, y es utilizado para controlar el comportamien­to físico y lógico de una máquina.

Los ciento y un lenguajes de programación

Mucho han cambiado las cosas desde que IBM lanzó el primer computador personal pero, probablemente, el cambio de mayor impacto en todo este tiempo es que, debido al acelerado desarrollo de la electrónica, las comunicaciones y la informática (lo que hoy se da en llamar TIC, Tecnolo­gías de la Información y Comunicaciones), ha puesto en manos de cualquier ciudadano de a pie, el computador distri­buido más potente del mundo: internet. Cualquier computador tiene varios Giga hertzios de frecuencia en su reloj, o varios procesadores pero incluso, cuando ni aún así es suficiente, siempre se puede echar mano a miles, incluso millones, de computadores distribuidos por todo el mundo, dispuestos a compartir algún tiempo de proceso y garantizar la potencia de proceso requerida.
En el año 2004, O’Reilly diseñó un poster genial de la historia de los lenguajes de programación, donde muestra 50 años dorados, desde 1954 hasta 2004, en el ámbito de la programación (El poster se puede descargar en http:// oreilly.com/news/graphics/prog_lang_poster.pdf ). Por supues­to, no son todos los que están, ni están todos los que son (se­gún O’Reilly son los lenguajes de programación más impor­tantes); sin embargo, lo más interesante de este poster, es que muestra las derivaciones de los distintos lenguajes para crear otros (sus raíces). Por ejemplo, C#, se basa en C++ y Java2. C++, a su vez, se basa en C y Simula que, a su vez, vienen del Algol que proviene de Fortran y Fortran… es el primer lenguaje de programa­ción de alto nivel. Esta evolución evidencia las grandes similitudes y parentescos de la mayoría de los lenguajes entre sí. Los lenguajes se pueden relacionar en con­juntos según su nivel de abstracción, entorno de desarrollo, forma de ejecución o paradigma de programación.

Nivel de abstracción

El nivel de abstracción está relacionado con la capacidad del lenguaje de ocultar los detalles del ordenador. Los lenguajes de alto nivel están formados por elementos de lenguajes naturales, como el inglés. Sin embargo los lenguajes de bajo nivel interactúan con todas las especificidades del procesador (registros, operaciones, etc.). Las instrucciones del len­guaje de máquina son cadenas binarias (0 y 1) directamente legibles por la máquina (procesa­dor) o completamente incomprensibles (o in­tratables) para cualquier ser humano (Es im­portante tener en cuenta que todos los lengua­jes operan, finalmente, a nivel de código de máquina. La función última del compilador o intérprete es la conversión a lenguaje de máquina).

Entorno de desarrollo

Los lenguajes pueden ser textuales o visuales. El conjunto de símbolos y reglas sintácticas y se­mánticas que definen un lenguaje normalmente se pueden expresar textualmente. Sin embargo, los entornos visuales pretenden ayudar a aque­llos programadores que piensan espacialmente y prefieren organizar sus pensamientos como relaciones visuales entre elementos.

Forma de ejecución

Los lenguajes pueden ser compilados o in­terpretados. El compilador es un programa que traduce el código escrito con determina­do nivel de abstracción a código de máqui­na. Sin embargo los lenguajes interpretados no son compilados sino interpretados por otro programa mientras corre. Los lenguajes compilados son más rápidos mientras los programas interpretados pueden ser modifi­cados mientras corren. El refinamiento de tal intérprete ha derivado en máquina virtual. El lenguaje es pseudo compilado a un có­digo intermedio (byte code) que corre en la máquina virtual. Esta técnica facilita la por­tabilidad del código entre las diferentes ar­quitecturas o hardware.

Paradigma de programación

El paradigma de programación representa un enfoque particular o filosofía para la construcción del software. Según tal, los lenguajes pueden ser imperativos o procedimentales (es considerado el más común y está represen­tado, por ejemplo, por el C o por BASIC); funcionales (expresivos y matemáticamente elegantes; por ejemplo LISP); lógicos (cuya característica principal es la aplicación de las reglas de la lógica para inferir conclusiones a partir de datos; por ejemplo PROLOG); u orientado a objetos (este paradigma usa objetos y sus interacciones y está basado en varias técnicas, incluyendo herencia, modula­ridad, polimorfismo y encapsulamiento). Un lenguaje completamente orientado a objetos es Smalltalk.
Si bien puede seleccionarse la forma pura de estos paradigmas, a la hora de programar, en la práctica lo habitual es que se mezclen, dando lugar a la programación multiparadigma.

pilares del lenguaje

Ante el desafío de la realización de un pro­yecto una de las preguntas necesarias, tarde o temprano, es, cuál es el lenguaje adecuado. La respuesta no es fácil y depende de muchos factores. Según se baja el nivel de abstracción los programas son más específicos y difíciles de mantener. Depende del grupo de desarrollo condicionará el entorno (y con ello las herra­mientas de trabajo). ¿Compilado? ¿Interpre­tado? Los lenguajes interpretados son más adecuados para pruebas rápidas. Sin embargo, cuando se requiera toda la eficiencia, habrá que utilizar algún lenguaje compilado. Por último, cuál paradigma será el más adecuado. La res­puesta es: depende del problema.
Esto podría conducirnos a alguna con­clusión del estilo: Hay tantos lenguajes como problemas; e incluso, si el problema es muy complejo probablemente se necesite del uso de más de un lenguaje para abordarlo. Sin embargo la respuesta no es tan simple y es necesario agregar algunas variables más.

Reusabilidad

Un lenguaje se hace potente en la medida que crece; propiedad que finalmente se puede tra­ducir en un buen soporte (muchas funciones y mucha gente detrás resolviendo proble­mas). Las funciones se agrupan en librerías o bibliotecas de funciones. Su potencia depende de quién las mantenga y desarrolle (los proyectos de software libre son mante­nidos por un mayor número de personas sin presiones comerciales). Su interacción con el lenguaje depende de la tecnología software (incrustada junto con el código, dinámica­mente, distribuido, etc.). Desde este punto de vista ¿se podría considerar que C# es un C++ bien soportado?

Disponibilidad

Relacionada con el entorno (arquitectura hard­ware y software). Los lenguajes, y sus respectivos compiladores o intérpretes, están dispo­nibles para determinados entornos con, posi­blemente, ciertas restricciones de uso. Aún cuando, presuntamente, el lenguaje más ade­cuado para nuestro problema sea X, la indis­ponibilidad de las herramientas de desarrollo para el entorno seleccionado será motivo, más que suficiente, de rechazo. La disponibilidad se puede ver igualmente al revés. Suponga que el entorno de trabajo es un navegador web; la aplicación será utilizada vía HTTP. El lenguaje de desarrollo estará limitado por los lenguajes implementados por el navegador (y lo utilizo en modo genérico porque unos a otros convergen en la medida en que se ha­cen compatibles). De nada vale que sea más adecuado programarlo en LISP si luego no encontramos ningún navegador que permita incorporar un intérprete LISP o, lo que es más grave, si el navegador que utiliza la mayoría de los clientes, no lo tiene.

Durabilidad

El propio poster de O’Reilly muestra el ciclo de vida completo de los lenguajes que referen­cia (al menos hasta el 2004). Es fácil ver cómo muchos se convierten en otros y mueren. Qué pasa si la aplicación que queremos desarro­llar simplemente ponga a prueba el paso del tiempo. Qué pasa con aquellas aplicaciones que duran. Cómo elegir un lenguaje duradero. Por muchos lenguajes que existan pocos han resistido al paso del tiempo. Un buen ejemplo de ello es el lenguaje C. De hecho, se podría hacer en C absolutamente todo lo que en C++ con muy poco esfuerzo. ¿Qué es lo que ha hecho a C tan resistente? Probablemente la conjunción de un buen diseño del lenguaje, la gran disponibilidad de herramientas y li­brerías y una buena desconexión con la en­trada/salida.

Pocos son más

Un buen amigo dice que los lenguajes son necesarios para garantizar la variedad (tam­bién para dar de comer a los informáticos) y probablemente tenga algo de razón; pero los lenguajes no son lenguas, ni razas, ni socie­dad, sino instrumentos para programar los pro­cesadores de propósitos generales y garantizar determinado funcionamiento. Sacaremos ma­yor rendimiento a un lenguaje con un dominio perfecto de su sintaxis, reutilizando códigos y fortaleciéndolo.
Supongamos por un momento que dispo­nemos de las herramientas necesarias, para cualquier entorno; para elegir libremente el lenguaje adecuado. Suponga que podemos dividir en tres el nivel de abstracción de las aplicaciones; algo así como bajo, medio y alto. El nivel bajo requiere de un control absoluto del hardware, traducible en código máquina (lenguaje ensamblador) o C, que nos permitirá hacer el mismo trabajo (incluso incluir partes críticas del código en lenguaje ensamblador) con un nivel de abstracción mayor. Para nivel medio el C sería también un excelente candi­dato, incluso si se quiere emplear el paradigma de programación orientado a objetos pero C no es interpretado. Para muy alto nivel probable­mente sería recomendable LISP, con cierto solapamiento con C.
LISP es un lenguaje funcional (utiliza las propiedades matemáticas de las funciones) y multiparadigma, de alto nivel; simbólico (utiliza el símbolo como unidad fundamental) de procesamiento de listas (LISt Procesing); muy flexible (utiliza la misma estructura para datos y código; una de las características de LISP es la posibilidad de tratar las propias funciones como datos (50 años después resulta que es posible considerar XML, tan de moda para el intercambio de datos entre verlo como una máquina virtual susceptible de correr en entornos de bajo nivel de abs­tracción. Como hemos supuesto una buena reusabilidad se da por hecho un buen sopor­te para todo tipo de aplicaciones: web, SOA, imagen y sonido, compiladores, procesa­dores de texto, entornos multiplataforma, matemáticas, etc. y, lo que es más importan­te, un buen soporte de la comunidad de soft­ware libre.

Concluyendo

La diversificación de los lenguajes de pro­gramación es necesaria en la medida que introduzca nuevos paradigmas, debilite la dependencia con los sistemas operativos (potencie multiprocesamiento, distribución y con ello la generalización de entornos de operación), y otras muchas razones. No así la transmisión de sintaxis, o la imposición de determinados usos o tecnologías por razones comerciales; con la excusa de fa­cilitar el trabajo del programador, etcétera. Los ejemplos utilizados en este artículo pretenden demostrar que muchos de los lenguajes más antiguos (como LISP y C) si­guen siendo igual de potentes y útiles, y po­co o nada tienen que envidiar a los últimos de moda; sin embargo la diversificación de los entornos o herramientas no es tan con­siderada como la de los lenguajes. Si con­siderásemos los lenguajes como criaturas y los entornos… vitales, es fácil establecer la conexión. Desde ese punto de vista, po­tenciando el entorno, probablemente en el poster de O’Reilly, 50 años después, las fle­chas serían más largas y menos conectadas entre sí. Sin embargo la naturaleza sigue su curso. ¿Cuál será la próxima bestia?

Quote of the Day:
After three days, fish and guests stink.
–John Lyly