Mi Pedacito De Internet

¿Por qué usar Windows?

noreply@blogger.com (Anonymous) — Tue, 20 May 2014 03:09:00 +0000

Cuando empecé redactar este artículo, la idea era enunciar en base a mi experiencia las razones por las que alguien debería animarse a probar GNU/Linux. Conforme fui madurando la idea me di cuenta que me siento tan a gusto usando GNU/Linux que decidí cambiar el sentido y cuestionarme por qué alguien debería usar Windows.

En primer lugar hay que recordar que tanto una computadora como el sistema operativo que esta tiene, son solo herramientas y cada quien es libre de usar la herramienta con la que se sienta más cómodo. La comodidad de una u otra depende de las necesidades de cada quien.

Mi uso de la computadora es en resumen: navegar por internet, programar en java o php, hacer documentos de texto o presentaciones con diapositivas, de vez en cuando editar alguna imagen, ver anime, escuchar música, ver ~~porno~~ imágenes en internet, redes sociales, videos, etc. Por lo que esas son mis necesidades, si puedo hacer todo eso cómodamente en mi GNU/Linux entonces ¿Por qué debería usar Windows?

Se acaba el soporte de Windows XP ¿Y a vos y a mi que nos importa?

noreply@blogger.com (Anonymous) — Wed, 02 Apr 2014 03:58:00 +0000

Seguramente te habrás enterado (o no) que este abril se termina el tiempo de soporte del mítico Windows XP. Bueno ¿Y eso que significa?

En términos sencillos, significa que todo aquel que continúe usando este sistema operativo dejará de recibir actualizaciones del mismo; que las nuevas impresoras, tarjetas gráficas y otros dispositivos probablemente no funcionen porque los fabricantes no van a sacar drivers para XP y que muchos programas que usás como Office, Photoshop o Google Chrome no van a poderse instalar porque sencillamente quienes los desarrollan ya no van a dar soporte a este sistema.

En otras palabras, Windos XP quedará "abandonado".

Ahora bien ¿Que podemos hacer? Tenemos las siguientes opciones:

Que se jodan, a seguir usando XP porque me funciona aunque eso signifique usar programas viejitos.
Actualizar a versiones más recientes de Windows como Windows 7 o Windows 8 (¿alguien dijo Vista?) aunque la "Lentium" vaya a duras penas solo para cargar el menú inicio.
Usar otros sistemas operativos como GNU/Linux de los que no tengo ni las más remota idea de como se usa.
Quebrar el cochinito y comprar una Apple que va funcionar perfecto pero eso si, no voy a tener para comer todo el año
Esperar las computadoras que va dar Cerén... Ok no XD

Bueno, quizás de los efectos más significativos es el hecho que muchos programas y dispositivos dejarían poco a poco de funcionar, puesto que lo de las actualizaciones, al menos yo en el tiempo que lo use NUNCA instalé una misera actualización y no tuve problemas por ello, sin embargo, no es algo que vaya a pasar de a noche a la mañana así que pienso podés seguir utilizando sin ningún problema Windows XP. Eso sí, ya es de ir pensando en cambiar de Sistema Operativo e ir analizando las diferentes alternativas que hay.

Que hacer después de instalar Chakra

noreply@blogger.com (Anonymous) — Sun, 09 Mar 2014 04:01:00 +0000

Estas son las cosas que normalmente hago luego de instalar Chakra. Me funciona y he querido compartilo con ustedes, invitando a que si les interesa GNU/Linux no dejen de probar esta excelente distribución :D

Indicaciones

Desinstalar Calligra y kde-wallpapers
- sudo pacman -Rnsc calligra kde-wallpapers
Actualizar el sistema
- sudo pacman -Syu
Habilitar el repositorio Extra
- Abrir preferencias del sistema.
- Clic en Chakra Repositories Editor.
- Activar la casilla de verificación de Extra.
- Clic en Aplicar.
- Escribir en consola: sudo pacman -Sy
Instalar software necesario
- sudo pacman -S libreoffice firefox firefox-i18n flashplugin smplayer chromium kfilebox oxygen-gtk3 oxygen-gtk2

¿Esperabas algo más? Con lo anterior ya obtengo un sistema plenamente funcional en el que solo instalo cosas a medida las voy necesitando. El siguiente cuadro es un resumen de la gestión de paquetes:

Acción/Fuente	Repositorios¹	Comunitario²	Locales
Instalar	pacman -S nombre	ccr -S nombre	pacman -U nombre.tar.xz
Buscar	pacman -Ss nombre	ccr -Ss nombre	N/A
Borrar	pacman -Rns nombre	N/A	N/A
Actualizar Sistema	pacman -Syu	ccr -Syu nombre	N/A

1Se puede hacer usando la interfaz gráfica.

2Se debe hacer como usuario normal, sin sudo.

Espero les sirva :D

Validar un formulario con JQuery

noreply@blogger.com (Anonymous) — Wed, 23 Jan 2013 20:28:00 +0000

Hoy aprenderemos como validar un formulario usando JQuery.
El formulario va estar conformado por 9 campos: nombre, dirección un numero mayor que 18, un numero mayor que el anterior, un numero de teléfono, la hora, un nombre de usuario, la contraseña y una confirmación de la contraseña. Todos los campos serán obligatorios.

