lunes, 2 de marzo de 2015

[Parte 2]jQuery

jQuery - Conceptos basicos

jQuery es un framework construido utilizando las capacidades de javascript. Asi que usted puede utilizar todas las funciones y otras capacidades disponibles en javascript. 

Cadena

Una cadena en javascript es un objeto inmutable que contiene ninguno, o varios caracteres. Los siguientes son ejemplos validos de una cadena de javascript:

"Esto es una cadena Javascript"
'Esto es una cadena Javascript'
'Esto es "realmente" una cadena Javascript'
"Esto es 'realmente' una cadena Javascript"


Numeros

Los numeros en javascript son de formato IEEE 754 de doble precision de 64 bits. Ellos son inmutables al igual que las cadenas. Los siguientes son ejemplos validos de numeros en javascript:

5350
120.27
0.26


Booleanos

Un booleano en javascript puede ser falso o verdadero. Si un numero es cero, el valor predeterminado es falso. Los siguientes son ejemplos validos en booleano de javascript:

true // verdadero
false //  falso
0 // falso
1 // verdadero
"" // falso
"hola"  // verdadero

 

Objetos

Javascript soporta el concepto de objetos muy bien. Puede crear un objeto usando literalmente object de la siguiente manera:

var emp = {
    nombre : "Sara",
    edad : 10
}


Usted puede escribir y leer las propiedades de un objeto utilizando la notacion de puntos de la siguiente manera:

// Obtener las propiedades del objeto
emp.nombre // ==> Sara
emp.edad // ==> 10

// Estableciendo las propiedades del objeto
emp.nombre = "Deisi" // <== Daisi
emp.edad = 20 // <== 20


Arrays

Puede definir arrays utilizando literalmente array de la siguiente manera:

var x = [];
var y = [1, 2, 3, 4, 5];


Un array tiene la propiedad length que es util para la iteracion:

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++){
    // Hacemos algo con x[i]
}


Funciones

Una funcion en javascript puede ser o bien nombrada o anonima. Una funcion nombrada se puede definir mediante la palabra clave function de la siguiente manera:

function nombrada(){
   
}


Una funcion anonima puede ser definida en forma similar que una funcion normal, pero no tendrá ningun nombre. Una funcion anonima se puede asignar a una variable o se pasa a un metodo como se muestra a continuacion:

var manejador = function(){
    // hacer algo aqui
}


jQuery hace uso de funciones anonimas con mucha frecuencia como sigue:

$(document).ready(function(){
    // Hacer algo aqui
});



Argumentos

La variable javascript arguments es una especie de array que tiene la propiedad de length. El siguiente ejemplo lo muestra muy bien:

function func(x){
    console.log(typeof x, arguments.length);
}

func(); // ==> "undefined", 0
func(1); // ==> "number", 1
func("1","2","3"); // ==> "string", 3


Los argumentos de los objetos tambien tienen una propiedad callee, que se refiere a la funcion que esta dentro de el. Por ejemplo:

function func(){
    return arguments.callee;
}

func(); // ==> func



Contexto

Javascript tiene la famosa palabra clave this que se refiere al contexto actual. Dentro de una funcion este contexto puede cambiar, dependiendo de como se llama la funcion:

$(document).ready(function(){
    // Esto hace referencia a window.document
});
$("div").click(function{
    // Esto se refiere al elemento div en el DOM
});


Puede especificar el contexto de una llamada utilizando los metodos incorporados call() y apply(). La diferencia entre ellos es la forma en que se pasan los argumentos. Call pasa todos los argumentos a traves de los arguments de la funcion, mientras apply acepta un array como arguments.


