domingo, 14 de junio de 2015

Box-sizing: el secreto para diseños simples

Box-sizing es una propiedad CSS que hace que los diseños CSS trabajen intuitivamente. Si usted ha estado trabajando con CSS por cualquier periodo de tiempo, sabes que puede ser confuso utilizar caracteristicas como width, padding y border. Aveces cuando se utiliza la propiedad width, no siempre aplica de la manera en la que usted podria esperar, sin embargo con la propiedad box-sizing, un ancho de 200px realmente significa un ancho de 200px renderizado. Que no implica ninguna magia de Javascript, y funciona incluso a traves de navegadores en IE8. Profundicemos.

El modelo de caja

La anchura (width) y altura (height) de cualquier elemento de una pagina web se rige por el modelo de caja CSS. Los matices del modelo de caja pueden ser algo complejos, pero la parte mas importante de entender es como se calculan la altura y anchura prestadas. Una combinacion de varias propiedades CSS forma la anchura (width) real representada y la altura de la pagina.

padding + border + width = anchura real procesada
padding + border + height = altura real procesada

Eso es un poco confuso, asi que aqui hay una ilustracion que les puede ayudar.

Sin box-sizing, la propiedad width representa el area de contenido del elemento. El tamaño real prestado representa el width, padding y border.

Esto significa que si establece un ancho de algo parecido a 200px o un ancho relativo del 25% el elemento solo sera de ese tamaño exacto si no tiene padding o border. Si tiene padding o border (o ambos), el tamaño real prestado sera mayor. Dicho de otro modo, la propiedad width significa simplemente la anchura del area de contenido y no la anchura total del elemento.

Como resultado, calcular un ancho (width) deseado en la pagina implica restar el padding y border de la propiedad width. Por ejemplo, si establece un width de 200px y luego desea 20px de padding a cada lado, tienes que pedir prestado 40px (20px y 20px para derecha e izquierda) del width. Lo mismo es valido para la propiedad border. Esto hace el codigo mucho menos legible, por que el elemento procesado aun es de 200px, podria tener codigo que se lee como esto:

.sidebar{
    width: 158px;
    padding: 20px;
    border:1px solid #DDD;
}


No es muy intuitivo par la propiedad width a decir 158px si el ancho real prestado es 200px. Afortunadamente, hay un mejor metodo que logra el mismo resultado.

* {box-sizing: border-box;}

En lugar de calcular el ancho (width) incluyendo el padding y border, la propiedad box-sizing en combinacion con el valor border-box utiliza la propiedad width como el ancho real prestado. El codigo anterior podria modificarse para ver algo como esto:

.sidebar{
    box-sizing:border-box;
    width: 200px;
    padding:20px;
    border:1px solid #DDD;
}


Cualquier padding o border que se aplique no se agregará a la anchura procesada. Por el contrario, se restaran automaticamente desde el espacio de contenido (content). Esto resulta en un codigo mucha mas legible. Aqui esta una imagen que ayuda a ilustrar como box-sizing:border-box calcula el ancho.


Con box-sizing habilitado, la propiedad width es la real representada del ancho del elemento. El area del contenido es automaticamente establecido con el tamaño del ancho restante, despues de haber restado el padding y el border.

De hecho, muchos reputados diseñadores y desarrolladores web han defendido utilizando box-sizing:border-box; a traves de todos los elementos de la pagina para un enfoque mas natural e intuitivo de diseño, Paul Irish recomienda usar el siguiente codigo:

*, *:before, *:after{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}


La propiedad box-sizing no es nada nuevo, pero solo en los ultimos años a sido una tecnica viable gracias al apoyo del navegador internet explorer (y version anterior de ie fuera de uso). Este codigo funciona en ie8, que es bastante perdonador considerando que la version ie11 es la version mas reciente. Para obtener mas informacion sobre compatibilidad de tu navegador, compruebe las tablas de soporte de caniuse.com para border-box.

Recursos box-sizing

Como si box-sizing no fuese lo suficientemente grande, podria estar encantado de encontrar que ya esta dentro de front-end frameworks como bootstrap. Por defecto estos frameworks aplican convenientemente box-sizing a todo, esto hace mas facil de entender sus sistemas de grillas (grid systems).

Traducido por arthusu desde treehouse blog


 

sábado, 13 de junio de 2015

[Minitutorial]AJAX

Introduccion a AJAX

AJAX es acerca de la actualizacion de las partes de una pagina web, sin necesidad de recargar toda la pagina. 

¿Que deberia de saber? 

Antes de continuar deberia tener una comprension basica de lo siguiente:

* HTML / XHTL
* CSS
* Javascript / DOM

¿Que es AJAX?

AJAX = Asynchronous Javascript and XML.
AJAX es una tecnica para crear paginas web rapidas y dinamicas. AJAX permite a paginas web actualizarse de forma asincrona intercambiando pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una pagina web, sin necesidad de recargar toda la pagina. Paginas web clasicas (que no usan AJAX) deben volver a cargar toda la pagina si el contenido cambia. Algunos ejemplos de aplicaciones usando AJAX: las pestañas de Google Maps, Gmail, Youtube y Facebook.

Como trabaja AJAX


AJAX se basa en estandares de internet