Nombre completo: tendrá como único requisito que tenga una longitud mínima de 10 caracteres
Dirección de correo: tendrá que cumplir con el formato correcto de direcciones de correo electrónico
El numero mayor que 18 deberá ser obviamente mayor que 18
El numero mayor que el anterior deberá ser mayor que el anterior
El numero de teléfono tendrá que cumplir con el formato estándar de (código de área +numero de teléfono para ello si no se ingresa como es o si se copia y pega el numero debe darle la forma correcta, así como si se ingresan letras o caracteres basura
La hora tendrá el formato de 24 horas pero no se podrá ingresar horas superiores a las 24 ni minutos superior a 60
El nombre de usuario debe tener como mínimo 5 caracteres y deberá comprobar que dicho nombre este disponible, es decir que no este almacenado en la base de datos
La contraseña deberá tener como mínimo 8 caracteres
La confirmación de la contraseña debe ser igual a la contraseña ingresada

Todos los datos deben estar correctos o de lo contrario el botón Enviar no debe funcionar.

Primero descargamos los archivos. Para descargar JQuery en distribuciones GNU/Linux como Debian escribimos en terminal:

sudo apt-get install libjs-jquery

Encontraras los archivos en /usr/share/javascript/. Los menos afortunados lo pueden descargar de acá: JQuery

Para la validación utilizaremos el plugin JQuery Validation que podemos descargar de acá: JQuery Validate

Tambien aplicaremos mascaras sobre los campos y para ello usaremos el plugin meioMask que podemos descargar así:

sudo apt-get install libjs-jquery-meiomask

O lo pueden descargar desde esta pagina: JQuery Meio Mask

Segundo, crearemos un formulario sencillo como el siguiente y lo guardamos en la ubicación que queramos. De preferencia crear una carpeta y tener todos los archivos que necesitamos:


<!DOCTYPE html>

<html>

<head>

 <title>Ejemplo de Validation</title>

</head>

<body>

 <form id="prueba" name="prueba">

  <fieldset>

   <legend>Formulario de Prueba</legend>

  </fieldset>

 </form>

</body>

</html>

Añadimos los archivos necesarios a nuestra pagina:


<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.meiomask.js"></script>

<script type="text/javascript" src="jquery.validate.js"></script>

<script type="text/javascript" src="messages_es.js"></script>

<script>

   $(document).ready(function(){

     $("#prueba").validate();

   });

</script>

<script>

 jQuery(function($) {

 $('input[type="text"]').setMask();

 });

 //Para añadir mi propia mascara

 //$.mask.masks.nombre = {mask: '9999-9999'}

</script>

Ahora comenzaremos a añadir los campos. Asegúrate de añadir un <br> después de cada campo para que estén en lineas diferentes:

El Nombre:
Validaremos que el nombre sea obligatorio y que tenga como mínimo 10 caracteres, añadimos lo siguiente al formulario

<label for="nombre">Nombre Completo:</label>
<input type="text" name="nombre" id="nombre" placeholder="Escribe mas de 10 letras" class="required" minlength="10">

Explicación: Añadimos class="required" para indicar que el campo es obligatorio y mediante minlength="10" indicamos que el campo debe tener al menos 10 caracteres

La Dirección de Correo:

El correo deber ser obligatorio y cumplir con el formato correcto. Para añadimos los siguiente

<label for="email">Direccion de correo:</label>
<input type="text" name="email" id="email" placeholder="Ej: usuario@servidor.com" class="required email">

Explicación: En este caso usamos class="required email" para indicar que el campo es requerido y además debe tener el formato de dirección de correo electrónico.

El Numero Mayor o igual que 18:

Este numero debe ser mayor que 18 y el campo es obligatorio. Lo hacemos así:

<input type="text" name="num_min" id="num_min" placeholder="Escribe un numero mayor que 18" class="required number" min="18">

Explicación: Primero indicamos mediante class="required number" que el campo es obligatorio y que es un dato numérico. Luego indicamos que debe tener como valor mínimo 18

El Numero Mayor o igual que el anterior:

Este numero debe ser mayor que el anterior y obligatorio. Lo hacemos así:

<input type="text" name="num_max" id="num_max" placeholder="Escribe un numero mayor que el anterior" class="required number" onfocus="document.prueba.num_max.min=document.prueba.num_min.value">

Explicación: para este campo indicamos su formato igual que el anterior y además añadimos un evento onfocus el cual asigno el valor mínimo del campo haciendo que el atributo min sea igual al valor del campo anterior

Numero de teléfono más código de país:
La idea es que este campo solo tome valores numéricos y automáticamente al formato de los números de teléfono. Lo insertamos de la siguiente manera:

<label for="tel">Ingresa tu numero de telefono mas el codigo de pais:</label>
<input type="text" name="tel" id="tel" placeholder="Ej. (503) 2393-0000" alt="phone-us">

Explicación: En este campo utilizamos una mascara, la cual asignamos mediante el atributo alt="phone-us" donde phone-us corresponde al nombre de la máscara utilizada. En este caso estamos usando una de las preestablecidas del plugin, pero podemos crear nuestras propias mascaras, como se indica en el código javascript que se indica más arriba en este mismo post.

Hora:
La hora solamente debe aceptar valores numéricos y horas válidas. Lo insertamos así:

<label for="time">Que hora es:</label>
<input type="text" name="hora" id="hora" placeholder="Formato de 24 horas" alt="time">

Nombre de Usuario:
Para este campo primero crearemos una base de datos sencilla con la cual comprobar el nombre. Crea una base de datos llamada "validacion" (sin las comillas), y una tabla llamada "usuario", con un campo llamado "usuario", inserta los registros que quieras.

Luego añade el campo de la siguiente manera:

<label for="user">Nombre de Usuario:</label>
<input for="text" name="user" id="user" placeholder="Escribe tu nombre de Usuario" remote="validar_usuario.php">

Donde la magia radica en el atributo remote, el cual hace referencia a un archivo "validar_usuario.php", dentro de ese archivo se realiza la consulta y dependiendo del resultado se comprueba la disponibilidad del nombre. He aquí un ejemplo de lo que puede contener "validar_usuario.php" usando MySQL y PHP:

<?
mysql_connect('localhost','root','root');
mysql_select_db('validacion');
$query="SELECT * FROM usuario WHERE usuario = '".$_GET['user']."' ";
$rs=mysql_query($query);
if(mysql_num_rows($rs)>0){
echo "false";
}
else{
echo "true";
}
?>

Se utiliza echo "true" para indicar que el nombre está disponible y echo "false" para indicar que el mismo ya está siendo utilizado

Al probar este campo verás que el mensaje que se muestra no es el adecuado para el tipo de validación, pero puedes editar el archivo "messages_es.js" y editar el mensaje asignado a remote, para obtener uno con más significado.

Password
El Password requiere de 8 caracteres como mínimo y es un campo obligatorio. Aplicamos la misma validación del nombre:

<label for="key">Password:</label>
<input type="password" name="key" id="key" class="required" minlength="8">

Donde usamos class="required" para indicar que es obligatorio y minlength="8" para indicar que debe tener al menos 8 caracteres.

Confirmación del Password
La confirmación del password solamente requiere que sea obligatorio y que sea igual que el campo anterior.

<label for="key_equal">Repita su password:</label>
<input type="password" name="key_equal" id="key_equal" class="required" equalto="#key">

En este último campo usamos el atributo equalto="#key" para indicar con que valor debe ser comparado. #key corresponde al id del campo con el que se debe comparar.

Por último añadimos un botón de tipo Submit
<input type="submit">

Ahora solo resta probar la validación del formulario.

EXTRA:
Por defecto el aspecto de la validación será un tanto fea. Eso lo podemos arreglar mediante css. He aquí un ejemplo, lo añadimos a nuestro formulario:

<style>
label.error{color: red;float:right;}
input.error{border-color: red;}
</style>
De esta manera jugando con la clase .error podemos personalizar la forma en que se presentan los errores.

Otra cosa, es que debido a la codificación de caracteres cuando se trate de tildes y eñes aparecerán símbolos raros en los mensajes. Esto es algo que no he podido resolver y en cuanto encuentre una solución la posteo.

Les dejo también los enlaces a las páginas de referencia donde podrán encontrar la documentación completa y más tipo de validación de los plugins utilizados:

Meio Mask
Validation

Espero que esto sea de utilidad.

Tabla Dinámica Manual con Ajax

noreply@blogger.com (Anonymous) — Fri, 11 Jan 2013 22:29:00 +0000

En un post anterior vimos como ingresar datos en una tabla dinámica, sin embargo este método provocaba un refresh en el navegador. Hoy veremos como hacer esto mismo evitando el efecto de refresh del navegador.
Primero descargamos los plugins necesarios para el trabajo:

JQuery
JQuery Form

Ahora creamos el siguiente documento html:
<!DOCTYPE html>


<html>

<head>

 <title>Tabla dinamica con Ajax</title>

</head>

<body>

 <form name="form" id="form" method="post" action="otroarchivo.php"> 

  <input type="hidden" name="accion">

  <label>Nombres:</label>

  <input type="text" name="nombre">

  <label>Apellidos:</label>

  <input type="text" name="apellidos">

  <input type="submit" onclick="document.form.accion.value='anadir';">

 </form>

 <div id="salida">

  <table>

   <tr>

    <th>Nombre</th>

    <th>Apellido</th>

   </tr>

  </table>

 </div>

</body>

</html>

Lo guardamos con el nombre de index.php dentro de una carpeta llamada tabladinamicaajax en nuestro servidor. El archivo anterior consiste de un formulario con dos campos de texto, el cual tiene como destino o action otro archivo llamado otroarchivo.php que crearemos posteriormente. El formulario tiene como id form el cual utilizaremos después. Luego tenemos un div con id salida este nos servirá más adelante para contener a nuestra tabla dinámica. También dentro del formulario hay un botón de tipo submit con un evento onclick el cual sirve para asignarle un valor a un control tipo hidden que nos servirá como bandera para la inserción de registros a la tabla.

Ahora añadiremos a nuestro archivo los enlaces a los plugins que acabamos de descargar. Para ello se deben guardar ambos archivos en la misma carpeta que el archivo anterior y luego añadimos dentro del head lo siguiente:


<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.form.js"></script>

Hay que asegurarse que los nombre que están dentro del atributo src correspondan a los nombres de los archivos descargados.

Lo siguiente es añadir el siguiente script justo debajo de los archivos:


<script type="text/javascript">

  $(document).ready(function(){

  $('#form').submit(function(){

         $(this).ajaxSubmit({

             target: '#salida'

         });



         return false;

     });

 })

 </script>

Donde #form corresponde al id del formulario que insertamos anteriormente y #salida corresponde al id del div que contiene la tabla.

Con esto estamos evitando que se produzca el efecto de refresh en el formulario.

Ahora vamos a añadir los registros a la tabla. Añadimos al principio del código lo siguiente:


<?

session_start();

if($_POST['accion']==""){

 $_SESSION['contador']=0;

}

?>

Este código sirve para inicializar un contador que se encargará de llevar el conteo de los registros ingresados en la tabla. Cuando $_POST['accion'] vale es igual a vacio (la condición) se asume que es la primera vez que el formulario se carga o que se acaba de entrar a la página, este es precisamente el momento de inicializar el contador.

Y con esto terminamos de editar el archivo del formulario. Ahora crearemos el archivo otroarchivo.php en la misma carpeta con el siguiente código:


<?

session_start();

if($_POST['accion']=="anadir"){

 $_SESSION['datos'][$_SESSION['contador']]['nombre']=$_POST['nombre'];

 $_SESSION['datos'][$_SESSION['contador']]['apellidos']=$_POST['apellidos'];

 $_SESSION['contador']++;

 echo "<table>

   <tr>

    <th>Nombre</th>

    <th>Apellido</th>

   </tr>";

 for ($i=0; $i < $_SESSION['contador'] ; $i++) { 

  echo "<tr>

    <td>".$_SESSION['datos'][$i]['nombre']."</td>

    <td>".$_SESSION['datos'][$i]['apellidos']."</td>

     </tr>";

 }

 echo "</table>";

}

?>

Cada registro de la tabla es almacenado en una matriz de sesión por lo tanto este archivo comienza recuperando la sesión con session_start()

Después de esto se comprueba el valor de accion el cual de ser igual a anadir, significaría que se ha dado clic en el botón enviar, esto gracias al evento onclick colocado en el mismo. Luego se guardan los datos en la matriz y posteriormente se redibuja la tabla con los datos de la matriz

Y ahora ejecutamos nuestro archivo index.php y vemos su funcionamiento. Algunos tips:

Para manipular los datos de la tabla se utilizará la matriz $_SESSION['datos'] de esa manera podemos almacenar en la base de datos o lo que se requiera.
Como la página no se refresca, los datos del formulario no se borran, esto fue completamente a propósito para que se observará el funcionamiento de ajax, pero cada uno deberá añadir al ejemplo el código para limpiar los campos que considere pertinentes
Cualquier sugerencia o duda pueden comentar o añadirme al google+. Estoy para ayudar.

Espero que les haya sido de utilidad.

[Windows] Sublime + PHP + XDebug en Windows

noreply@blogger.com (Anonymous) — Mon, 24 Dec 2012 22:17:00 +0000

Anteriormente escribí como configurar un entorno de desarrollo en php en linux utilizando el editor Sublime, el servidor apache y el depurador XDebug. Ahora veremos como hacerlo pero en la plataforma de Windows.

Instalar Sublime

Comenzamos instalando el editor de textos que podemos descargar de la siguiente dirección:

http://www.sublimetext.com/2

Una vez descargado procedemos a ejecutarlo para instalarlo.

Instalar Servidor Web

Para los servicios web utilizaremos el potente servidor XAMPP que incluye Apache, MySQL, phpmyadmin, entre otros y podemos descarga desde esta dirección:

http://www.apachefriends.org/en/xampp-windows.html

Cuando termine de descargar lo ejecutamos para instalarlo.

(Xampp requiera de ciertas librerias que de no estar instaladas abrirá el navegador para su respectiva descarga e instalación)

Cuando termine la instalación abrimos el panel de control de XAMPP y activamos los servicios Apache y MySQL. Podemos verificar que todo está correcto entrando en la dirección http://localhost

Habilitar XDebug

Para habilitar la extensión xdebug, abrimos el archivo php.ini que se encuentra en el directorio donde se instaló Xampp, generalemente sera C:\xampp\php\php.ini

Buscamos la sección [XDebug] y quitamos el comentario a las siguientes líneas:

zend_extension = “D:\xampp\php\ext\php_xdebug.dll”
xdebug.remote_enable = 1
xdebug.remote_handler = “dbgp”
xdebug.remote_host = “localhost”
xdebug.remote_port = 9000
xdebug.profiler_enable = 1

Por defecto las opciones xdebug.remote_enable y xdebug.profiler_enable vienen con el valor 0, así que simplemente las cambiamos a 1.

Re-iniciamos el servidor Apache, y comprobamos si la extensión xdebug ha sido cargada, observamos en la dirección:

http://localhost/xampp/phpinfo.php

debe estar presente el siguiente mensaje:

This program makes use of the Zend Scripting Language Engine:
Zend Engine v2.3.0, Copyright (c) 1998-2011 Zend Technologies
with Xdebug v2.1.1, Copyright (c) 2002-2011, by Derick Rethans

Si todo ha ido bien ya debemos tener configurado XDebug en nuestro entorno de desarrollo, ahora vamos a configurar Sublime para que trabaje con el depurador:

Instalando Package Control

Añadiremos a nuestro editor un plugin que nos permite gestionar a los demás plugins, para ello abrimos sublime y luego en View > Show Console, pegamos en la consola lo siguiente:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Luego reiniciamos sublime y ya tenemos Package control instalado

Instalar SublimeXDdebug

Lo siguiente es instalar el plugin de xdebug, para ello presionamos CTRL+SHIFT+P, escribimos Install, escribimos xdebug y presionamos enter. Luego veremos el progreso de la instalación en la barra inferior del programa. Cuando haya terminado reiniciamos Sublime.

Instalar un ayudante de depurador

Necesitaremos instalar un ayudante de depurador para que el navegador sepa que programa se encargará de la depuración (en este caso sublime). Yo uso el Google Chrome y ahí está el XDebug Helper, se instala y se configura de la siguiente manera en Herramientas > Extensiones. Debe quedar como en la imagen:

Y ahora ya podemos comenzar a depurar :D

Atajos de SublimeXDebug

Shift+f8: Open XDebug quick panel
f8: Open XDebug control quick panel when debugger is connected
Ctrl+f8: Toggle breakpoint
Ctrl+Shift+f5: Run to next breakpoint
Ctrl+Shift+f6: Step over
Ctrl+Shift+f7: Step into
Ctrl+Shift+f8: Step out

Ejemplo
En sublime crea un archivo con el siguiente código y guárdalo en tu carpeta del servidor, que deberia ser C:\xampp\htdocs\ y se accede en http://localhost/ con el nombre de prueba.php

<?
$i=2;
$j=2;
$k=2+2;
echo $k;
?>

Añade un breakpoint en la linea 2 presionando CTRL+F8

Presiona SHIFT + F8 y selecciona Start Debugging

En el navegador ingresa accede a tu archivo prueba.php, asegurate de que XDebug Helper esté activado (estará de color verde)

Presiona F8 en sublime para ver las acciones disponibles o CTRL+SHIFT+f6, f7 u f8 para avanzar por las lineas de código, o presiona F8 para obtener un menú con las opciones disponibles (para mas info. ver los atajos que están más arriba)

Con esto podemos ir ejecutando nuestro código fuente linea por linea

Tutorial PHP: Debian + Sublime + XDebug

noreply@blogger.com (Anonymous) — Fri, 14 Dec 2012 01:42:00 +0000

Un editor que conocí hace poco y la verdad me ha encantado es Sublime, tanto que he decidido cambiarlo por Netbeans, posee autocompletado de texto, atajos útiles, una agradable interfaz y es posible añadirle funcionalidad por medio de plugins.
Hoy te voy a enseñar a configurar un entorno de desarrollo para php en linux, usando sublime como editor y xdebug como depurador.

Instalando Sublime
Lo primero seria pues instalar esta fabulosa aplicación, puedes descargarlo desde aqui:
http://www.sublimetext.com/2

Para instalarlo simplemente descomprime el archivo y copia la carpeta a cualquier ubicación por ejemplo la carpeta personal y ejecuta el archivo sublime_text que está dentro de la carpeta.

Instalar el servidor LAMP
Una vez está instalado nuestro editor, habría que instalar nuestro servidor, si es que no lo hemos hecho aún. En debian esto se logra fácilmente de la siguiente manera:

Desde una terminal:

sudo apt-get install tasksel

sudo tasksel install lamp-server

(opcional) Podemos también crear una enlace para acceder a la carpeta del servidor asi

mkdir ~/htdocs

sudo ln -s /home/$USER/htdocs/ /var/www/$USER

En este último comando puedes dejarlo como está o poner tu nombre de usuario, ahora puedes guardar tus aplicaciones en la carpeta htdocs que acabas de crear y para acceder a ellos los haces asi:
http://localhost/tuusuario

Instalar XDebug
Instalaremos XDebug de la siguiente forma

sudo apt-get install php5-xdebug

Luego editamos el siguiente archivo:

gksu geany /etc/php5/conf.d/xdebug.ini

y añadimos los siguiente:

xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost

xdebug.remote_port=9000

Ahora reiniciamos el servidor:

sudo service apache2 restart

Para comprobar que todo está correcto, crea un archivo php en tu carpeta del servidor con el nombre que quieras y escribe el siguiente codigo

<? phpinfo(); ?>

Luego verifica el archivo desde el navegador y asegurate que ya aparezca la configuración de xdebug. Está casi al final.

Descargar y descomprimir Python2.6
El plugin que usaremos para añadir XDebug a Sublima utiliza las librerías de python2.6, específicamente la que se incluía en la versión 10.04 de ubuntu. Así que la descargaremos desde aquí:

http://packages.ubuntu.com/lucid/python2.6

Luego descomprimiremos el paquete descargado asi:

dpkg-deb -x nombredelpaquete.deb python2.6

Finalmente copiamos la carpeta /usr/lib/python2.6 de la carpeta que acabamos de descomprimir y lo pegamos en la carpeta lib de donde esta instalado sublime

Instalar Package Control
Ahora instalaremos un plugin que servirá para poder añadir nuestro plugin de xdebug.
Desde sublime abrimos la consola en View > Show Console y pegamos los siguiente:

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

Luego reiniciamos Sublime

Instalar SublimeXDebug
Desde sublime presionamos CTRL + SHIFT + P, escribimos Install y seleccionamos Package Control: Install Package.

Buscamos XDebug y los seleccionamos. Volvemos a reiniciar Sublime

Instalar un ayudante de depurador
Necesitaremos instalar un ayudante de depurador para que el navegador sepa que programa se encargará de la depuración (en este caso sublime). Yo uso el Google Chrome y ahí está el XDebug Helper, se instala y se configura de la siguiente manera en Herramientas > Extensiones. Debe quedar como en la imagen:

Y ahora ya podemos comenzar a depurar :D

Atajos de SublimeXDebug

Shift+f8: Open XDebug quick panel
f8: Open XDebug control quick panel when debugger is connected
Ctrl+f8: Toggle breakpoint
Ctrl+Shift+f5: Run to next breakpoint
Ctrl+Shift+f6: Step over
Ctrl+Shift+f7: Step into
Ctrl+Shift+f8: Step out

Ejemplo
En sublime crea un archivo con el siguiente código y guárdalo en tu carpeta del servidor con el nombre de prueba.php

<?
$i=2;
$j=2;
$k=2+2;
echo $k;
?>

Añade un breakpoint en la linea 2 presionando CTRL+F8

Presiona SHIFT + F8 y selecciona Start Debugging

En el navegador ingresa accede a tu archivo prueba.php, asegurate de que XDebug Helper esté activado (estará de color verde)

Presiona F8 en sublime para ver las acciones disponibles o CTRL+SHIFT+f6, f7 u f8 para avanzar por las lineas de código, o presiona F8 para obtener un menú con las opciones disponibles (para mas info. ver los atajos que están más arriba)

Con esto podemos ir ejecutando nuestro código fuente linea por linea

Ubuntu: Servidor LAMP, Netbeans y XDebug

noreply@blogger.com (Anonymous) — Wed, 09 Nov 2011 05:21:00 +0000

La fuente original de esta información es la siguiente:
http://www.techytalk.info/ubuntu-netbeans-lamp-with-xdebug-nonroot/

Yo solo me encargué de traducirla. Bueno imaginemos esta situación: Estamos programando un proyecto en php, para ello escogemos Ubuntu (o cualquier otra distribución linux basada en Debian) y como IDE escogemos a Netbeans. Pues bueno la cuestión es que como principiantes en php muchas veces cometemos inocentes errores, y nos hacemos añicos buscándolos y buscándolos, (:O) a tal punto de querer destrozar nuestra pobre computadora. Y nos preguntamos, ¿Habrá alguna manera más fácil de corregir nuestro código? ¿Podemos ir ejecutando línea por línea, como lo hacíamos en Visual Studio? Pues la respuesta es XDebug, un depurador para php. En este Tutorial, vamos a aprender a configurar un ambiente de desarrollo en php, utilizando como Sistema Operativo a Ubuntu, un servidor LAMP (Linux Apache MySQL PHP), Netbeans y Xdebug para depurar nuestros códigos.

La primer cosa que necesitamos hacer es instalar el servidor LAMP. En las distribuciones basadas en Debian esto se hace fácilmente, usando tasksel para seleccionar todos los paquetes necesarios para un servidor LAMP típico. Así lo primero que haremos será instalar tasksel. Digitamos en una terminal:

sudo apt-get install tasksel

Lo siguiente es usar tasksel para instalar el LAMP server. Lo hacemos de esta manera:

sudo tasksel install lamp-server

En la mitad de la instalación, tasksel te va preguntar tu contraseña de root de MySQL. Es importante que anotes la contraseña que escribiste, porque esta contraseña va servir para accesar a la base de datos MySQL. Después que la instalación termine, vamos a instalar Xdebug y uno de los módulos de manipulación de imágenes PHP que todo desarrollador web va necesitar en su trabajo, llamado GD library. Este también es un buen momento para instalar Netbeans ya sea desde los repositorios de Ubuntu o descargar el ejecutable del sitio oficial. Para instalar Xdebug y el otro chunche, escribimos en una terminal lo siguiente:

sudo apt-get install php5-xdebug php5-gd

Yo (el autor del Post original no yo XD) usualmente uso un directorio "public_html" dentro de mi carpeta personal, para almacenar todos los códigos de mis sitios web. Tu puedes usar cualquier directorio dentro de tu carpeta personal que quieras.

Una cosa importante que hay que mencionar es que el servidor Web de Ubuntu lo inicia un usuario llamado "www-data" y el directorio donde vamos a guardar nuestras paginas web debe tener permisos de lectura y escritura para este usuario (no voy a entrar en detalles sobre este aspecto pero si te has sentido un tanto confundido por esto sería bueno que te leyeras algo sobre los procesos y usuarios en los sistemas linux). Entonces lo que vamos hacer es, poner como propietario de la carpeta "public_html" al usuario "www-data". También nos interesa a nosotros como usuarios, tener los mismos permisos del dicho usuario sobre dicha carpeta. Esto se logra añadiendo nuestro usuario al grupo "www-data" (nuevamente te recomiendo leer sobre los usuarios y grupos en linux). Bueno todo este lío al final se hace con estas simples líneas de código:

mkdir /home/$USER/public_html
sudo chown -R www-data:www-data /home/$USER/public_html
sudo chmod -R 775 /home/$USER/public_html
sudo adduser $USER www-data

Ahora que ya tenemos nuestra carpeta "public_html" en su lugar, debemos indicarle a Apache que use esa carpeta como documento raíz del servidor web (o sea que ahí se van a guardar las paginas web que hagamos). De manera que cuando vayamos a "localhost" o a "127.0.0.1" nos lleve a las paginas que están almacenados en nuestra carpeta "public_html". Primeramente, hacemos una copia de la plantilla de sitio web por defecto y la modificamos:

sudo cp /etc/apache2/sites-available/default /etc/apache2/sites-available/public_html

Ahora debemos editar nuestra plantilla para que apunte a la carpeta "home/$USER/public_html" en vez de la carpeta por defecto "/var/www/". Lo que sigue es abrir nuestra nueva plantilla para editarla:

gksudo gedit /etc/apache2/sites-available/public_html

Necesitamos modificar dos líneas: la primera es "DocumentRoot", cambiamos "/var/www" por "/home/tuusuario/public_html", luego la segunda sección "Directory", cambiamos "/var/www/" por "/home/tuusuario/public_html/". Hago especial énfasis que para el caso de la segunda línea que se modifica, hay que asegurarse de poner la "/" al final.

Este es un ejemplo de mi propio archivo de configuración:

<VirtualHost *:80>
 ServerAdmin webmaster@localhost
 
 DocumentRoot /home/danielito/public_html
 <Directory />
  Options FollowSymLinks
  AllowOverride None
 </Directory>
 <Directory /home/danielito/public_html/>
  Options Indexes FollowSymLinks MultiViews
  AllowOverride None
  Order allow,deny
  allow from all
 </Directory>
 
 ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
 <Directory "/usr/lib/cgi-bin">
  AllowOverride None
  Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
  Order allow,deny
  Allow from all
 </Directory>
 
 ErrorLog ${APACHE_LOG_DIR}/error.log
 
 # Possible values include: debug, info, notice, warn, error, crit,
 # alert, emerg.
 LogLevel warn
 
 CustomLog ${APACHE_LOG_DIR}/access.log combined
 
    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>
 
</VirtualHost>

Ahora podemos deshabilitar el sitio por defecto de Ubuntu y habilitar nuestro sitio "public_html".

sudo a2dissite default
sudo a2ensite public_html

Lo que falta es configurar Xdebug para que permita depurar. Para ello editamos el archivo de configuración de Xdebug:

gksudo gedit /etc/php5/conf.d/xdebug.ini

Añadimos lo siguiente al final del archivo:

xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9000

Nada más resta reiniciar el servidor Apache:

sudo service apache2 restart

Y ¡FELICIDADES! ya tienes instalado un poderoso servidor LAMP con capacidad de depuración de php, para que ya no te matés buscando errores, que si que no te guarda, que no entra al if, que no se qué... jejeje. Para aprovechar esta característica te recomiendo usar un IDE como netbeans o eclipse (lo siento Dreamweaver ¬¬)

JQuery UI: JQuery para seres humanos XD

noreply@blogger.com (Anonymous) — Sun, 06 Nov 2011 16:02:00 +0000

Asi con esta mención de Ubuntu, quiero comentarles sobre esta herramienta muy importante: JQuery UI. Considero yo que es una forma más sencilla de hacer uso de este potente framework.

Muchos ya sabemos lo que es JQuery, y para quienes no, un poco de wikipedia para estar en sintonía:

JQuery

Ahora bien, JQuery UI (JQuery User Interface) viene siendo como una compilación de widgets, efectos, etc. que son parte de JQuery y que nos permite hacer uso de ellos de una manera más sencilla que con el propio JQuery (o al menos así lo concibo yo).

JQuery UI se divide en 4 partes:

Interactions (interacciones): proporciona ciertas propiedades a los elementos, por ejemplo: que se puedan arrastrar, redimensionar, etc.
Widgets (se traduce igual XD): proporciona elementos que podemos utilizar en nuestra aplicación web, por ejemplo: selectores de fecha, menús tipo acordión, barras de progreso, etc.
Utilities (utilidades): Proporciona interacciones con los elementos.
Effects (Efectos): Proporciona efectos de transición para las interacciones.

La utilización es bastante sencilla, sería más o menos así:

Ver para Creer

Bueno, primeramente podemos ver su funcionamiento desde su página de demostración Demos de JQuery UI

En la página de Demos solo se selecciona el elemento que se desea ver, cada página de demostración esta bien documentada, ofreciendo distintos tipo de configuración para cada elemento y su respectivo código fuente para su utilización. Lamentablemente hay que dominar el inglés (aunque con super Google Traductor todo es posible).

Descargar

Lo siguiente, luego de ver y decidir que se quiere ocupar, el tema preferido (si, se le pueden aplicar temas o skins muy bonitos) procedemos a descargar los archivos necesarios para implementarlo en nuestra aplicación. Para ello nos dirigimos a la página de descargas descargas de JQuery UI.

En el sitio de descargas, seleccionamos los componentes que deseamos tener, el tema y la versión de JQuery UI. Al seleccionar todos los componentes, la descarga va ser de aprox: 1 MB (:O). No es tan pesado.

La descarga es un archivo zip, que tenemos que descomprimir en un sitio conveniente. Dentro tenemos 3 carpetas y un archivo index.html. Lo que nos interesa son las carpetas css y js donde se encuentran el estilo css (tema o skin), y los archivos javascript que hacen que la magia funcione. Pues bien, solo bastaría con copiar estos archivos a nuestra carpeta web para empezar a usar esta maravillosa herramienta de los dioses :D

Usar

Ya con los archivos copiados en nuestra carpeta web, su utilización es sencilla, basta con referenciar los archivos necesarios (css y js) al código fuente:


<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="../estilos/blitzer/jquery-ui-1.8.16.custom.css">

Importante mencionar que hay que tener cuidado de dejar el archivo JQuery antes del de JQuery UI ya que de lo contrario no funciona (¬¬ me ha pasado).

Con esto ya estamos listos para usar cualquiera de los elementos que se incluyen en nuestro jquery ui. Para ello solo insertamos el codigo del elemento deseado. Este codigo podemos tomarlo de la pagina de demostracion de JQuery UI y combinar las configuraciones deseadas. Como ejemplo aquí un selector de fechas:


<script>

$(function() {

    $(".date-pick").datepicker({ 

        minDate: "-100Y", 

        maxDate: "+1M +10D",

        changeMonth: true,

        changeYear: true
     });

});

</script>

En esta código, seria prudente modificar unas cuantas cosas. Por ejemplo $(".date-pick"), esto nos indica que para convertir un elemento a selector de fecha, se le debe pasar al atributo class ( es class debido al ".", si fuera "#" entonces sería por medio del atributo id) el valor "date-pick", esto se puede modificar a conveniencia.

Espero que este post sea de utilidad y les hay gustado. No soy la gran eminencia programando, pero me gusta compartir lo poco que sé :) si les ha gustado comenten.