function scope(){
    console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar",[1,2]); // ==> "foobar", 1
scope.apply("foobar",[1,2]); // ==> "foobar", 2



Ambito

El ambito de una variable es la region de su programa en el que se define. Las variables en javascript tendran solo dos ambitos.

Variables globales: una variable global tiene un alcance global que significa que se define por todas partes en su codigo javascript. 

Variables locales: una variable local sera visible solo dentro de la funcion donde se define. Los parametros de la funcion son siempre locales a esa funcion.

Dentro del cuerpo de una funcion, una variable local tiene prioridad sobre una variable global con el mismo nombre:

var miVar = "global"; // ==> declaramos una variable global

function (){
    var miVar = "local"; // ==> declaramos una variable local
    document.write(miVar); // ==> local
}


Llamadas

Una callback (llamada) es una funcion de javascript plana pasado a algun metodo como argumento o una opcion. Algunas llamadas son solo eventos, llamados a dar al usuario la oportunidad de reaccionar cuando se activa un determinado estado. El sistema de eventos de jQuery utiliza estas llamadas en todas partes, por ejemplo:

$("body").click(function(event){
    console.log("click en: " + event.target);
});


La mayoria de las llamadas proporcionan argumentos y un contexto. En el ejemplo del controlador de eventos, la devolucion de la llamada se llama como argumento. Se necesitan algunas llamadas para devolver algo, otros hacen el valor de retorno opcional. Para evitar un envio de formularios, en el controlador de eventos submit colocamos return false de la siguiente manera:

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


Cierres

Los cierres se crean cada vez que se accede a una variable que se define fuera del ambito dentro de algun ambito interno. El ejemplo siguiente muestra como la variable contador es visible dentro de crear, de incrementar, y las funciones de impresion, pero no fuera de ellos:

function crear(){
    var contador = 0;
    return {
        incrementar : function(){
            contador++;
        },
        impresion : function(){
            console.log(contador);
        }
    }
}

var c = crear();
c.incrementar();
c.impresion(); // ==> 1



Este patron permite crear objetos con metodos que operan sobre los datos que no son visibles para el mundo exterior. Cabe señalar que la ocultacion de datos es la base misma de la programacion orientada a objetos.


El patron Proxy

Un proxy es un objeto que se puede utilizar para controlar el acceso a otro objeto. Se implementa la misma interfaz que este otro objeto y pasa cualquier metodo invocandolo a él. Este otro objeto a menudo se llama real subject (sujeto real). Un proxy puede ser instanciado en lugar de real subject y permite ser accedido de forma remota. Podemos ahorrar usando el metodo setArray de jQuery en un cierre y sobreescribiendolo de la siguiente manera:

(function(){
    // registramos todas las llamadas a setArray
    var proxied = jQuery.fn.setArray;

    jQuery.fn.setArray = function(){
        console.log(this, arguments);
        return proxied.apply(this, arguments);
    }
})();


Lo anterior envuelve su codigo en una funcion para ocultar la variable proxied. El proxy entonces registra todas las llamadas al metodo y los delegados de la llamada al metodo original. Utilizando apply(this, arguments) garantiza que la persona que llama no sera capaz de notar la diferencia entre el original y el metodo proxied.


Funciones incorporadas

Javascript viene junto con un util conjunto de funciones incorporadas. Estos metodos se pueden utilizar para manipular cadenas, numeros y fechas. A continuacion se describen las funciones de javascript importantes:

+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| Metodo        | Descripcion                                                                                                                     |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| charAt()      | Devuelve el caracter en el indice especificado.                                                                                 |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| concat()      | Combina el texto de dos cadenas y devuelve una nueva cadena.                                                                    |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| forEach()     | Llama una funcion para cada elemento de la matriz                                                                               |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| indexOf()     | Devuelve el indice dentro del objeto llamado String de la primera aparicion del valor especificado, o -1 si no es encontrado.   |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| length()      | Devuelve la longitud de una cadena.                                                                                             |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| pop()         | Elimina el ultimo elemento de una matriz y devuelve dicho elemento.                                                             |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| push()        | añade uno o mas elementos al final de una matriz y devuelve la nueva longitud de la matriz.                                     |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| reverse()     | Invierte el orden de los elementos de una matriz, el primero se convierte en el ultimo, y el ultimo se convierte en el primero. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| sort()        | Ordena los elementos de una matriz                                                                                              |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| substr()      | Devuelve los caracteres de una cadena que comienza en el lugar especificado, por el numero de caracteres especificados.         |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toLowerCase() | Devuelve el valor de la cadena llamada convertido en minusculas.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toString()    | Devuelve la representacion de una cadena del valor de un numero.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toUpperCase() | Devuelve el valor de la cadena llamada convertido en mayusculas.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
 
El modelo de objetos del documento

El modelo de objetos del documento (Document object model) es una estructura de arbol de diversos elementos de HTML de la siguiente manera:

<html>
<head>
    <title>Es el titulo</title>
</head>
<body>
    <div>
        <p>Este es un parrafo</p>
        <p>Este es el segundo parrafo</p>
        <p>Este es el tercer parrafo</p>
    </div>
</body>
</html>


Los siguientes son los puntos importantes sobre la estructura de arbol de arriba:

* El <html> es el ancestro de todos los demas elementos, en otras palabras, todos los demas elementos son descendientes de <html>

* El <head> y <body> no son solo elementos descendientes, son hijos de <html> tambien.

* Del mismo modo ademas de ser antepasado de <head> y <body>, <html> tambien es su padre.

* Los elementos <p> son los hijos (y descendientes) de <div>, descendientes de <body> y <html> y hermanos unos de otros elementos <p>.

Fuente: http://www.tutorialspoint.com/jquery/index.htm

domingo, 1 de marzo de 2015

[Parte 1]jQuery

¿Que es jQuery?

jQuery es una libreria de javascript rapida y concisa creada por John Resig en 2006, con un bonito lema: Write less, do more (Escribe menos, haz más). jQuery simplifica el desplazamiento a traves de HTML, manejo de eventos, animacion, y las interacciones para el desarrollo web rapido. jQuery es un conjunto de herramientas javascript diseñadas para simplificar diversas tareas escribiendo menos codigo. Aqui se muestra una lista de las principales caracteristicas importantes soportadas por jQuery:

Manipulacion DOM: jQuery hace que sea mas facil seleccionar elementos DOM, atravesar y modificar su contenido mediante motor selector de codigo fuente abierto entre navegadores llamado Sizzle. 

Gestion de eventos: jQuery ofrece una forma elegante para capturar una gran variedad de eventos, tal como cuando un usuario hace clic en un enlace, sin necesidad de recargar el propio codigo HTML con los controladores de eventos. 

Soporte AJAX: jQuery le ayuda mucho para desarrollar un sitio responsivo y rico en caracteristicas utilizando la tecnologia AJAX.

Animaciones: jQuery viene con un monton de efectos integrados de animacion que se puede utilizar en sus sitios web. 

Peso ligero: jQuery es una biblioteca muy ligera.

Soporte de navegador: jQuery tiene soporte multi-navegador.


¿Como instalo jQUery?


Para llevar a cabo la configuracion de jQuery solo son necesarios dos sencillos pasos:

1.- Vamos a la pagina y bajamos la ultima version disponible
2.- Ahora colocamos el archivo jquery.version.min.js en algun directorio de nuestro sitio, por ejemplo js/.

La version minificada no contiene nuevas lineas ni comentarios, lo que hace que sea mas pequeña y rapida.

jQuery no requiere ninguna instalacion especial similar a javascript, no necesitamos ninguna fase de compilacion para usar jQuery.

¿Como utilizar la libreria jQuery?

Ahora puede incluir su libreria jQuery en el HTML de la siguiente manera:

<html>
<head>
<title>Ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
      // Aqui agregas tu codigo javascript que tu quieras
   </script>  
</head>
<body>
........
</body>
</html>



¿Como llamar funciones de la libreria jQuery?

Como casi todo lo que hacemos al usar jQuery manipula el document object model (DOM), tenemos que asegurarnos de comenzar a añadir eventos tan pronto como el DOM este listo. Si quieres un evento para trabajar con tu pagina, deberias llamar la funcion $(document).ready(). El cual se cargara tan pronto se cargue el DOM y antes de que el contenido de la pagina sea cargado. Para ello se registra un evento ready en el documento de la siguiente manera:

$(document).ready(function(){
          // Hacer alguna cosa cuando el DOM este cargado
      });


Podemos llamar cualquier funcion de la libreria jQuery usando las etiquetas script HTML como se muestra a continuacion:

<html>
<head>
<title>Ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
          $("div").click(function(){
              alert("Hola Mundo");
          });
      });
   </script>  