AJAX se basa en estandares de internet y utiliza una combinacion de:

* Objeto XMLHttpRequest (para intercambiar datos asincronicamente con el servidor)
* Javascript/DOM (Para mostrar, interactuar con la informacion)
* CSS (El estilo de los datos)
* XML (A menudo utilizado como el formato de transferencia de datos)

Aplicaciones AJAX son independientes del navegador y plataforma. 

Google sugestor

AJAX se hizo popular en 2005 por Google, con Google sugestor.
Google sugestor es usando AJAX para crear una interfaz web muy dinamica: cuando empiezas a escribir en el buscador de Google, un javascript envia las letras a un servidor y el servidor devuelve una lista de sugerencias.

Empezar a usar AJAX hoy

AJAX se basa en las normas vigentes. Estas normas han sido usadas por los desarrolladores durante varios años. 

Ejemplo de AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("midiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax_info.txt",true);
        xmlhttp.send();
    }

</script>
<body>
    <div id="midiv"><h2>Deja que AJAX cambie este texto</h2></div>
    <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
</body>
</html>


ajax_info.txt:

AJAX no es un nuevo lenguaje de programacion.<br />
AJAX es una tecnica para crear sitios webs rapidos y dinamicos.


Ejemplo de AJAX explicado

La aplicacion AJAX de arriba contiene una seccion div y un button. La seccion div se utilizará para mostrar la informacion devuelta desde un servidor. El boton llama a una funcion llamada loadXMLDoc(), si se hace clic en:

<button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>

A continuacion, agregamos una etiqueta de <script> a la seccion head de la pagina. La seccion del script contiene la funcion loadXMLDoc():

function loadXMLDoc(){
// el script ajax va aqui
}

AJAX crea un objeto XMLHttpRequest

La piedra angular de AJAX es el objeto XMLHttpRequest

El Objeto XMLHttpRequest

Todos los navegadores modernos apoyan el objeto XMLHttpRequest (IE5 e IE6 utilice ActiveXObject). Se utiliza el objeto XMLHttpRequest para intercambiar datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una pagina web, sin necesidad de recargar toda la pagina.

Crear un objeto XMLHttpRequest

Todos los navegadores modernos (ie7+, firefox, chrome, safari, opera) tienen un objeto XMLHttpRequest integrado. Sintaxis para crear un objeto XMLHttpRequest:

variable = new XMLHttpRequest();

Versiones antiguas de internet explorer (ie5, ie6) utilizan el objeto Activex:

variable = new ActiveXObject();

Para manejar todos los navegadores modernos incluyendo IE5 y IE6, compruebe que el explorador admite el objeto XMLHttpRequest. Si lo hace crear un objeto XMLHttpRequest, sino crear un objeto ActiveXObject.

if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } 
 


AJAX enviar una solicitud al servidor

Se utiliza el objeto XMLHttpRequest para intercambiar datos con un servidor.

Enviar una solicitud a un servidor

Para enviar una solicitud a un servidor, utilizamos los metodos open() y send() del objeto XMLHttpRequest:

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

+------------------------+-------------------------------------------------------------------------------+
| Metodo                 | Descripcion                                                                   |
+------------------------+-------------------------------------------------------------------------------+
| open(method,url,async) | Especifica el tipo de solicitud, la direccion URL, y si la solicitud debe ser |
|                        | manejada de forma asincrona o no.                                             |
|                        | * method: el tipo de peticion GET o POST.                                     |
|                        | * url: la ubicacion del archivo en el servidor.                               |
|                        | * async: true (asincrona) o falso (sincrono)                                  |
+------------------------+-------------------------------------------------------------------------------+
| send(string)           | Envia la solicitud al servidor.                                               |
|                        | * string: utilizado para las peticiones por POST.                             |
+------------------------+-------------------------------------------------------------------------------+ 
 
¿GET o POST?

GET es mas sencillo y rapido que POST, y puede ser utilizado en la mayoria de los casos. Sin embargo, siempre se puede usar POST cuando la peticion:

* Un archivo almacenado en caché no es una opcion (actualizacion de un archivo o base de datos del servidor)
* Enviar una gran cantidad de datos al servidor (POST no tiene limitaciones de tamaño)
* Envio de inputs del usuario (que puede contener caracteres desconocidos), POST es mas robusto y seguro que GET

Peticiones GET

Una simple peticion GET.

Ejemplo:

xmlhttp.open("GET","demo_get.php",true);
xmlhttp.send();


En el ejemplo anterior, usted puede obtener un resultado del cache:

Ejemplo:

xmlhttp.open("GET","demo_get.php?t=" + Math.random(),true);
xmlhttp.send();


Si desea enviar informacion con el metodo GET, agregue la informacion a la URL:

xmlhttp.open("GET","demo_get2.php?nombre=Henry&apellido=Ford",true);
xmlhttp.send();


Peticiones POST

Una simple peticion POST:

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.send();

Para enviar datos como un formulario HTML, agregue un encabezado HTTP con setRequestHeader() y especificar los datos que desea enviar en el metodo send():