Ingresar datos en una Tabla Dinámica de Forma Manual. (html y php)

noreply@blogger.com (Anonymous) — Sat, 05 Nov 2011 18:36:00 +0000

Quiero empezar con este blog, con un aporte que me acaba de servir mucho. Agradecimientos a las personas que me ayudaron con esto.

Para empezar, en lenguaje html, vamos a entender una tabla dinámica como una tabla, cuya cantidad de filas no se puede precisar. O sea que no se sabe cuantas filas va tener, y por lo tanto se utiliza el lenguaje php o algún otro lenguaje de programación orientado a web, para ir insertando las filas, normalmente usando un ciclo FOR u otro ciclo repetitivo.
Existen una serie de tutoriales en internet en donde nos explican como crear una tabla dinámica a partir de datos almacenados en una base de datos. Por ejemplo:

Video para crear tablas dinamicas usando php

En mi caso, yo pretendo crear una tabla dinámica, cuyos datos sean ingresados manualmente por medio de campos de texto o etiquetas <input> y mediante un botón sean añadidos a la tabla.

Así que manos a la obra, inicialmente tenemos el siguiente formulario:


<!DOCTYPE html>

<html>

<head>

<title>PRUEBA</title>

</head>

<body>

<form name="alumno" method="post" action="<?php $PHP_SELF ?>">