</head>
<body>
    <div id="nuevacapa">
        De clic aqui para mirar el contenido de un cuadro de dialogo.
    </div>
</body>
</html>


¿Como usar scripts personalizados?

Es mejor escribir nuestro codigo personalizado, en un archivo de javascript personalizado: custom.js, de la siguiente manera:

/* Archivo: custom.js */
$(document).ready(function(){
    $("div").click(function(){
        alert("Hola Mundo!");
    });
});


Ahora podemos incluir nuestro archivo custom.js en nuestro HTML de la siguiente manera:

<html>
<head>
<title>Ejemplo de jQuery</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript" src="js/custom.js"></script>  
</head>
<body>
    <div id="nuevacapa">
        De clic aqui para mirar el contenido de un cuadro de dialogo.
    </div>
</body>
</html>


Uso de multiples librerias:

Puede utilizar varias librerias todas juntas sin entrar en conflicto con las demas. Por ejemplo, usted puede usar las librerias jQuery y Moontool juntas.
Muchas librerias de javascript utilizan $ como una funcion o nombre de la variable, tal como lo hace jQuery. En el caso de jQuery, $ es solo un alias para jQuery, por lo que todas las funciones de jQuery estan disponibles sin utilizar $.
El metodo $.noConflict() da el control de $ como primer puesto a la otra libreria que usarás. Esto ayuda asegurarse de que jQuery no entre en conflicto con $ los objetos de otras librerias.
Aqui esta la manera sencilla de evitar cualquier conflicto:

// Importamos otra libreria
// Importamos jQuery
$.noConflict();
// El codigo que usa la otra libreria puede utilizar $ siguiendo desde aqui...


Esta tecnica es especialmente eficaz en combinacion con la capacidad del metodo .ready() para crear un alias del objeto jQuery, como en ready podemos usar $ si lo deseamos sin temor a conflictos posteriores:

// Importamos otra libreria
// Importamos jQuery
$.noConflict();
jQuery(document).ready(function($){
    // Podemos utilizar $ desde aqui
});
// Codigo de alguna otra libreria utilizando $ puede seguir desde aqui..


¿Que es lo siguiente?

No se preocupe demasiado si usted no entendio los ejemplos anteriores. Usted lo va entender muy pronto en los tutoriales siguientes.

Este texto ha sido traducido de la pagina web TutorialesPoint.




domingo, 15 de febrero de 2015

HTML5 Boilerplate



HTML5 Boilerplate le ayuda a crear aplicaciones o sitios web mas rapidos, robustos y adaptables. 

¿Quien usa HTML5 BoilerPlate?
Google, Microsoft, NASA, Nike, y muchos mas

Puedes obtener la version desde su sitio web oficial:
https://html5boilerplate.com/

O obtener una version personalizada desde:
http://www.initializr.com/


Su estructura es la siguiente:

.
├── css
 
 │   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .htaccess
├── 404.html
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
 
 
Pueden optimizar el sitio utilizando:
https://github.com/h5bp/ant-build-script
 
Pueden ver una documentacion pequeña sobre HTML5 Boilerplate en:
http://es.wikieducator.org/Usuario:Juanda/html5/Introducci%C3%B3n  
 