xmlhttp.open("POST","demo_post.php",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("nombre=Henry&apellido=Ford");


+----------------------------------+------------------------------------------------+
| Metodo                           | Descripcion                                    |
+----------------------------------+------------------------------------------------+
| setRequestHeader(cabecera,valor) | Agrega una cabecera HTTP a la peticion.        |
|                                  | Cabecera: especifica el nombre de la cabecera. |
|                                  | Valor: especifica el valor de la cabecera      |
+----------------------------------+------------------------------------------------+


La URL - un archivo en el servidor


El parametro URL del metodo open(), es una direccion a un archivo en el servidor:


xmlhttp.open("GET","ajax_prueba.php",true);


El archivo puede ser cualquier tipo de archivo como .txt o .xml o scripts de servidor tales como .asp o .php (que pueden realizar acciones en el servidor antes de enviar la respuesta de nuevo hacia atras).

¿Asincronico - verdadero o falso?

AJAX significa asynchronous javascript and xml, y para que el objeto XMLHttpRequest se comporte como AJAX, ha establecido el parametro del metodo open() de async en true:

xmlhttp.open("GET","ajax_prueba.php",true);

Enviar solicitudes asincronicas es una enorme mejora para desarrolladores web. Muchas de las tareas ejecutadas en el servidor son muy lentas. Antes AJAX, podia causar que la aplicacion se colgara y parará. Con AJAX, javascript no tiene que esperar la respuesta del servidor, pero puede en cambio:

* Ejecutar otros scripts esperando respuesta
* Lidiar con la respuesta cuando la respuesta este lista

Async=true

Cuando use async=true, especifica una funcion a ejecutar cuando la respuesta esta en el evento onreadystatechange:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
</head>
<script type="text/javascript">
    function loadXMLDoc(){
        var xmlhttp;
        if(window.XMLHttpRequest){
            // codigo para IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }else{
            // codigo para IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("midiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","ajax_info.txt",true);
        xmlhttp.send();
    }

</script>
<body>
    <div id="midiv"><h2>Deja que AJAX cambie este texto</h2></div>
    <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
</body>
</html>


Async=false


Usar async=false, cambia el tercer parametro del metodo open() en false:


xmlhttp.open("GET","ajax_info.txt",false);


Usar async=false, no es recomendable pero para unas peticiones pequeñas esto puede ser aceptable. Recuerde que javascript no continuará ejecutandose, hasta que el servidor este listo. Si el servidor esta ocupado o lento, la solicitud se parará o colgará.
Nota: cuando usted use async=false, no escriba una funcion onreadystatechange, solo ponga el codigo despues de la declaracion send().


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlhttp;
            if(window.XMLHttpRequest){
                // codigo para IE7+, firefox, chrome, opera, safari
                xmlhttp = new XMLHttpRequest();
            }else{
                // codigo para IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","ajax_info.txt",false);
            xmlhttp.send();
            document.getElementById("midiv").innerHTML = xmlhttp.responseText;
        }
    </script>
</head>
<body>
    <div id="midiv">
        <h2>Deja que AJAX cambie este texto</h2>
        <button type="button" onclick="loadXMLDoc()">Cambiar el contenido</button>
    </div>
</body>
</html>



AJAX - respuesta del servidor


Para obtener la respuesta de un servidor, utilice la propiedad responseText o responseXML del objeto XMLHttpRequest.


+--------------+------------------------------------------------+
| Propiedad    | Descripcion                                    |
+--------------+------------------------------------------------+
| responseText | obtiene los datos de respuesta como una cadena |
+--------------+------------------------------------------------+
| responseXML  | obtiene los datos de respuesta como datos XML  |
+--------------+------------------------------------------------+


La propiedad responseText


Si la respuesta del servidor no es XML, utilice la propiedad responseText. La propiedad responseText devuelve la respuesta como una cadena, y se puede utilizar por consiguiente:

document.getElementById("midiv").innerHTML=xmlhttp.responseText;

La propiedad responseXML

Si la respuesta del servidor es XML y desea analizar como un objeto XML, utilice la propiedad responseXML:

Ejemplo

Solicitar el archivo cd_catalog.xml y analizar la respuesta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function loadXMLDoc(){
            var xmlhttp;
            var txt, x, i;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    xmlDoc = xmlhttp.responseXML;
                    txt="";
                    x=xmlDoc.getElementsByTagName("ARTIST");
                    for(i=0;i<x.length;i++){
                        txt= txt + x[i].childNodes[0].nodeValue + "<br>";
                    }
                    document.getElementById("midiv").innerHTML=txt;
                }
            }
            xmlhttp.open("GET","cd_catalog.xml",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <h2>Mi coleccion de CD's:</h2>
    <div id="midiv"></div>
    <button type="button" onclick="loadXMLDoc()">Obtener mi coleccion de CD's</button>
</body>
</html>


AJAX - el evento onreadystatechange

Cuando se envia una solicitud a un servidor, queremos realizar algunas acciones basados en las respuestas. El evento onreadystatechange se activa cada vez que readyState cambia. La propiedad readyState tiene el status de XMLHttpRequest. Tres importantes propiedades del objeto XMLHttpRequest:



+--------------------+------------------------------------------------------------------------+
| Propiedad          | Descripcion                                                            |
+--------------------+------------------------------------------------------------------------+
| onreadystatechange | almacena una funcion (o el nombre de la funcion) que se                |
|                    | llama automaticamente cada vez los cambios de la propiedad readyState. |
+--------------------+------------------------------------------------------------------------+
| readyState         | Tiene la condicion de XMLHttpRequest. Cambia desde el 0 al 4:          |
|                    | 0: peticion no inicializada                                            |
|                    | 1: conexion de servidor establecido                                    |
|                    | 2: solicitud recibida                                                  |
|                    | 3: proceso de solicitud                                                |
|                    | 4: acabado de peticion y respuesta lista                               |
+--------------------+------------------------------------------------------------------------+
| status             | 200: "OK"                                                              |
|                    | 404: Page not found                                                    |
+--------------------+------------------------------------------------------------------------+




Ejemplo:


xmlhttp.onreadystatechange=function{
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("midiv").innerHTML=xmlhttp.responseText;
}
}


Nota: El evento onreadystatechange se dispara cinco veces (0-4), una vez para cada cambio de readyState.


Usando una funcion de devolucion de llamada (callback)


Una funcion callback es una funcion que se pasa como parametro a otra funcion. Si tienes mas de una tarea AJAX en tu web, debe crear una funcion estandar para crear el objeto XMLHttpRequest y llamar a esta para cada tarea de AJAX. La llamada de funcion debe contener la direccion URL y qué hacer en onreadystatechange (que es probablemente diferente para cada llamada):

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url,cfunc){
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }else{
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=cfunc;
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }

        function myFunction(){
            loadXMLDoc("ajax_info.txt",function(){
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            });
        }
    </script>