<label>Nombre:</label>

<input type="text" size="25" maxlength="50" name="nombre">

<label>Edad:</label>

<input type="number" name="edad">

<input type="submit" value="Anadir">

</form>

<table border="1">

<tr>

<th>Nombre:</th>

<th>Edad:</th>    

</tr>

</table>

</body>

</html>

Con este código obtenemos un formulario muy básico, que consta de dos campos de texto, un bóton que nos va servir para añadir los datos a la tabla, la cual está debajo de los campos.

Bien, lo primero que vamos a hacer es añadir una etiqueta input de tipo "hidden" al formulario, este nos va servir para indicarle a php, que estamos añadiendo registros a la tabla. Lo colocamos entonces dentro del formulario así:



<form name="alumno" method="post" action="index1.php">

<input type="hidden" value="anadir" name="accion">

Ahora lo que sigue es añadir el código PHP que se va encargar de hacer la magia. Lo que tenemos que hacer es comprobar el valor que tiene "accion" (o sea la etiqueta input que acabamos de añadir) y dependiendo de eso, así va ser la acción que se va realizar. Por ejemplo si "acción" es igual a " " o está vacío, quiere decir que es la primera vez que la página se carga, por tanto es buen momento para crear una variable "contador" que se encargue de controlar la posición de una matriz "datos" que vamos a usar para almacenar los registros que se van a mostrar en la tabla. Cabe mencionar que estas variables "contador" y "datos" deben ser variable de sesión, para que al recargar la página no se pierdan los datos. La porción de código a añadir sería la siguiente: (Añadir al principio del código)