HTML5 Boilerplate es una forma de utilizar este template para que
te ayude en tus proyectos (responsive design) y que sea mas rapido.
Incluye toda la documentacion muy sencilla en la carpeta doc/.
En los archivos de la carpeta CSS/, el archivo main.css incluye un
comentario donde el autor puede agregar sus estilos CSS.
Normalize.css es como reset.css mejorado. De manera que sea un poco
mas adaptable para todos los diseños de los navegadores.
En la carpeta img/ se incluiran todas las imagenes de tu proyecto.
La carpeta js/ contiene main.js donde iran todos tus scripts de
javascript. En plugins.js iran todos los plugins que utilices
a la hora de tu desarrollo, en la carpeta vendor/ se encuentran 
los scripts jquery.min.js que facilita la escritura de codigo javascript.
Y modernizr.min.js que detecta las nuevas caracteristicas HTML5 y
CSS3. El .htaccess contiene varias optimizaciones para nuestra pagina
ya como el cache, URL's amigables, forzar paginas sin www, forzar HTTPS,
pagina de error por defecto, etc. 404.html es la pagina de error por
defecto. Humans.txt es un archivo que indica las personas que ayudaron
en el desarrollo del proyecto (TEAM), robots.txt es el archivo para
decirle a los motores de busqueda que pueden "ver" y que no, el favicon.ico
es el icono que se ve aun lado del titulo.
 
Trate de ser un poco explicativo, pero de todas formas en la pagina
web oficial tienen demasiada documentacion al igual que en github. 

miércoles, 11 de febrero de 2015

PHP Interfaz de comandos

PHP es conocido y amado como una de las mejores tecnologias para la generacion de sitios web dinamicos. Pero a traves de la linea de comandos de PHP (CLI), tambien puede realizar shell scripting (programacion de linea de comandos) usando su lenguaje favorito PHP. PHP CLI permite ejecutar scripts PHP e incluso fragmentos de codigo PHP fuera del navegador web. En windows, la accion se lleva a cabo dentro de la ventana DOS (tambien conocida como consola o ventana de comandos). En UNIX y Mac OS X, va utilizar una terminal (o un programa similar).

Prueba de su instalacion 

Para comenzar, lo primero que debemos hacer es confirmar que nosotros tenemos PHP CLI disponible, entonces veremos la version.
Con suerte es cuestion de solo seguir unos pasos.

1.- Abra una interfaz de comandos
2.- ponga php -v y pulse la tecla enter o retorno



Si la version de PHP CLI se encuentra instalado en su PATH (Lista de ubicaciones donde el sistema operativo puede encontrar los archivos) con esto deberia ser mas que suficiente.

En el peor de los casos suponiendo que PHP CLI esta instalado, usted tendra que moverse a la ruta de PHP CLI o poner la ruta completa. Junto a la opcion -v, hay otros tres que podemos mostrarle por adelantado:


* -i revela informacion sobre la instalacion de PHP.
* -h accede al archivo de ayuda.
* -m indica los modulos compilados en su instalacion de PHP.

Uso de la CLI

El hecho de que usted pueda realizar script desde la linea de comandos con PHP no significa que siempre deba utilizarlo. En realidad lo que trata PHP es que utilices los conocimientos que ya tienes en PHP en lugar de utilizar algun otro lenguaje de CLI como PERL o shell en los cuales tengas que volver a iniciarte en la sintaxis. PHP CLI nos sirve mucho para realizar tareas basicas tales como:

* Probar fragmentos de codigo PHP rapidamente
* Realizar algun mantenimiento rutinario
* Crear utilidades para el sistema
* Hacer instaladores para sus aplicaciones de PHP

Ejecutando pequeños fragmentos de codigo

Uno de los primeros usos de PHP CLI es probar pequeños fragmentos de codigo rapidamente, sin pasar por el proceso de:

1.- Escribir un script formal de PHP
2.- Colocarlo en un directorio web
3.- Habilitar el servidor web, si no esta ON (activo)
4.- Ejecutar el script PHP en un navegador web

En vez de hacer todo eso, puede probar pequeños fragmentos de codigo con esta sintaxis:

php -r 'codigo_php_aqui'

Para un ejemplo:

php -r "echo 'Hola, mundo!';"

Un par de cosas a tener en cuenta es el uso de comillas dobles o comillas simples (esto dependiendo del sistema operativo donde estes trabajando) y siempre cerrar el codigo usando ; (punto y coma).

Tambien podemos conectar a un servidor remoto usando putty para conectar, solo es necesario ingresar nuestras credenciales.


Para continuar con el ejemplo, vamos a realizar un codigo que nos muestre la ultima modificacion de un archivo, en el cual podemos especificar la ruta completa o movernos al directorio donde se encuentra el archivo.

C:\Users\arthusu>php -r "$filename = 'log.txt'; $fmtime = filemtime($filename);
if(file_exists($filename)){ echo date('F d Y H:i:s',$fmtime); }"
May 02 2014 07:57:30


Mi directorio actual es C:\Users\arthusu en este directorio se encuentra el archivo 'log.txt'.
Y el resultado que nos arroja es May 02 2014 07:57:30 que es la fecha de la ultima modificacion del archivo.

vamos a explicar el codigo, en la variable $filename especificamos la ruta del archivo que queremos saber su ultima modificacion en este caso 'log.txt' pero tu podrias poner la ruta completa, con la variable $fmtime se guarda la ultima fecha de modificacion el archivo 'log.txt' en formato devuelto como tiempo UNIX, por ultimo hacemos un condicional donde verificamos si el archivo existe y si es asi mostramos la ultima fecha de modificacion en el formato anterior usando la funcion date().

Para agregar una nueva linea en consola usamos \n ya que no podemos usar HTML.

C:\Users\arthusu>php -r "echo \"Hola Mundo!\n\";"
Hola Mundo!



PHP CLI interactivo