</head>
<body>
    <div id="myDiv"><h2>Dejar que AJAX cambie este texto</h2></div>
    <button type="button" onclick="myFunction()">Cambiar el contenido</button>
</body>
</html>


AJAX y PHP

AJAX es utilizado para crear aplicaciones mas interactivas.

AJAX PHP Ejemplo


El siguiente ejemplo demostrará como una pagina puede comunicarse con un servidor web solo tecleando caracteres en un campo de entrada:

http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_suggest_php

Cuando el usuario escribe un caracter en el campo de entrada se ejecuta una funcion llamada "showHint()", la funcion se activa en el evento onkeyup. Aqui esta el codigo HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript">
        function showHint(str){
            if(str.length==0){
                document.getElementById("txtHint").innerHTML="";
                return;
            }else{
                var xmlhttp=new XMLHttpRequest();
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState==4 && xmlhttp.status==200){
                        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","gethint.php?q="+str,true);
                xmlhttp.send();
            }
        }
    </script>
</head>
<body>
    <p><b>Comienza a teclear un nombre en el campo de entrada de abajo:</b></p>
    <form action="">
        Primer nombre: <input type="text" id="txt1" onkeyup="showHint(this.value)">
    </form>
    <p>Sugerencias: <span id="txtHint"></span></p>
</body>
</html>


Explicacion del codigo:

En primer lugar, comprobamos si el campo de entrada esta vacio (str.length == 0). Si es asi, dejamos en blanco el contenido del marcador txtHint (el span) y salimos de la funcion. Sin embargo, si el campo no esta vacio, hará lo siguiente:

* Crear un objeto XMLHttpRequest
* Crear una funcion a ejecutar cuando la respuesta del servidor esta lista
* Enviar la solicitud a un archivo PHP (gethint.php) en el servidor
* Observe que el parametro q es agregado gethint.php?q="+str
* La variable str tiene el contenido del campo de entrada

El archivo gethint.php

El archivo PHP comprueba una serie de nombres y devuelve el nombre correspondiente al navegador:

<?php
    // array con nombres
    $a[] = "Anna";
    $a[] = "Brittany";
    $a[] = "Cinderella";
    $a[] = "Diana";
    $a[] = "Eva";
    $a[] = "Fiona";
    $a[] = "Gunda";
    $a[] = "Hege";
    $a[] = "Inga";
    $a[] = "Johanna";
    $a[] = "Kitty";
    $a[] = "Linda";
    $a[] = "Nina";
    $a[] = "Ophelia";
    $a[] = "Petunia";
    $a[] = "Amanda";
    $a[] = "Raquel";
    $a[] = "Cindy";
    $a[] = "Doris";
    $a[] = "Eve";
    $a[] = "Evita";
    $a[] = "Sunniva";
    $a[] = "Tove";
    $a[] = "Unni";
    $a[] = "Violet";
    $a[] = "Liza";
    $a[] = "Elizabeth";
    $a[] = "Ellen";
    $a[] = "Wenche";
    $a[] = "Vicky";

    // obtenemos el parametro q de la url
    $q = $_GET['q'];
    $hint='';

    // buscamos todas las sugerencias en el array si $q es diferente de ""
    if($q !== ''){
        $q = strtolower($q);
        $len = strlen($q);
        foreach($a as $name){
            if(stristr($q,substr($name, 0, $len))){
                if($hint === ''){
                    $hint = $name;
                }else{
                    $hint .= ", $name";
                }
            }
        }
    }

    // Mostramos "no hay sugerencias" si no se encontro ningun hint o una salida con valores correctos
    echo $hint === '' ? 'No hay sugerencias' : $hint;
?>


 
Hasta aqui este minitutorial de AJAX, el cual fue una traduccion de W3schools