<?php

session_start();

if($_POST['accion']=="") {

$_SESSION['contador']=0;

}

if($_POST['accion']=="anadir") {

$_SESSION['datos'][$_SESSION['contador']][0]=$_POST['nombre'];

$_SESSION['datos'][$_SESSION['contador']][1]=$_POST['edad'];

$_SESSION['contador']=$_SESSION['contador']+1;

}

?>

Usamos session_start() para recuperar las variables de sesión, luego se comprueba el valor de accion. Cuando está vacío quiero decir que es la primera vez que se carga la página, por lo que se crea el contador que va manejar las posiciones de la matriz datos donde están almacenados los registros que se van a mostrar en la tabla. Cuando accion tiene el valor de "anadir", quiero decir que ya se presionó por lo menos una vez el botón Añadir y por tanto ya hay un dato que se debe mostrar. Estos datos se almacenan en la matriz datos y se aumenta en uno el contador.

Ahora solo resta mostrar los registros en la tabla, y para ello solo basta con recorrer la matriz e ir mostrando los datos que contiene. Así:


<table border="1">

<tr>

<th>Nombre:</th>

<th>Edad:</th> 

</tr>

<?php

for($i=0;$i<$_SESSION['contador'];$i++) {

echo "

<tr>

<td>".$_SESSION['datos'][$i][0]."</td>

<td>".$_SESSION['datos'][$i][1]."</td>

</tr>

";

}

?>

</table>

De esta manera tenemos una tabla a la que se le pueden insertar registros de forma manual. Si luego se desea almacenar estos datos en una base de datos solo se debe trabajar con la matriz. Posteo tambien el archivo php con el código completo. Si le has gustado este post comenten :)

Descargar arhivo php