Desde la version 5.1, PHP es compilado con una extension Readline la cual podemos correr una shell interactiva. Para utilizar PHP CLI Interactivo solo tenemos que seguir los pasos de abajo.

1.- entramos en modo shell interactiva php -a
2.- escribimos un fragmento pequeño de codigo y presionamos la tecla enter





Tambien podemos ver con php -m que el modulo readline esta activado.






Creamos una variable:



Usted puede crear variables, arrays para su posterior consulta, tal como constantes y funciones todo en una sola sesion.

Tambien si ponemos pri y presionamos la tecla TAB nos autocompleta. Gracias a la extension Readline incluimos muchas caracteristicas tales como tambien usar flecha arriba y flecha abajo para ver las lineas anteriores.

Poniendo exit salimos de la sesion del modo shell interactivo.


Creando un script de linea de comandos

Ser capaz de probar pequeños fragmentos de codigo en la linea de comandos es agradable, pero no te llevara lejos. Lo que normalmente se desea hacer es ejecutar scripts (varias lineas) en la linea de comandos. Tales scripts pueden ejecutar algunos archivos, realizar mantenimiento a una base de datos, ejecutar actualizaciones para el sitio web y demas. Un script para utilizarlo en PHP CLI es diferente a un script de PHP WEB.

1.- No se debe utilizar con codigo HTML
2.- No es necesario utilizar la extension .php (aunque si es recomendable)
3.- La primera linea de su script sera:  #!/usr/bin/php

No hay nada de malo en usar codigo HMTL, pero solo va estorbar en el resultado en la consola. En cuanto a la extesion del archivo podria utilizar literalmente cualquier extension o nombre, pero .php todavia es una buena idea. La ultima linea indica para sistemas MAC OS X o UNIX donde se encuentra el ejecutable de php, esta linea es llamada Shebang, en sistemas Windows no es necesario especificarla ya que es ignorada completamente.

Vamos a crear nuestro primer script de linea de comandos y explicarlo.

#!/usr/bin/php
<?php # Script - numero.php
    /* Esta pagina lee un archivo
    * e imprime el numero de lineas junto al contenido.
    * Este script puede ser usado con PHP CLI
    */

    // El archivo:
    $file = 'c:\users\arthusu\log.txt';
    // Imprimimos un mensaje dentro:
    echo "\nNumerando el archivo llamado '$file' ... ----------------\n\n";
    // Leemos en el archivo:
    $data = file($file);
    // Contador del numero de linea:
    $n = 1;
    // Imprimimos para cada linea:
    foreach($data as $line){
        // Imprimimos el numero y linea del archivo:
        echo "$n $line";
        // Incrementamos le numeor de linea:
        $n++;
    } // Terminamos el bucle foreach.
    echo "\n ------------------------ Fin del archivo '$file'.\n";
?>


  
1.- Especificamos la linea Shebang (aunque realmente no es necesaria si estas en windows), y despues abrimos la etique php (porfin!!!)
2.- Indicamos la ruta del archivo a ser numerado en la variable $file
3.-  Usamos la funcion file() para leer el archivo que se guardara en un array
4.- Imprimimos un mensaje de que el archivo comienza
5.- Creamos una variable $n la cual contendra el numero de lineas, recorremos con el bucle foreach() cada linea y aumentamos la variable $n de la linea en 1 para ir contando las lineas.
6.- Terminamos el mensaje de que el archivo termina, y recuerda aqui si cerramos la etiqueta de php.


Usted puede hacer uso de la configuracion php.ini desde la linea de comandos, una manera de buscar el archivo de configuracion es utilizar:

D:\>php -i | find /i "Configuration File"
Configuration File (php.ini) Path => C:\Windows
Loaded Configuration File => C:\xampp\php\php.ini


o tambien:

php --ini
 

Hay algunas opciones con la que podemos cambiar le comportamiento del archivo php.ini.

* -c Le decimos a php donde buscar el archivo php.ini
* -n Le decimos a php que no utilice el archivo php.ini
* -d Establece un valor para php.ini

Por ejemplo, podemos hacer uso de ignore_user_abort en true para que el script se siga ejecutando incluso cuando el usuario aborte el script, para ello cuando invocamos CLI usamos:

php nombredelscript.php -d  ignore_user_abort=1

Corriendo un script de linea de comandos

Hay dos maneras de correr un script en php. La primera manera es utilizar php y el nombre del archivo a ejecutar:

php nombredelscript.php

tambien podemos utilizar la bandera -f:

php -f nombredelscript.php

aunque no es necesario, pero si recomendable.

La segunda manera de hacerlo que se decia es simplemente utilizar el nombre del archivo, pero para ello tienes que tener configurado windows por ejemplo a abrir por defecto ese tipo de archivo con php.exe:

Clic derecho en el archivo > Abrir con... y eliges el archivo php.exe (en mi caso C:\Xampp\htdocs\php\php.exe), para correr el archivo solo entras en la consola y escribes el nombre del archivo, por ejemplo: miarchivo.php y enter.



Podemos utilizar la opcion -l para saber si algun archivo tiene algun error de sintaxis:

php -l elnombredemiarchivo.php

Si no contiene errores devolvera algo como lo siguiente:
No syntax errors detected in xxxx.php


Trabajando con argumentos en la linea de comandos