viernes, 5 de junio de 2015

[Parte 10]jQuery

jQuery - Efectos

jQuery ofrece una interfaz simple trivial para hacer diferentes tipos de efectos asombrosos. jQuery nos permite metodos para aplicar efectos rapidamente con la configuracion minima. Este tutorial cubre todos los metodos importantes de jQuery para crear efectos visuales.

Mostrar y ocultar elementos

Los comandos para mostrar y ocultar elementos son bastante lo que se espera. show() para mostrar los elementos en un conjunto envuelto y hide() para ocultarlos.

Sintaxis

Aqui esta la sintaxis para el metodo show():

[selector].show(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

La siguiente sintaxis es para el metodo hide():

[selector].hide(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

Ejemplo:

Considere el siguiente archivo HTML como un pequeño codigo jQuery:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#show").click(function(){
            $(".midiv").show(1000);
        });
        $("#hide").click(function(){
            $(".midiv").hide(1000);
        });
    });
    </script>
    <style type="text/css">
        .midiv{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="midiv">
        Este es un CUADRADO
    </div>
    <input type="button" id="hide" value="Ocultar" />
    <input type="button" id="show" value="Mostrar" />
</body>
</html>



Alternar los elementos

jQuery ofrece metodos para cambiar el estado de la visualizacion de los elementos entre mostradas u ocultas. Si el elemento se muestra al principio, se oculta. Si se oculta, se mostrará.

Sintaxis

Aqui se muestra la sintaxis para el metodo toggle():

[selector].toggle(speed,[callback]);

Aqui la descripcion de todos los parametros:

speed - Una cadena que representa una de las tres velocidades predefinidas ("slow", "normal", o "fast") o el numero de milisegundos para ejecutar la animacion (por ejemplo: 1000).

callback - Este parametro opcional representa una funcion a ejecutarse cuando la animacion se completa, se ejecuta una vez para cada elemento animado.

Ejemplo:

Podemos animar a cualquier elemento como un simple <div> que contiene una imagen.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".clic").click(function(event){
            $(".target").toggle('slow',function(){
                $(".log").text('Transicion completa');
            });
        });
    });
    </script>
    <style type="text/css">
        .clic{
            margin:10px;
            padding: 12px;
            border:2px solid #666;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="clic">
        Dame clic
    </div>
    <div class="target">
        <img src="imgs/jquery.jpg" alt="jQuery" />
        <div class="log"></div>
    </div>
</body>
</html>



jQuery Metodos para efectos

Han visto el concepto basico de los efectos en jQuery. La siguiente tabla enumera todos los metodos importantes para crear diferentes tipos de efectos:


+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| Metodos                                    | Descripcion                                                                                             |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| animate(params,[duration,easing,callback]) | Una funcion para hacer animaciones.                                                                     |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeIn(speed,[callback])                   | Desaparece hacia adentro en todos los elementos que coincidan                                           |
|                                            | ajustando su opacidad y disparar un callback opcional despues de                                        |
|                                            | terminar.                                                                                               |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeOut(speed,[callback])                  | Desaparece hacia afuera en todos los elementos que coincidan, si su opacidad                            |
|                                            | es ajustado a 0, display se muestra en "none", dispara una funcion despues de terminar.                 |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| fadeTo(speed,opacity,[callback])           | Le asigna una opacidad especifica a todos los elementos que coincidan y dispara un callback             |
|                                            | opcional despues de terminar la transicion.                                                             |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide()                                     | Esconde cada uno de los elementos que coincidan si son mostrados.                                       |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| hide(speed,[callback])                     | Oculta todos los elementos coincidentes con una elegante animacion y dispara un callback                |
|                                            | opcional despues de terminar la transicion.                                                             |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show()                                     | Muestra cada uno de los elementos que coincidan si estan ocultos.                                       |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| show(speed,[callback])                     | Muestra todos los elementos que coincidan con una elegante animacion y dispara un callback              |
|                                            | opcional despues de terminar.                                                                           |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideDown(speed,[callback])                | Muestra todos los elementos que coincidan ajustandose en altura, dispara un callback opcional           |
|                                            | despues de terminar.                                                                                    |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideToggle(speed,[callback])              | Alterna la visibilidad de todos los elementos que coincidan ajustandose en altura, dispara un           |
|                                            | callback opcional despues de terminar.                                                                  |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| slideUp(speed,[callback])                  | Oculta todos los elementos que coincidan ajustandose en altura, dispara un callback                     |
|                                            | opcional despues de terminar.                                                                           |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| stop([clearQueue,gotoEnd])                 | Detiene todas las animaciones ejecutandose en los elementos especificados.                              |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle()                                   | Alterna la visibilidad de todos los elementos que coincidan.                                            |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| toggle(switch)                             | Alterna la visibilidad de todos los elementos que coincidan basados en el switch (true - muestra todos  |
|                                            | los elementos, false - esconde todos los elementos)                                                     |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+
| jQuery.fx.off                              | Desabilita globalmente todas las animaciones.                                                           |
+--------------------------------------------+---------------------------------------------------------------------------------------------------------+





Traduccion por arthusu desde TutorialsPoint


domingo, 31 de mayo de 2015

[Parte 9]jQuery

jQuery - AJAX

AJAX es un acronimo que significa Asynchronous JavaScript and XML y esta tecnologia nos ayuda a cargar datos desde el servidor sin una actualizacion de la pagina del navegador.

jQuery es una gran herramienta que proporciona un rico conjunto de metodos AJAX para desarrollar aplicaciones web.

Cargando datos simples

Es muy facil cargar todos los datos estaticos o dinamicos utilizando AJAX en jQuery. jQuery proporciona el metodo load() para hacer esto - sintaxis:

[selector].load(URL,[data],[callback]);

Aqui esta la descripcion de todos los parametros:

URL - La URL del recurso del lado del servidor al que se envia la solicitud. Podria ser un CGI, ASP, JSP, PHP o script que genera datos de forma dinamica o fuera de una base de datos. 

data - Este parametro opcional representa un objeto cuyas propiedades son serializadas en parametros adecuadamente codificadas para ser pasado a la peticion. Si se especifica, la solicitud se realiza mediante el metodo POST. Si se omite, se utiliza el metodo GET.

callback - Una funcion callback se invoca despues de que los datos de respuesta se han cargado en el conjunto de elementos. El primer parametro pasado a esta funcion es el texto de respuesta recibido desde el servidor y el segundo parametro es el codigo de estado.

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            $('#stage').load('archivos/resultado.html')
        })
    });
    </script>
</head>
<body>
    <p>De clic en el boton cargar para leer el archivo /archivos/resultado.html</p>
    <div id="stage" style="background-color:#cc0;">Escenario</div>
    <input type="button" id="driver" value="Cargar datos" />
</body>
</html>


Aqui load() inicia una peticion AJAX al archivo archivos/resultado.html especificado. Despues de cargar este archivo, todo el contenido es rellena en el interior del <div> con el id="stage", suponiendo que nuestro archivo HTML tiene una sola linea:

<h1>Este es el resultado</h1>


Obtener datos JSON

Habria una situacion en la que el servidor devolveria una cadena JSON en su peticion. jQuery tiene una funcion de utilidad getJSON() analiza la cadena JSON devuelta y hace que la cadena resultante este disponible para ser llamada en la funcion como primer parametro para tomar nuevas medidas. Sintaxis: Esta el la sencilla sintaxis del metodo getJSON():

[selector].getJSON(URL,[data],[callback]);

Aqui esta la descripcion de todos los parametros:

URL - La URL del recurso del lado del servidor en contacto a traves del metodo GET.

data - Un objeto cuyas propiedades sirven como pares nombre/valor se utilizan para la construccion de una cadena de consulta que se adjunta en la direccion URL, o una cadena de consulta con formato preformateada y codificada.

callback -  Una funcion se invoca cuando la solicitud es completada. El valor de los datos resultantes de la digestion del cuerpo de la respuesta como una cadena JSON es pasada como primer parametro a esta devolucion de llamada y el estado de respuesta como segundo. Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            $.getJSON('archivos/resultado.json',function(jd){
                $('#stage').html('<p>Nombre: ' + jd.name + '</p>');
                $('#stage').append('<p>Edad: ' + jd.age + '</p>');
                $('#stage').append('<p>Sexo: ' + jd.sex + '</p>');
            })
        })
    });
    </script>
</head>
<body>
    <p>De clic en el boton cargar para leer el archivo /archivos/resultado.json</p>
    <div id="stage" style="background-color:#cc0;">Escenario</div>
    <input type="button" id="driver" value="Cargar datos" />
</body>
</html>


Aqui el metodo de utilidad getJSON() inicia una peticion AJAX al archivo resultado.json especificado. Despues de cargar este archivo, todo el contenido se pasa a la funcion callback que finalmente se rellena en el interior del <div> con el id="stage". Suponiendo que nuestro archivo resultado.json contiene lo siguiente:

{
"name": "arthusu",
"age" : "21",
"sex": "Masculino"
}


Pasar los datos al servidor

Muchas veces se recogen el usuario y contraseña que se pasan al servidor para su posterior procesamiento. Usando jQuery AJAX hace que sea demasiado facil pasar los datos recogidos en el servidor usando el parametro data de cualquier metodo AJAX disponible. Ejemplo: Este ejemplo demuestra como a traves de un input se ingresa el nombre de usuario y es enviado a un script del servidor web que envia el resultado de regreso y es impreso.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#driver").click(function(event){
            var name = $("#name").val();
            $("#stage").load('archivos/resultado.php',{"name":name});
        })
    });
    </script>
</head>
<body>
    <p>Escriba su nombre y de clic en el boton:</p>
    <input type="text" id="name" size="40" /><br />
    <div id="stage" style="background-color:#cc0;">
        Etapa:
    </div>
    <input type="button" id="driver" value="Mostrar Resultado" />
</body>
</html>


Aqui esta el codigo escrito en resultado.php:

<?php
    if($_REQUEST['name']){
        $name = $_REQUEST['name'];
        echo "Bievenido " . $name;
    }
?>


Ahora puede introducir cualquier texto en el campo de entrada dado y luego hacer clic en el boton "Mostrar Resultado" para ver lo que se ha introducido en el campo de entrada.

Metodos jQuery AJAX