El ejemplo numero.php es una aplicacion bastante razonable en PHP CLI. El script proporciona un valioso servicio, pero tiene una limitacion: el archivo a ser numerado en el script esta hard-coded. Seria mejor establecer ese valor del archivo cuando se utiliza la aplicacion. Esto puede lograrse facilmente reescribiendo el script para que utilice argumentos en la linea de comandos. Los argumentos en la linea de comandos son valores pasados en una aplicacion cuando se ejecuta. Los argumentos se pasan a la aplicacion invocada añadiendolos despues del nombre de la aplicacion:

nombredelscript.php argumento1 argumento2

En su script PHP puede acceder a estos argumentos refiriendose a $argv y $argc (o mas formal  $_SERVER['argv'] y $_SERVER['argc'])
El array $argv almacena cada argumento proporcionado; $argc almacena el numero de elementos en $argv. El unico incoveniente a la utilizacion de estos es que el nombre del script en si es el primer argumento listado ($_SERVER['argv'][0]):

#!/usr/bin/php
<?php
    echo "\n{$_SERVER['argc']} argumentos recibidos. Los cuales son...\n";
    foreach ($_SERVER['argv'] as $k => $v) {
        echo "$k : $v \n";
    }
?>



 

Vamos a escribir un nuevo script numero.php para que acepte un argumento: el nombre del archivo a numerar.

#!/usr/bin/php
<?php # numero2.php
    /* Esta pagina lee un archivo
    * e imprime el numero de lineas junto al contenido.
    * Este script puede ser usado con PHP CLI
    * Este script espera un argumento (junto al nombre del script)
    * El numbre del archivo a numerar.
    */


    // Verificamos que el nombre fue asignado:
    if ($_SERVER['argc'] == 2){
    // Obtenemos el nombre del archivo
    $file = $_SERVER['argv'][1];

    // Hay que estar seguros que el archivo existe y es un archivo:
    if(file_exists($file) && is_file($file)){
            // Leemos un archivo:
            if($data = file($file)){
                // Imprimimos un mensaje dentro:
                echo "\n Numerando el archivo llamado '$file' \n ---------------------------\n\n";
                // Contador de lineas
                $n = 1;
                // Imprimimos cada linea:
                foreach ($data as $line) {
                    // Imprimimos el numero y la linea:
                    echo "$n $line";
                    // Incrementamos el numero de linea:
                    $n++;
                } // Fin del bucle foreach
                echo "\n ---------------------------\n Fin del archivo '$file'.\n";
                exit(0);
            }else{
                echo "El archivo no pudo ser leido.\n";
                exit(1);
            }
        } else {
            echo "El archivo no existe \n";
            exit(1);
        }
    } else {
        // Imprimimos el uso:
        echo "\n Uso: numero2.php <archivo>\n\n";
        exit(1);
    }
?>




1.- Comenzamos agregando la linea shebang y nuestra etiqueta de apertura php: 
#!/usr/bin/php
<?php

2.- Verificamos que el archivo fue provisto: if ($_SERVER['argc'] == 2){
3.- Estamos seguros de que el archivo existe:

$file = $_SERVER['argv'][1];
if(file_exists($file) && is_file($file)){

El array argv le pusimos 1 por que en 0 esta el nombre del script que estamos ejecutando actualmente y como segundo argumento nuestro argumento que nos interesa.

4.- Leemos el archivo y lo imprimimos:

if($data = file($file)){
                // Imprimimos un mensaje dentro:
                echo "\n Numerando el archivo llamado '$file' \n ---------------------------\n\n";
                // Contador de lineas
                $n = 1;
                // Imprimimos cada linea:
                foreach ($data as $line) {
                    // Imprimimos el numero y la linea:
                    echo "$n $line";
                    // Incrementamos el numero de linea:
                    $n++;
                } // Fin del bucle foreach
                echo "\n ---------------------------\n Fin del archivo '$file'.\n"
;


5.- Devuelve 0 para indicar la correcta ejecucion del script:
exit(0);

Tipicamente 0 representa que se ejecuto sin problemas y un numero distinto significa algun tipo de error. La funcion exit() termina con la ejecucion del script.

6.- Completamos el condicional del paso 4:

}else{
                echo "El archivo no pudo ser leido.\n";
                exit(1);
            }


7.- Completamos el condicional del paso 3:

} else {
            echo "El archivo no existe \n";
            exit(1);
        }


8.- Completamos el condicional del paso 2 y completamos el script:

} else {
        // Imprimimos el uso:
        echo "\n Uso: numero2.php <archivo>\n\n";
        exit(1);
    }


Para ejecutarlo solo usamos: 

php numero2.php <rutaarchivo>

Creacion de una interfaz

El uso de PHP en linea de comandos, se abre todo un nuevo mundo que en la web no tiene: la interfaz de usuario. Claro que la presentacion de una pagina web es algo diferente se utiliza HTML, pero en linea de comandos no es asi, para comenzar la mayoria de la mayoria de los scripts en lineas de comandos indican como se utilizara, si esta se utiliza incorrectamente. Escriba php -varmit y vera lo que quiero decir. El script numero2.php hace esto pero solo poco, los scripts normalmente hacen mas, como mostrar una opcion para ofrecer ayuda, por ejemplo: con el comando -h o --help.
Por ultimo, las aplicaciones de linea de comandos a menudo arrojan un codigo que indica si la operacion se realizo con exito. El numero 0 es devuelto para indicar que no hubo ningun problema, y algunos numeros distintos a cero devuelven distintas cosas. En numero2.php se devuelve 1 para indicar que hay un error. 
Una alternativa para el uso de argumentos de linea de comandos es solicitar la entrada del usuario (si bien se pueden utilizar ambas tecnicas en combinacion). De esta manera puede crear una aplicacion interactiva, donde se pide al usuario informacion y hace algo con lo que se ingresa. 