Ustedes han visto el concepto basico de AJAX usando jQuery. La siguiente tabla abajo enumera todos los metodos importantes jQuery AJAX que se puede utilizar en funcion de su necesidad de programacion.



+-------------------------------------------+--------------------------------------------------------------------------------------+
| Metodos                                   | Descripcion                                                                          |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.ajax(options)                      | Carga una pagina remota mediante una peticion HTTP.                                  |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.ajaxSetup(options)                 | Ajusta las peticiones globales de peticiones AJAX.                                   |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.get(url,[data],[callback],[type])  | Carga una pagina remota mediante una peticion HTTP GET.                              |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.getJSON(url,[data],[callback])     | Carga datos JSON utilizando una peticion HTTP GET.                                   |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.getScript(url,[callback])          | Carga y ejecuta un archivo javascript utilizando una peticion HTTP GET.              |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| jQuery.post(url,[data],[callback],[type]) | Carga una pagina remota mediante una solicitud HTTP POST.                            |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| load(url,[data],[callback])               | Carga el HTML desde un archivo remoto y lo inyecta dentro del DOM.                   |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| serialize()                               | Serializa un conjunto de elementos de entrada en una cadena de datos.                |
+-------------------------------------------+--------------------------------------------------------------------------------------+
| serializeArray()                          | Serializa todos los formularios y elementos del forumario como el metodo serialize() |
|                                           | pero devuelve una estructura de datos JSON para que trabaje con ellos.               |
+-------------------------------------------+--------------------------------------------------------------------------------------+


Eventos de jQuery AJAX

Puede llamar a varios metodos de jQuery durante el ciclo de vida de progreso de llamada AJAX. Basado en diferentes eventos/etapas, los siguientes metodos estan disponibles:


+------------------------+----------------------------------------------------------------------------------------------------+
| Metodo                 | Descripcion                                                                                        |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxComplete(callback) | Fija una funcion para ejecutarse cada vez que se finalize una peticion AJAX.                       |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxStart(callback)    | Fija una funcion para ejecutarse cada vez que inicia una peticion AJAX y no hay ya ninguno activo. |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxError(callback)    | Fija una funcion a ejecutar cuando falla una peticion AJAX.                                        |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxSend(callback)     | Fija una funcion para ser ejecutada antes de enviar una peticion AJAX.                             |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxStop(callback)     | Fija una funcion que se ejecuta cada vez que han terminado todas las peticiones AJAX.              |
+------------------------+----------------------------------------------------------------------------------------------------+
| ajaxSuccess(callback)  | Fija una funcion para ejecutarse cada vez que una peticion AJAX finaliza correctamente.            |
+------------------------+----------------------------------------------------------------------------------------------------+

Este texto fue sacado desde tutorialspoint solo es una traduccion, espero que les sea de utilidad.

viernes, 29 de mayo de 2015

Google Hacking

Introduccion
Buenas, en esta entrada trataré de explicar acerca de Google Hacking para usarlo en nuestras pruebas de penetracion o recoleccion de informacion en cualquier cosa que nos sirva, ya que con Google es solo saber utilizar de manera adecuada los operadores/directivas.

Tambien les puede interesar las siguientes entradas:
http://arthusu.blogspot.mx/2013/03/como-obtener-mejores-resultados-al.html
http://arthusu.blogspot.mx/2015/04/arthusu-mi-metodologia-pruebas-de.html

Informacion que nos interesa

En el caso de estar recolectando informacion sobre una pagina puede haber demasiadas cosas que nos interesarian saber, entre las cuales se encuentran:

* El lenguaje que usa la pagina web
* El sitema operativo del servidor web
* El software del sistema operativo del servidor
* La version del software del servidor
* Si el sitio web tiene Plugins
* Si el sitio web tiene CMS popular
* Que tipos de archivos contiene mas que otros
* La base de datos que utiliza
* Los subdominios que tiene

La mayoria de la informacion que nos puede interesar puede venir de vulnerabilidades, tales como:

* Errores en la web o servidor
* Directorios que sabemos que pueden incluir informacion sensible
* Archivos que incluyen contraseñas
* Firewalls web

Una de las paginas que incluye mucha informacion sobre dorks de google para poder realizar nuestras busquedas es: https://www.exploit-db.com/google-hacking-database/ 

Busquedas especificas

Para realizar busquedas especificas de lo que queramos encontrar en google utilizaremos los famosos "operadores" que incluye para referirse a cierto tipo de cosas. Comentare de manera rapida los usos de cada uno:

- Con este signo menos excluimos algunos resultados.
+ Con este operador + podemos incluir varias busquedas en los resultados.
~ Con esta tilde se buscan sinonimos de la palabra que le asignes.
* Se utiliza el asterisco como comodin de palabras extra.
" Podemos usar las comillas dobles para buscar una palabra exacta que este entre ellas.

OR (|) Puedes buscar almenos una de varias palabras


site: Obtiene resultados de sitios o dominios que le asignes.
link: Busca paginas externas que contienen enlaces del sitio que le asignes.
related: Busca sitios web relacionados al que le asignes.
info: Obtiene informacion sobre el sitio o dominio que le asignes.
cache: Comprueba como era la pagina o direccion que le asignes la ultima vez que google lo visito.
intitle: Con este operador buscamos en el titulo de la pagina entre las etiquetas  <title>
inurl: Con este operador buscamos que la url incluya lo que le asigamos en la busqueda.
define: Este operador se utiliza para definir un termino de la palabra que le asignes.
filetype/ext: Con estos operadores buscamos un archivo por su extension o tipo de archivo.
intext: Incluye terminos que esten en el <body> de la pagina.
insubject: Incluye terminos que esten en el las etiquetas de titulo de la pagina.
inanchor: Incluye terminos que tengan la etiqueta <a> dentro del <body> de la pagina web.


Google ignora algunas palabras

Google ignora varias palabras como son "a", "el", "de" ... que muchas veces solo harian la busqueda mas pesada por lo que es recomendable no utilizarlas cuando intentemos encontrar informacion. Y podemos hacer busquedas inteligentes en lugar de escribir "me duele la cabeza" podriamos escribir "dolor cabeza" con lo cual encontrariamos mejores resultados.

Buscar lo mas comun o mas afectado

Lo mejor para encontrar cosas es irnos a buscar lo mas comun o mas afectado en cualquier tipo de aplicacion web.

Mensajes de error: Failed to open stream, access denied, fatal error, division by zero, warning, error, include, ORA-xxxx, database error, error ocurred, error online, cannot modified header, a syntax error, the page cannot be found, internet information services, error diagnostic information, etc.
Mensajes HTTP: 200 OK, 300 Multiple choices, 301 Moved permanently, 302 Found, 304 Not Modified, 307 Temporary Redirect, 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 500 Internal server error, 501 Not implemented, 503 Service unavailable, 550 Permission denied, etc. Puedes ver una lista mas completa aqui: http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
Servidores web: ISS, Apache, Apache Tomcat, Nginx, Lighttpd, Jigsaw, Klone, Abys web server, Oracle web tier, x5 web server, zeus web server, IBM HTTP server, LiteSpeed web server, etc. Puedes ver una lista mas completa aqui: http://en.wikipedia.org/wiki/Comparison_of_web_server_software
CMS: Wordpress,joomla, drupal, prestashop, tynicms, etc. 


Busquedas comunes para vulnerabilidades

Hay muchos dorks, los dorks son de manera sencilla una simple cadena de caracteres con los operadores anteriores la cual nos arroja un resultado deseado, tal como "tarjetas de creditos", "contraseñas de usuarios", "paginas phishing", etc.

Vamos a ver algunas de las tecnicas que yo utilizo muy comunmente para encontrar algunas cosas en algun sitio web:

Crawling:

Con esto puedes ver todo lo que ha indexado google del sitio web que buscas.

site:tudominio.com

Pagina de administracion:

Podemos encontrar paginas de administracion utilizando. Algunos de los operadores y palabras comunes.

site:dominio.com intext:admin OR intext:administrator
site:dominio.com inurl:admin OR inurl:administrator

Subdominios:

site:dominioprincipal.com -site:www.dominioprincipal.com
site:dominioprincipal.com -site:www.dominioprincipal.com -site:www.subdominio1.principal.com

Extensiones:

site:dominio.com ext:pdf | ext:log | ext:txt | ext:bak

Algunas extesiones:  pdf, xls, rar, zip , tar.gz, htm, php, bak, sql, csv, txt, log, conf

Archivos phpinfo, robots, o backups:

site:.net intitle:phpinfo() inurl:info.php
inurl:"robots.txt" intext:"disallow:"
intext:config ext:bak intitle:"index of"


Acceso a directorios:

intitle:"index of"
site:tusitio.com intitle:"index of"

Errores: Los errores son muy comunes en cualquier sitio web o servidor:



Crea tu propio DORK

Para crear un dork solo necesitamos utilizar los operadores ya conocidos anteriormente. Muchos usuarios intentan con cosas comunes que ven o simplemente encuentran una vulnerabilidad en un CMS no muy conocidos y le pasan operadores para encontrarla.

Anteriormente puse algunos dorks que no vi en ningun lugar solo se me ocurrio utilizar los operadores por que podrian ser utiles para encontrar informacion, por ejemplo... una manera de encontrar un poco mas rapido la informacion seria utilizar el tip recomendado en la entrada que les recomende al inicio:

^inurl:"e-vendo.php?shop="


Otras formas de Google Hacking:

Google Hacking Imagenes:

Bueno esto no es algo nuevo pero podriamos utilizar la busqueda avanzada que nos proporciona google: https://www.google.es/advanced_image_search

O tambien intentar buscar la imagen deseada utilizando el mismo buscador de imagenes, ya sea subiendo la imagen o pegando la URL, podriamos encontrar cosas interesantes de la empresa o persona relacionada a la pagina web.

Google Hacking Mapas:

Esto tampoco es nuevo pero con los mapas de google: https://www.google.es/advanced_image_search
Nos es muy facil encontrar informacion sobre donde se encuentra la empresa o persona relacionada con la pagina web.

Bueno y hasta aqui este "tutorial" si se le puede llamar asi, no es nada de otro mundo, pueden ver muchos ejemplos en la pagina exploit-db la cual contiene muchos ejemplos para usar estos operadores, espero que a mas de uno le sea de utilidad y si encontrado lo que buscaban genial!