Tomandos entradas

Por extraño que pueda parecer, teniendo una entrada (input) en la aplicacion de la linea de comandos es exactamente igual que la lectura de datos desde un archivo. Pero en este caso, en lugar de utilizar un manejador de archivo (un puntero a un archivo abierto) vamos a usar una constante especial STDIN. Esto significa entrada estandar (standard input) lo que seria el teclado por defecto. Una forma facil de leer la entrada estandar seria utilizar la funcion fgets():

echo "Dime algo ";
$input = fgets(STDIN);


 
Todo lo escrito alli por el usuario se asigna a $input. Para ser mas precisos con la entrada, me gusta utilizar la funcion  fscanf(). Como printf() y sprintf(). Esta funcion toma el formato de parametros para manejar tipos especificos de datos. Mediante el uso de esta funcion, en lugar de uno mas generico, nos aseguramos de una validacion basica de los datos leidos. En el siguiente ejemplo, fscanf() se utiliza para crear una aplicacion que convierte temperaturas entre grados Fahrenheit y Celsius (y al reves).

#!/usr/bin/php
<?php # temperatura.php

    /* Esta pagina convierte la temperatura entre
    * Fahrenheit y Celsius.
    * Este script es para utilizarlo en PHP CLI.
    * Este script requiere la entrada (input) de un usuario.
    */

    // Entrada del usuario:
    echo "\nIntroduzca la temperatura e indique si es Fahrenheit o Celsius [##.# C/F]: ";

    // Leemos en una entrada condicional:
    if(fscanf(STDIN, '%f %s', $temp_i, $which_i) == 2){
        // Asumimos una salida invalida:
        $which_o = FALSE;

        // Creamos la conversion basado en $wich_i:
        switch (trim($which_i)) {
            // Celsius, convierte a Fahrenheit;
            case 'C':
            case 'c':
                $temp_o = ($temp_i * (9.0/5.0)) + 32;
                $which_o = 'F';
                $which_i = 'C';
                break;
            // Fahrenheit, convierte a Celsius:
            case 'F':
            case 'f':
            $temp_o = ($temp_i - 32) * (5.0/9.0);
            $which_o = 'C';
            $which_i = 'F';
            break;
        } // Fin del SWITCH.

        // Imprimimos los resultados:
        if($which_o){
            printf("%0.1f %s es %0.1f %s.\n", $temp_i, $which_i, $temp_o, $which_o);
        }else{
            echo "Tu fallaste en poner C o F para indicar el tipo de temperatura.\n";
        }
    }else{ // No puso nada en la entrada
        echo "Tu fallastes en usar la sintaxis correcta.\n";
    } // Fin del IF principal.
   
?>



1.- Comenzamos nuestro script temperatura.php:
#!/usr/bin/php
<?php # temperatura.php

2.- Preguntamos al usuario en que quiere convertir la temperatura:
echo "\nIntroduzca la temperatura e indique si es Fahrenheit o Celsius [##.# C/F]: ";
3.- Leemos un numero con punto y una cadena:
if(fscanf(STDIN, '%f %s', $temp_i, $which_i) == 2){
fscanf() intentara leer en, de la entrada estandar, un numero con punto y una cadena. Estos deben coincidir con la temperatura (por ejemplo, 72.3) y el indicador como el tipo de temperatura (C o F). No hay formato 'caracter' en fscanf(), por lo que con %s son para las cadenas. Si puede leer los tipos de datos en ese orden, que van a ser asignados a las variables. La ultima parte de la funcion fscanf() devolvera el numero de valores que asigna a las variables. Asi que si se lee en dos valores, asignado en $temp_i y $which_i, el condicional sabe que los datos adecuados fueron introducidos.
4.- Establecemos una variable en FALSE.
$which_o = FALSE;
Esta variable almacenara las conversiones de la temperatura (la salida).
5.- Realizamos la conversion apropiada:
switch (trim($which_i)) {
            // Celsius, convierte a Fahrenheit;
            case 'C':
            case 'c':
                $temp_o = ($temp_i * (9.0/5.0)) + 32;
                $which_o = 'F';
                $which_i = 'C';
                break;
            // Fahrenheit, convierte a Celsius:
            case 'F':
            case 'f':
            $temp_o = ($temp_i - 32) * (5.0/9.0);
            $which_o = 'C';
            $which_i = 'F';
            break;
        } // Fin del SWITCH.

Si el segundo valor no es un F, C o f, c la conversion no es impresa.
6.- Imprimimos los resultados:
if($which_o){
            printf("%0.1f %s es %0.1f %s.\n", $temp_i, $which_i, $temp_o, $which_o);
        }else{
            echo "Tu fallaste en poner C o F para indicar el tipo de temperatura.\n";
        }


Usamos printf() para manejar el formato del texto.
7.- Completamos el condicional del paso 3 y el script.
}else{ // No puso nada en la entrada
        echo "Tu fallastes en usar la sintaxis correcta.\n";
    } // Fin del IF principal.
   
?>




Nota: Cualquier funcion de archivo de PHP puede ser usada en STDIN. Esto significa que, por ejemplo, usted podria utilizar fgetc() para recuperar un solo caracter o fgetcsv() para recuperar y analizar una linea entera.

Incorporarlo al servidor

Una adicion en la linea de comandos de PHP 5.4 es un servidor web incorporado. Al usarlo, usted puede probar sus scripts PHP en el navegador web sin necesidad de instalar o ejecutar una aplicacion de servidor web como apache. Para ser absolutamente claro, esto no es un servidor web de produccion, pero puede utilizarse para probar scripts PHP rapidamente.

Para utilizar el servidor web incorporado:

1.- Ponga el siguiente comando para saber si tiene disponible la opcion de servidor web:
php -h
La bandera -h nos lleva a la documentacion de ayuda. Si la documentacion incluye la -S (debe ser mayuscula) y la opcion -t, entonces el servidor incorporado esta disponible.



2.- Navegue hasta el directorio que contiene el script PHP que le gustaria probar:

cd /directorio/a/script

Por defecto, el servidor web usara el directorio en el que el servidor comenzo como el directorio raiz, por lo que usted debe navegar hasta alli primero.

3.- Comenzamos el servidor:

php -S 127.0.0.1:8000

Para iniciar el servidor web utilice la opcion -S, seguido por el nombre de host y el puerto a usar. En su propio ordenador localhost es un nombre de host logico y comun. Para el puerto recomendaria, 8000 o 8080, que son alternativas comunes al puerto por defecto de apache 80. Utilizando uno de estos puertos evita posibles conflictos si ya tiene otro servidor web corriendo. Tambien puede utilizar una direccion IP si lo prefieres:

php -S 127.0.0.1:8000


4.- Cargamos http://127.0.0.1:8000/elnombredetuscript.php en tu navegador web. Como se carga la pagina en el navegador web debes utilizar la linea de comandos CLI, te daras cuenta que la ventana de consola o terminal refleja las solicitudes. 


5.- Pulsa ctrl+C en la consola o terminal para detener el servidor web.


Hasta aqui termina este minitutorial espero que les sirva de ayuda, Saludos!

domingo, 8 de febrero de 2015

Detener el hotlinking y el robo de ancho de banda

¿Quieres parar los hotlinkers? ¿Consume mas ancho de banda tu sitio web cada mes? ¿No hay presupuesto para conseguir un servidor dedicado? ¿Quieres probar hotlink en imagenes de tu sitio web? Aqui mostraremos informacion sobre el uso de un archivo .htaccess para detener el hotlinking y el robo de ancho de banda.

¿Como evito el hotlinking y el robo de ancho de banda?

Puede evitar el hotlinkin de su sitio colocando un archivo .htaccess en la carpeta raiz de su sitio en el directorio principal. El punto de inicio significa que el archivo esta "oculto", por lo que es posible que desee editar su archivo como htaccess.txt subirlo a tu servidor y cambiarle el nombre a tu archivo a .htaccess.

Comuniquese con su proveedor de alojamiento web sobre como acceder a sus directorios y configurar el archivo .htaccess.

Ejemplo: La URL de su sitio es www.misitio.com. Para detener el hotlinking de imagenes desde otros sitios podemos reemplazar nuestra imagen mostrando otra (u9HLjv8.jpg) de algun hosting de imagenes, colocando este codigo en su archivo .htaccess.

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?misitio\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*\.(jpe?g|gif|bmp|png)$ http://i.imgur.com/u9HLjv8.jpg [L]

La primera linea del codigo anterior comienza la reescritura. La segunda linea de bloque dice que cualquier sitio que no sea su propia URL (sitio.com). El codigo [NC] significa "No case", que significa que no importa si la URL esta en minusculas o mayusculas. La tercera linea decimos que se permiten referencias vacias. La ultima linea coincide con los archivos que terminan con la extension jpeg, jpg, gif, bmp, o png. Esta es sustituida por la imagen u9HLjv8.jpg desde el servidor imgur.com. Usted facilmente podria utilizar una imagen de su sitio web para hacer hotlinking referenciando a ese archivo.


Para realizar hotlinking a solo algunos sitios webs especificados, como myspace.com, blogspot.com, etc. Pero permitiendo a otros sitios webs las imagenes, realizamos la siguiente configuracion.

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?myspace\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+\.)?blogspot\.com/ [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png)$
http://i.imgur.com/u9HLjv8.jpg [L]

Puede añadir tantos dominios diferentes segun sea necesario. Cada linea RewriteCond debe terminar con el codigo [NC,OR]. NC significa que ignora si es mayuscula o minuscula. OR significa "OR Next" como decir, si no coincide entonces sigue con la siguiente linea. El ultimo dominio listado omite el codigo OR ya que detiene la lista de dominios despues de la ultima linea RewriteCond. 

Usted puede mostrar una pagina 403 Forbidden en lugar de una imagen. Solo reemplace la ultima linea de codigo de lo anterior con lo siguiente.

RewriteRule .*\.(jpe?g|gif|bmp|png)$ - [F]

Advertencia: No utilice el archivo .htaccess para redirigir a paginas HTML, ya que con hotlinking de imagenes solo pueden ser reemplazadas con otras imagenes y no con archivos HTML.

Con cualquier archivo .htaccess, podemos bloquear parte del trafico legitimo (como usuarios detras de proxys o firewalls) usando estas tecnicas.