XandruSoft Web Blog

Seleccionar checkbox con jQuery

2012-01-16T00:00:00.000+01:00

na de las tecnologías más utilizadas a la hora de crear una página web dinámica y sobre todo, muy vistosa, es jQuery. En esta ocasión veremos cómo seleccionar todos los checkbox de una lista y cómo seleccionar un checbox cuando marcamos un elemento concreto.

Para seleccionar todos los checkbox de una lista utilizando jQuery simplemente debemos utilizar un condicional para comprobar el estado del checkbox director y aplicar el mismo estado al resto. La función es la siguiente:

function checkTodos (id,pID) { $( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked')); }

pID es el identificador del formulario e id es el identificador del checkbox director.

Si en cambio lo que queremos es seleccionar un checkbox en función de un elemento concreto, la función es tan simple como la siguiente:

function checkSel(id) { $('input:checkbox[value='+id+']').attr("checked","checked");}

Donde id es el valor del atributo value del checkbox

Crear aplicacion acceso directo web en Android

2012-01-02T17:24:00.000+01:00

Buscando cómo crear aplicacion acceso directo web en Android he encontrado una magnífica aplicación web que nos permite crear una aplicación que funciona simplemente como un acceso directo a nuestra página web, blog o cualquier aplicación que tengamos en Internet.Además de poder crear la aplicación, nos ofrece el código QR para que cualquier se lo pueda descargar desde su teléfono, la opción, distribuirla e incluso ganar dinero con ella. La verdad que yo solo necesitaba crear una aplicación de acceso directo a mi aplicación web, y en dos pasos he podido hacerlo.Si no queremos pagar licencia de desarrollador de Android para poder subir nuestra aplicación al market, siempre podemos copiar el código QR que nos proporcionan para descargarla e incrustarlo en nuestra página web o cualquier otro sitio de referencia.La herramienta que nos permite hacer todo esto es http://www.appsgeyser.com. Incluso nos ofrece estadísticas de descarga de la aplicación y ponerle un icono personalizado.Prueba esta aplicación, seguro que te gustará.

Seleccionar radio button y checkbox con jQuery

2011-12-13T10:55:00.000+01:00

uando queremos dar una estética dinámica a nuestra página solemos utilizar jQuery para mostrar elementos dinámicamente. En esta ocasión os mostraré como mostrar un elemento en función de que radio button o checkbox esté seleccionado con jQuery.

Lo primero que debemos hacer es crear los elementos HTML como los del siguiente ejemplo:

<div class="sist_reports">
   <input type="radio" name="numprioridad" value="1" checked>Realizada
   <input type="radio" name="numprioridad" value="2">Pendiente
   <input type="radio" name="numprioridad" value="3">Futura
</div>
<div id="dat_rep">
   <label for="name">Fecha</label>
   <input type="date" name="datfecha" id="datepicker" readonly="readonly" size="12" value="" required/>
</div>

Justo antes el cierre de la etiqueta </body> añadimos la función jQuery

$('input:radio[name=check]:').click(function () {
   valrad = $('input:radio[name=numprioridad]:checked').val();
   if(valrad==1)
      $("#dat_rep").show();
   else
      $("#dat_rep").hide();
});

Os explicaré lo que hace cada línea:

$('input:radio[name=check]:').click(function () {

Invoca una función cada vez que se hace click en el elemento radio cuyo name es check

valrad = $('input:radio[name=numprioridad]:checked').val();

Almacenamos el valor del radio seleccionado en la variable valrad

if(valrad==1)

Comprobamos que el valor sea igual a 1

$("#dat_rep").show();

Mostramos el elemento con id=dat_rep

$("#dat_rep").hide();

Ocultamos el elemento con id=dat_rep

Con esta función se pueden hacer muchas cosas que añaden valor a nuestra página facilitando la interacción del usuario.

Crear fondos degradados con CSS3

2011-11-16T10:36:00.001+01:00

ntre las novedades que incluye el nuevo CSS3 encontramos la posibilidad de crear un fondo degradado sin necesidad de utilizar imágenes.

Para degradar el fondo de un objeto utilizando CSS3 simplemente debemos añadir las siguientes líneas en los atributos de la etiqueta de la hoja de estilos:

background: -moz-linear-gradient(center top , #A0A0A0, #F0F0F0) no-repeat scroll 0 0  #F0F0F0;
background: -webkit-gradient(linear, left top, left bottom, from(#A0A0A0), to(#F0F0F0), color-stop(0.7, #F0F0F0));

Debemos incluir los dos atributos, uno para Mozilla y el otro para Chrome.

Con esto conseguimos un degradado vertical cuyo color superior es #A0A0A0 y el inferior #F0F0F0.

También te puede interesar:
Cómo crear bordes redondeados con CSS3

Bordes redondeados en etiquetas con CSS3

2011-11-12T20:59:00.001+01:00

na de las nuevas propiedades que nos proporciona CSS3 es la posibilidad de utilizar bordes redondeados en las etiquetas.

Una de las grandes ventajas de esta utilidad es que ya no debemos utilizar imágenes o JavaScript para conseguir este efecto por lo que conseguiremos mejorar sustancialmente la velocidad de carga de la página.

Para utilizar bordes redondeados con CSS3 debemos añadir el siguiente código en nuestra hoja de estilos:

-moz-border-radius: 10px; /* Firefox*/
-ms-border-radius: 10px; /* IE 8.*/
-webkit-border-radius: 10px; /* Safari,Chrome.*/
border-radius: 10px; /* Estándar.*/

Acrotar entradas en la página index de Wordpress

2011-11-04T14:14:00.001+01:00

s más que recomendable mostrar las entradas acortadas en la página principal (o index) de nuestro blog para obligar a los usuarios a ir a la entrada correspondiente para leerla completamente.

En Wordpress tenemos dos formas de hacerlo, una editando el código y otra simplemente añadiendo una línea extra en nuestras entradas.

La más sencilla y útil es añadiendo la etiqueta

-dónde Sigue leyendo... es la frase que se muestra y totalmente personalizable- en el punto en que queremos que se corte la descripción de la entrada.

Automáticamente en la página de inicio aparecerá la entrada cortada por el punto indicado y con la descripción que hemos especificado.

La segunda forma puede que no sea posible aplicarla si tenemos puesta alguna plantilla personalizada, pero se trata de cambiar las funiones que invocan las entradas, modificando en index.php

<?php the_content('Read the rest of this entry »'); ?> por <?php the_excerpt(__('Leer más...'));?>

Recuperar grub Windows 7 con Asturix

2011-09-16T10:14:00.000+02:00

uando al instalar o formatear Windows en nuestro equipo, éste no detecta ningún sistema operativo en el arranque y se reinicia constantemente o muestra el error "grub error >" es sintoma de que se ha estropeado y debemos restaurar el grub.

El grub se puede romper si se cumple que:

- Instalamos o recuperamos Windows teniendo instalado Linux

- Modificamos algún parametro del grub

- Formateamos el equipo (Windows) teniendo instalado Linux

Para recuperar el grub de Windows, Linux o ambos lo más cómodo es utilizar una distribución Live de Linux, en nuestro caso utilizaremos Asturix en modo Live corriendo desde un USB.

Una vez estemos en Asturix modo Live, debemos ejecutar la siguiente lista de comandos desde el terminal.

Damos permisos de root para ejecutar los comandos

$ sudo su -

Comprobamos las unidades del sistema

$ fdisk -l

Montamos la unidad qu queremos (si tenemos Linux instalado es recomendable montar la partición en la que se encuentre).

$ mount /dev/sdax /mnt

donde x es el número del dispositivo que queremos restaurar (nomalmente el S.O. Linux)

$ mount --bind /dev /mnt/dev
$ chroot /mnt

Una vez montado y dado permisos a la unidas, restauramos el grub con el comando:

$ update-grub2

Si el comando no encuentra todas las unidades o falla, tal vez debamos reiniciar el equipo y volver a ejecutar la secuencia de comandos, porque a veces necesita montar correctamente el sistema Linux antes de restaurar el Windows.

Acortador de URLs Goo.gl - API para PHP

2011-09-11T19:34:00.000+02:00

i estamos interesados en utilizar en nuestras páginas un acortador de URLs, recomiendo utilizar el que nos proporciona google porque, además de ser corto (6 caracetres), nos proporciona estadísticas detalladas del uso de cada enlace generado.

Para utilizar su API existe un proyecto llamado googl-php que incluye una clase muy fácil de usar con la que podremos tanto acortar como expandir URLs con el acortador Goo.gl de Google.

El proyecto se puede ver en su página de Google code y también os dejo un enlace a la clase googl.class

Para utilizar esta clase debemos obtener nuestra clave de API de Google. Para conseguirla debemos acudir al siguiente enlace.

Si, como a mí, la función shorten os da error, podeís modificarla por la siguiente:

//This is the URL you want to shorten
$longUrl = 'http://www.example.com';
$apiKey = 'your_api_key_here';
//Get API key from : http://code.google.com/apis/console/
 
$postData = array('longUrl' => $longUrl, 'key' => $apiKey);
$jsonData = json_encode($postData);
 
$curlObj = curl_init();
 
curl_setopt($curlObj, CURLOPT_URL, 'https://www.googleapis.com/urlshortener/v1/url');
curl_setopt($curlObj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curlObj, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($curlObj, CURLOPT_HEADER, 0);
curl_setopt($curlObj, CURLOPT_HTTPHEADER, array('Content-type:application/json'));
curl_setopt($curlObj, CURLOPT_POST, 1);
curl_setopt($curlObj, CURLOPT_POSTFIELDS, $jsonData);
 
$response = curl_exec($curlObj);
 
//change the response json string to object
$json = json_decode($response);
 
curl_close($curlObj);
 
return $json->id;

Os recuerdo que la respuesta JSON que devuelve la API es:

{
 "kind": "urlshortener#url",
 "id": "http://goo.gl/lBfOH",
 "longUrl": "https://www.packtpub.com/php-jquery-cookbook-to-create-interactive-web-applications/book"
}

Como instalar keepass en Linux (Ubuntu)

2011-08-22T11:44:00.001+02:00

nstalar la última versión de Keepass en Linux puede convertirse en una tarea tediosa. Para intentar facilitaros el trabajo, os mostraré un atajo que sirve solo para algunas distrubuciones de Linux.

Para instalar Keepass en Linux la página oficial del proyecto indica que se debe realizar mediante mono -integrado en las últimas versiones de Ubuntu-. Pero en esta ocasión os mostraré un atajo que he encontrado y me ha funcionado.

Para instalarlo de la forma más fácil, debemos introducir los siguientes comandos:

sudo apt-add-repository ppa:jtaylor/keepass
sudo apt-get update
sudo apt-get install keepass2

Si de esta forma no lo conseguimos (comprobar que se actualizaron los paquetes), debemos seguir las instrucciones que nos indican en la ayuda del proyecto.

Conocer los servicios activos en Linux

2011-04-22T13:49:00.000+02:00

ara conocer los servicios que se están activos en el sistema tenemos dos opciones: utilizar el gestor que nos proporciona el sistema o instalar una herramienta al efecto.

Para utilizar el gestor del sistema (con el escritorio activo) podemos ir a Preferencias del Sistema -> Arranque y Apagado -> Gestor de Servicios, donde podremos ver aquellos que se incian automáticamente al arrancar el sistema.

Si no disponemos de escritorio o nos gusta hacerlo a través de línea de comandos, la opción es utilizar la herramienta rcconf, que nos mostrará marcados con un asterisco aquellos que se ejecutan al iniciar el sistema, pudiendo configurarlo como deseemos. Para instalarla ejecutamos el siguiente comando:

sudo aptitude install rcconf

Y para ejecutarla:

sudo rcconf

Con estas herramientas podremos gestionar los servicios de nuestro sistema.

Instalar XAMPP en Linux

2011-04-20T19:58:00.000+02:00

unque en alguna entrada anterior hemos explicado cómo instalar XAMPP en Windows, no nos íbamos a olvidar de todos los fans de Linux y sobre todo aquellos que les apasiona el desarrollo. Por ello, vamos a seguir unos simples pasos para instalar LAMPP en Linux (LAMPP es el término utilizado para Linux).

1. Acudimos a la página de descargas del proyecto y bajamos la última versión.

2. Descomprimimos el contenido del archivo descargado en el directorio /otp del sistema:

sudo tar xvfz xampp-linux-1.7.4.tar.gz -C /opt

3. Arrancamos los servicios:

sudo /opt/lampp/lampp start

4. Accedemos a la página de localhost:

http://localhost

Aquí deberemos ver la página principal del servicio, donde podremos configurar varios parámetros del mismo (pendiente para un próximo artículo).

Para subir nuestra página al servidor local, lo haremos en el directorio /opt/htdocs que es el de por defecto de LAMPP.

Con ésto, ya podemos empezar a crear nuestras páginas de forma local sin necesidad de disponer de un hosting.

Asturix People

2011-04-07T18:17:00.001+02:00

Sumar o restar valor a fechas con php

2011-01-19T12:19:00.000+01:00

i queremos restar o sumar una hora a la fecha actual o a cualquier fecha, no tenemos más que operar con la función date() que nos proporciona PHP.

Podemos usar una de las dos formas que se muestran a continuación simplemente debemos seguir los siguientes pasos:

Opción 1:

//Obtenemos la fecha actual:
$fecha=time();
//Queremos restar 3 horas a la fecha actual:
$horas = -3;
// Convertimos las horas a segundos y las sumamos:
$fecha += ($horas * 60 * 60);
// Le damos al resultado el formato deseado:
$fecha = date("Y-m-d H:i:s", $fecha );

Opción 2:

Es quizá la más intuitiva:

echo date("Y-m-d H:i:s", (strtotime ("+2 Hours")));

Pudiendo sustituir el valor (+2) y Hours por lo que queramos sumar o restar.

Problema: JavaScript redondea números grandes

2011-01-10T10:05:00.000+01:00

avaScript redondea números grandes porque los procesa en coma flotante, por lo que tienen una preción limitada. Normalmente, en JavaScript, un valor tiene 16 dígitos de precisión.

Si la intención es operar con esta clase de números, se puede utilizar alguna de las librerías que existen, creadas a tal efecto, y que se pueden descargar desde los siguientes enlaces:

www-cs-students.stanford.edu

leemon.com

Crear usuarios en base de datos mysql

2010-12-12T15:19:00.000+01:00

uando instalamos el servicio mysql en nuestro servidor, por defecto se crea un usuario root que puede realizar cualquier acción, porque tiene permisos de superusuario.

Pero cuando queremos trabajar con una base de datos en concreo, bien sea para una página web, blog o cualquier cosa que requiera acceso a base de datos, lo recomendable es crear un usuario que solo pueda trabajar con esa base de datos en concreto e incluso podemos ponerle restricciones de creación, modificación, etc.

Para crear un nuevo usuario mysql, utilizaremos la siguiente instrucción:

CREATE USER user1@'localhost' IDENTIFIED BY 'password1';

Con esto, tendremos un nuevo usuario llamado user1 con contraseña password1. El usuario, por defecto, no tendrá ningún permiso, por lo que debemos darle los permisos oportunos para que el usuario pueda trabajar con una base de datos. Un ejemplo es el siguiente:

GRANT SELECT, INSERT, UPDATE, DELETE ON blog.* TO ' user1'@'localhost';

Aquí indicamos que el usuario user1 puede trabajar sobre cualquier tabla de la base de datos blog y puede realizar las acciones: SELECT, INSERT, UPDATE, DELETE.

Las acciones que permite GRANT son:

Select: Permite ejecutar sentencias SELECT.

Insert: Permite ejecutar sentencias INSERT.

Update: Permite ejecutar sentencias UPDATE.

Delete: Permite ejecutar sentencias UPDATE.

References: Capacidad de crear una restricción que se refiere a la tabla.

Alter: Capacidad para cambiar la de una tabla con la sentencia ALTER TABLE.

Index: Capacidad para crear un indez en una table con la sentencia CREATE INDEX.

Utilizando esta técnica conseguiremos añadir mayor seguridad a nuestro sistema a la hora de trabajar con bases de datos.

Ejecutar entorno gráfico Ubuntu desde Windows

2010-11-23T14:10:00.000+01:00

ara trabajar con nuestro Ubuntu Server o cualquier otro Linux remotamente desde Windows desde cualquier ordenador, lo podemos hacer mediante ssh con el programa cygwin.

Para habilitar el servicio debemos realizar varias taraes:
Lo primero debemos comprobar que la opción de X11 forwarding se encuentra permitida en el archivo /etc/ssh/sshd_config. Para ello buscamos la cadena X11Forwarding, que debe estar con valor yes.

Lo siguiente será instalar algún entorno gráfico. En nuestro caso nos hemos decantado por la siguiente opción:

$ sudo aptitude install xorg (x-window-system-core)
$ sudo aptitude install xfce4 (gnome, kde, icewm, fluxbox, etc)

En Windows instalaremos el programa Cygwin. Descargamos el instalable desde la página web del proyecto y lo copiamos a la carpeta c:\cygwin. A la hora de instalar nos pedirá que indiquemos el servidor (en mi caso seleccioné mirror.cs.vt.edu). Una vez descargados los archivos de instalación, nos mostrará una lista con paquetes disponibles para instalarlos juntos al programa. No debemos olvidarnos de seleccionar los paquetes incluidos en X11 y comprbando que se encuentran seleccionados los siguientes: xterm, openssh (Net), xorg-server, xinit,xorg-docs,x-start-menu-icons, inetutils.

La instalación durará un buen rato, por lo que podemos aprovechar para realizar cualquier otra cosa.

Una vez finalizada la instalación ejecutamos el programa Xwin que ha instalado.

Podemos encontrarlo en Inicio -> Programas -> CygwinX. Una vez arrancado, se minimizará y pasará a ejecución en segundo plano. Si lo abrimos, podemos comprobar que todo esté funcionando.

Para conectarnos al servidor por la interfaz gráfica ejecutamos:

ssh –X usuario@dominio.ext

Desde aquí podremos ejecutar cualquier commando de nuestro servidor, e incluso aquellos que sean para ejecutar programas con entorno gráfico.

Actualizar Aplicaciones Ubuntu server

2010-11-21T20:47:00.000+01:00

s muy importante tener actualizado el sistema y las aplicaciones con las últimas actualizaciones, tanto para poder disponer de las últimas funcionalidades, pero sobre todo, como para poder evitar las posibles vulnerabilidades que se hayan encontrado en las versiones anteriores de los programas.

Para actualizar todos los programas que tenemos instalados en nuestro Ubuntu server no tenemos más que ejecutar el comando

sudo apt-get update && sudo apt-get upgrade

que nos permitirá actualizar tanto el índice de paquetes como los paquetes respectivamente.

Esta simple acción nos permitirá evitarnos algunos quebraderos de cabeza innecesarios.

Api de graficos de google

2010-10-27T15:49:00.000+02:00

unque para mostrar graficas en nuestra página web disponemos de muchos plugins, creemos que lo más cómodo es utilizar la API de Google que nos permite crear gráficas.

Para ver todos los tipos de gráfica que podemos utilizar podemos acceder a la galería de graficos de google

Un ejemplo de uso de grafica de pie:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Un ejemplo completo de creación de una gráfica con la API de Google sería:

$url_Browsers = $seo->getChartPie($aBrowsers,"440x150","p3","FFFF10,FF0000");

function getChartPie($dat,$size,$cht,$chco)

 {

$url = "http://chart.apis.google.com/chart?chs=".$size."&cht=".$cht."&chd=t:".implode($val,",")."&chl=".implode($desc,"|");

  if($chco!="")

   $url .= "&chco=".$chco;

  return $url;

 }

echo "<img src='".$url_Browsers."' alt='navegadores' />";

Si vemos que es muy complicado crear las gráficas de forma manual o queremos expermientar con más formatos, podemos usar el wizard que nos proporciona google:

Error “Can't connect to local MySQL server through socket”

2010-10-14T13:42:00.000+02:00

i estamos intentando instalar nuestra aplicación en un servidor externo e intentamos establecer la conexión con la base de datos puede que nos dé error “Can't connect to local MySQL server through socket”.

Esto nos indica que estamos accediendo de forma errónea al servidor, problablemente porque estemos accediendo a localhost y en vez de eso debamos acceder al servidor que nos proporcione el ISP, por ejemplo, mysql.servidor.com.

Refrescar página web automáticamente con PHP

2010-10-11T11:54:00.000+02:00

uando necesitamos refrescar nuestra página web automáticamente cada cierto tiempo, lo primero que se nos ocurre es utilizar una función en JavaScript, pero debemos saber que también lo podemos hacer con código PHP.

La función de refresco de página en PHP es muy sencilla, por lo que pasamos a verla directamente:

$self = $_SERVER['PHP_SELF']; //Obtenemos la página en la que nos encontramos
header("refresh:300;  url=$self"); //Refrescamos cada 300 segundos

Nota: 300 segundos = 5 minutos (para que los veáis más claramente).

Redeclarar funciones con PHP

2010-10-07T23:10:00.000+02:00

i estamos acostumbrados a trabajar con lenguajes como Java o C++, puede que una práctica habitual sea redeclarar funciónes para que se use una u otra en función del número de parámetros que le pasemos.

En php nos encontramos con el problema de que esta forma de declarar funciones no es soportada, por lo que nos tendremos que buscar la vida para poder pasar a una función un número variable de parámetros.

Una opción es usar la función func_num_args() con la que podremos conocer el número de argumentos o parámetros que le pasamos a la función.

Un ejemplo de una función independiente del número de parámetros es:

function ejemplo(){
$numArgs = func_num_args();
if($numArgs==1){
//Hace una cosa
}
if($numArgs==2){
//Hace otra cosa
}
}

Verificar el User Agent del navegador con PHP

2010-09-29T19:14:00.000+02:00

omo habíamos dicho en el artículo trabajar con distintos user agent, existen multitud de navegadores con sus características particulares desde los que se accede cada día a las páginas web.

Para adaptar nuestras páginas a los distintos navegadores debemos poder reconocelos, mediante su User Agent para poder aplicar las distintas configuraciones.

La función que nos permite comprobar el tipo de User Agent es:

stristr($_SERVER['HTTP_USER_AGENT'],'user_agent')

Simplemente añadiendo las condiciones que nos interesen y haciendolas cumplir, podemos hacer que la página se comporte de forma distinta para cada navegador.

Añadir timeline de Twitter a Blogger

2010-09-27T19:12:00.000+02:00

i queremos incluir los últimos twitts de nuestra cuenta de Twitter (timeline) en un blog creado en Blogger no tenemos más que acceder a la aplicación de Twitter creada a tal efecto.

Configuramos el número de entradas que queremos mostrar y el título que se mostrará y una vez que pinchemos en el botón de la parte izquierda nos redirigirá a nuestra cuenta de Blogger, desde la que tendremos que permitir la inclusión de la aplicación. Seleccionamos la posición en la que queremos que se muestre y una vez guardado, mostraremos nuestros últimos twitts en el blog.

Añadir botón Twitter en post de blogger

2010-09-24T11:37:00.000+02:00

i queremos facilitar la tarea de twittear nuestros enlaces a los usuarios que nos visitan no tenemos más que añadir el código del nuevo “botón de twittear” que nos proporciona el propio Twitter desde la página del proyecto.

Para añadir el botón a cada post de nuestro blog de Blogger debemos buscar en el código (con los artilugios expandidos) la siguiente cadena:

<div class='post-footer-line post-footer-line-1'>

E insertamos a continuación el código del botón, que para el formato pequeño sería:

<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='XandruCancelas' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

Usando CSS3

2010-09-17T12:37:00.000+02:00

on la reciente aparición de los primeros códigos en HTML5 han aparecido también los primeros en CSS3, y es que esta vez, ambas tecnologías van de la mano. Si antes era recomendable utilizarlas conjuntamente, ahora es casi obligado, ya que es el objetivo del desarrollo de dichas tecnologías.

Al igual que ocurre con HTML5, CSS3 incluye una serie de mejoras y nuevas funcionalidades que nos harán la vida más fácil a la hora de dar estilo a nuestras páginas. Alguna de estas mejoras las iremos viendo a continuación.

Para facilitar la tarea y no tener que escribir código HTML de nuevo, usaremos el que hemos creado en el mini tutoria de HTML5.

El código CSS es el siguiente:

/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}

/* Tell the browser to render HTML 5 elements as block */
header, footer, aside, nav, article {
display: block;
}

body {
margin: 0 auto;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}

h2 {
font-size: 28px;
line-height: 44px;
padding: 22px 0;
}

h3 {
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}

p {
padding-bottom: 22px;
}

nav {
position: absolute;
left: 0;
width: 100%;
background: url("nav_background");
}

nav ul li {
float: left;
}

nav ul li a {
display: block;
margin-right: 20px;
width: 140px;
font-size: 14px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #777;
}

nav ul li a:hover {
color: #fff;
}

nav ul li.selected a {
color: #fff;
}

nav ul li.subscribe a {
margin-left: 22px;
padding-left: 33px;
text-align: left;
background: url("rss.png") left center no-repeat;
}

Hasta aquí utilizamos las mismas propiedades que las que se utilizaban en CSS2. Las nuevas propiedades las mostramos a continuación:

#intro {
margin-top: 66px;
padding: 44px;
background: #467612 url("intro_background.png") repeat-x;
background-size: 100%;
border-radius: 22px;

/* Background-size not implemented yet */
-webkit-background-size: 100%;
-o-background-size: 100%;
-khtml-background-size: 100%;

/* Border-radius not implemented yet */
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
}

Para esta etiqueta podemos observar dos nuevas propiedades:

- background-size: que nos permite definir el fondo de tamaño dinámico y en caso de que el contenido o el tamaño de la página veríe, la imagen también lo hará, adaptandose a ésta.

- border-radius: redondea el borde con un radio igual al indicado.

La mayoría de los navegadores aún no soportan estas propiedades, por lo que especificamos a continuación de éstas las propiedades nativas de cada navegador que sustituyen a las especificadas por CCS3.

A la propiedad background le podemos indicar dos imágenes a utilizar (no estoy seguro si este aspecto ya se podía en CSS2, pero yo no lo conocía):

background: #467612 url("intro_background.png") top left (287px 100%) repeat-x,
url("intro_flower.png") top right (653px 100%) no-repeat;

Una nueva propiedad muy interesante es poder indicar que dentro de una etiqueta se va a mostrar una tabla, y definer las propiedades de la misma. En el siguiente código vemos un ejemplo:

.blogPost div {
column-count: 2;
column-gap: 22px;
}

.blogPost {
column-count: 2;
column-gap: 22px;
}

.blogPost header {
column-span: all;
}

En este caso indicamos que se van a mostrar dos columnas con una separación entre cada una de 22px;

Como CSS3 solo está soportado por algunas versiones de los navegadores, damos las propiedades propias de cada navegador para suplir esta carencia:

.blogPost div {
/* Column-count not implemented yet */
-moz-column-count: 2;
-webkit-column-count: 2;

/* Column-gap not implemented yet */
-moz-column-gap: 22px;
-webkit-column-gap: 22px;
}

Otra funcionalidad nueva es la de dar sombra a una etiqueta. En este caso, la vamos a dar a la imagen de la etiqueta blog:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

El primer atributo de la propiedad box-shadow indica en dónde queremos que pare la sombra en sentido horizontal, el segundo en sentido vertical, en el tercero indicamos cómo de transparente será la sombra y por último, indicamos el color base de la sombra.

De momento, esta propiedad solo funciona en Safari, por lo que indicamos las propiedades supletorias para el resto de navegadores:

.blogPost img {
margin: 22px 0;
-webkit-box-shadow: 3px 3px 7px #777;
}

La última propiedad que vamos a mostrar en este artículo es la de alternar el fondo los comentarios que se muestran, de forma que se muestren en forma de cebra los comentarios. Para ello, antes no nos quedaba más remedio que utilizar JavaScript, pero ahora con CSS3 será muy sencillo, simplemente utilizando la pseudo-clase “nth-child”:

section#comments article:nth-child(2n+1) {
padding: 21px;
background: #E3E3E3;
border: 1px solid #d7d7d7;

/* Border-radius not implemented yet */
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
}

El elemento 2n indica que se aplicará al segundo comentario, 3n al tercero, y así sucesivamente.

El +1 indica que se comienza a contar por el primer elemento.

Como los vectores comienzan por el elemento 0, esto indica que comenzará por el segundo del vector.

Con esto finalizamos nuestro pequeño tutorial de inciación a CSS3. A medida que vayamos descubriendo nuevas funcionalidades os las iremos mostrando. Mientras tanto.. a practicar un poco.

Recordad que podéis ver también nuestro tutorial de introducción a HTML5

Añadir Chat de Gmail a tu página web

2010-09-07T18:15:00.000+02:00

i estamos pensando en dar algun servicio de contacto a nuestros usuarios o simplemente nos queremos comunicar a través de nuestra página web, Google nos ofrece un Gadget muy facil de configurar, llamado Google Talk cahtback badges.

Para configurarlo, accedemos a la página del proyecto desde el navegador con nuestra cuenta de google activa y configuramos las opciones que nos ofrecen en la pestaña edit a nuestro gusto. Una vez finalizada la configuración, simplemente nos queda copiar el código que se muestra en la parte inferior de la página y añadirlo a nuestra página web.

Buscar archivos en Linux

2010-09-02T10:07:00.000+02:00

i no conocemos la ruta exacta de algún archivo que necesitamos modificar o conocer su ubicación, podemos usar el comando locate para ello. La sintaxis es muy sencilla:

Locate "archivo"

La sencillez del comando lo hace muy potente, por lo que… ya nunca volveréis a perder un archivo dentro de la estructura de directorios.

Primeros pasos HTML5 II

2010-09-01T12:27:00.000+02:00

n el primer artículo hemos creado la estructura básica de una página con HTML5. Ahora es el turno de añadiendo contenido. Veremos el nuevo código y a continuación comentaremos las novedades introducidas.

<!DOCTYPE HTML>

<html lang="es-es">

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="estilo.css">

<title>Page title</title>  

</head>  

<body>  

<header>  

<h1>Título de la página</h1>  

</header>  

<nav>  

<ul>  

<li><a href="#">Blog</a></li>  

<li><a href="#">About</a></li>  

<li><a href="#">Archivos</a></li>  

<li><a href="#">Contacto</a></li>  

<li class="subscribe"><a href="#">Subscribete via. RSS</a></li>  

</ul>  

</nav>  

<section id="intro">

<header>

<h2>Que te gusta hacer?</h2>

</header>

<p>Comentanos tus aficiones</p>

</section>

<section>

<article class="blogPost">

<header>

<h2>Título del post</h2>

<p>Publicado el <time datetime="2009-06-29T23:31:45+01:00">5 de Septiembre 2010</time> por <a href="#">Xandru Cancelasr</a> - <a href="#comments">3 commentarios</a></p>

</header>

<p>Seguiremos comentado..</p>

</article>

</section>

<video src="http://v17.lscache5.c.youtube.com/videoplayback?ip=0.0.0.0&sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0dXR1dSTl9FSkNNN19PTFJB&fexp=900161&itag=18&ipbits=0&sver=3&ratebypass=yes&expire=1282770000&key=yt1&signature=97D02D5AA98C223F22168D150E5E1F7049CEFA22.9812D05BCFDD36E77A2719183C4DE85080C1538A&id=b44f53795df29936" />

<form action="#" method="post">

<h3>Post a comment</h3>

<p>

<label for="name">Nombre</label>

<input name="name" id="name" type="text" required />

</p>

<p>

<label for="email">E-mail</label>

<input name="email" id="email" type="email" required />

</p>

<p>

<label for="website">Website</label>

<input name="website" id="website" type="url" />

</p>

<p>

<label for="comment">Comentario</label>

<textarea name="comment" id="comment" required></textarea>

</p>

<p><input type="submit" value="Post comment" /></p>

</form>

<aside>

<section>

<header>

<h3>Categorías</h3>

</header>

<ul>

<li><a href="#">HTML5</a></li>

<li><a href="#">CSS3</a></li>

</ul>

</section>

<section>

<header>

<h3>Archivos</h3>

</header>

<ul>

<li><a href="#">Agosto 2010</a></li>

<li><a href="#">Septiembre 2010</a></li>

</ul>

</section>

</aside>

<footer>

<div>

<section id="about">

<header>

<h3>About</h3>

</header>

<p>Conoce más <a href="#">sobre mí</a></p>



</section>

<section id="blogroll">

<header>

<h3>Blogroll</h3>

</header>

<ul>

<li><a href="#">Blogroll 1</a></li>

<li><a href="#">Blogroll 2</a></li>

</ul>

</section>

<section id="enlace">

<header>

<h3>Enlaces</h3>

</header>

<ul>

<li><a href="#">Enlace 1</a></li>

<li><a href="#">Enlace 2</a></li>

</ul>

</section>

</div>

</footer>

</body>  

</html>

- En la pimera sección (intro) vemos que se añade la etiqueta header para especificar un subtítulo.

- En la sección central se introduce una nueva etiqueta “article” que nos indica que se trata de un texto que puede ser utilizado y redistribuida como feed, por ejemplo.

- Time indica que se trata de un horario o fecha. Desglosaremos su formato:

o En primer lugar se muestra la fecha con formato yyyy-mm-dd

o La “T” indica que se va a usar hora local.

o A continuación la hora local en formato hh:mm:ss

o Por último indicamos la zona GTM en la que nos encontramos. En nuestro caso será Madrid GTM +2.

- En el formulario vemos que se añaden dos nuevos tipos de inputs: email y url. Si escribimos required como atributo, el campo será obligatorio para el usuario.

Aquí finalizamos nuestro mini tutorial introductorio a HTML5. En cuanto vayamos probando nuevas utilidades os iremos informando.

Si tienes dudas sobre si debes configurar Apache para soporta HTML5, consulta el siguiente artículo.

Configurar Apache para utilizar HTML5

2010-08-31T12:42:00.000+02:00

eguro que muchos os hacéis la pregunta de que se debe hacer para poder crear nuestras páginas con HTML5 y que el navegador las interprete correctamente.

La respuesta es que no tenemos que hacer nada porque es el navegador el que interpreta el lenguaje utilizado por lo que, crear vuestras páginas y subirlas a vuestro servidor sin miedo.

Primeros pasos HTML5

2010-08-30T10:17:00.000+02:00

n vista a que las principales compañías ya están usando esta tecnología para sus aplicaciones, nosotros no vamos a ser menos y nos disponemos a descubrir algunas de las novedades, y nada mejor que hacerlo con un ejemplo en el que crearemos nuestra primera página con HTML5.

Lo primero que debemos conocer son las diferentes etiquetas que podemos y debemos utilizar. Además de las ya conocidas <head> y <body> se incorporan algunas de mucha utilidad como <footer>, <nav> o <article>. Poco a poco iremos explicando todas y cada una de ellas.

Vamos a comenzar escribiendo algo de código:

<!DOCTYPE HTML>

<html lang="es-es">

<head>

<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="estilo.css">

<title>Page title</title>  

</head>  

<body>  

<header>  

<h1>Page title</h1>  

</header>  

<nav>  

<!-- Navigation -->  

</nav>  

<section id="intro">  

<!-- Introduction -->  

</section>  

<section>  

<!-- Main content area -->  

</section>  

<aside>  

<!-- Sidebar -->  

</aside>  

<footer>  

<!-- Footer -->  

</footer>  

</body>  

</html>

Comentaremos un poco la primera estructura:

- En HTML5 solo hay un DOCTYPE que es la primera línea de código que se ha de insertar.

- En la etiqueta HTML podemos indicar el lenguaje que utilizaremos.

- Dentro de <body> se han especificado nuevas etiquetas que nos indican la estructura interna de la página. Estas etiquetas son:

o <header> que indica que se trata de la cabecera de la página, incluyendo normalmente el título de la página o el logotipo y también es habitual que se incluyan los heading tags.

o <nav> indica que se trata de una lista de enlace importantes (en este caso un menú de navegación).

o <section> Divide la página en secciones.

o <aside> Se utiliza para indicar que se trata de una zona cuyo contenido esta relacionado con la página principal y puede tener sentido por si mismo. Se utiliza normalmente para sidebars, publicad o grupo de enlaces.

o <footer> donde se incluye el pie de la página.

Una vez comentada la estructura general, en la segunda parte del artículo iremos dando contenido a cada etiqueta para que se vaya pareciendo lo más posible a una página de verdad.

Puedes ver la segunda parte del tutorial.

Si tienes dudas sobre si debes configurar Apache para soporta HTML5, consulta el siguiente artículo.

Cerrado por vacaciones

2010-08-05T22:30:00.000+02:00

espués de un mes actualizando todo lo posible, me veo obligado a realizar una pequeña pausa, ya que todos necesitamos tomarnos un pequeño descando de vez en cuando.

Espero que me comprendáis y que vayáis repasando conceptos para a la vuelta hacer muchos comentarios.

Felices vacaciones a todos los que podáis disfrutarlas.

Trabajar con distintos User Agent

2010-07-28T10:23:00.000+02:00

on la expansión de las nuevas tecnologías y los nuevos dispostivos que son capaces de conectarse a Internet, cada vez son más los tipos diferentes de navegadores a través de los que se accede a Internet, y cada uno con sus propias características.

Cuando creamos una página web debemos tener en cuenta que los usuarios pueden acceder con cualquier navegador del mercado y desde cualquier dispositivo –incluso desde el movil- por lo que es más que recomendable adaptar la página para que se muestre correctamente independientemente del navegador y dispositvo utilizado para acceder a ella.

Para poder desarrollar una página web que se adapte a cualquier navegador, debemos comprobar que se adapta a todos ellos. Como sería inviable probar con todos y cada uno de los navegadores disponibles en el mercado, los desarrolladores de chrispederick.com han creado un add-ons para firefox que nos permite, desde el mismo navegador, simular el user agent de cualquier otro. Este complemento se llama User Agent Switcher.

Si quereis disponer de todos los User Agent disponibles podeis copiar el siguiente archivo xml e importarlo en el complemento que acabáis de instalar.

Apache no reconoce

2010-07-27T17:16:00.000+02:00

nte todo debemos aclarar que <?=$variable ¿> es lo mismo que hacer <?php echo $ variable; ?>.

Si nuestro Servidor no reconoce la forma corta, es porque la opción de “short tags” no se encuentra activada.

Si disponemos de control sobre el servidor Apache no tendremos más que habilitar la opción short_open_tag en el archivo php.ini, es decir, indicar la línea:

short_open_tag = On

Como vemos, para utilizar este formato debemos de tener la certeza de que se encuentra activado dicho modo en el servidor o tener control sobre él, por lo que es preferible utilizar siempre la forma larga, es decir:

<?=$variable ¿>

Separar palabras de un campo de texto por cierto carácter en php

2010-07-21T12:33:00.000+02:00

i necesitamos separar los caracteres de una variable por algún campo concreto podemos usar la función str_replace(). Vemos un ejemplo:

Tenemos la variable $titulo = “Título de la expresión” y queremos que las palabras finalmente se encuentren separadas por guiones, es decir, que $resultado = “Título-de-la-expresión”.

La expresión a utilizar sería:

$resultado = str_replace(" ","-",$titulo);

Comandos para manejar VIM

2010-06-30T09:56:00.000+02:00

i estamos utilizando Linux y queremos editar cualquier archivo desde el modo consola, podemos utilizar varios editores. En este caso vamos a aprender a manejar el VIM, ya que es de los más potentes de los que dispone el S.O.

Lo primero que debemos saber es que dispone de dos modos de uso:

• Cuando editamos un fichero se abre el editor en modo normal desde el que podemos introducir atajos para realizar operaciones. Es un modo de visualización del contenido y no de edición, es decir, no nos permite realizar modificaciones.

• Para comenzar a editar, y por tanto entrar al modo de edición, debemos teclear la secuencia i o pulsar la tecla insert.

Una vez que nos encontramos en modo editor podemos comprobar que nos muestra las palabras/caracteres en diferentes colores. Esto se debe a que detecta automáticamente, por el tipo de contenido, el lenguaje en que está escrito el archivo.

En caso de que nuestro vim no disponga de esta faceta, puede que se daba a que se encuentra instalada una versión básica del editor. Esto se soluciona instalando la versión completa, con el comando:

Aptitude install vim-common

y escribiendo en el modo normal del vim :syntax on

En este punto es interesante que conocer alguno de los comandos más utilizados:

• Opciones de texto (modo normal)

o May+v == Seleccionar texto

o dd == Eliminar la línea actual

o u == Deshacer el último cambio

o CRTL+R == Rehacer el último cambio

o guu == Convertir a minúsculas la línea actual

o gUU == Convertir a mayúsculas la línea actual

o gg == Posicionarse al inicio del fichero

o G == Posicionarse al final del fichero

o :num == colocarse en la línea num

o ga == Muestra el código ASCII, hexadecimal y octal del carácter actual

• Guardar y salir (modo normal)

o :q == Salir del editor sin guardar

o :q! == Salir del editor sin guardar ni pedir confirmación

o :wq == Guardar y Salir del editor

o :w fich.txt == Guarda en un fichero llamado fich.txt

o :e fich.txt == Cierra el fichero actual y abre el fich.txt

• Comandos útiles (modo normal)

o x == borrar caracter

o :%s/texto_1/texto_2/ == sustituir texto

o /texto_a_buscar/ == Buscar texto (si pulsamos “n” buscara la siguiente coincidencia)

• Preferencias por defecto (modo normal)

o :set ts=num == fijar tabulados en num espacios

o :set sw=num == fijar indexados en num espacios

o :set number/nonumber == numerado de ficheros

o :set backup/nobackup == Copia de seguridad automática

o :set directory=dir == Carpeta de las copias

o :syntax on/off == Resaltado de sintaxis

o :color {evening/darkblue/desert/elflord/ koehler/morning} == Cambiar color

o :set cindent == Indentado automático

o :set mouse=a/mouse= == Uso del ratón

o :set paste/nopaste == Modo pegar texto

o :spell == Corrector ortográfico

o :setlocal spell spelllang=es == Cambiar idioma

o :set spellfile=~/.vimdic == Diccionario de palabras desconocidas

• Más comandos

o :!comando == Ejecutar un comando

o :shell == Pausar la edición (para volver al editor escribir exit)

o :set number == Muestra las líneas numeradas

Seguro que muchos de vosotros conocéis más comandos, por lo que os animo a que compartáis vuestros conocimientos con todos nosotros.

Configuración de seguridad de SSH en servidor Apache con Ubuntu

2010-06-28T22:18:00.000+02:00

i queremos incrementar la seguridad del el servicio SSH de nuestra máquina, que viene configurado por defecto, lo que haremos es modificar algunas opciones para darle más seguridad en el archivo /etc/ssh/sshd_config, aunque antes de modificarlo, haremos una copia de seguridad del mismo para poder restablecerlo, en caso de que hayamos modificado algo que no debíamos, mediante las siguientes líneas de código:

sudo cp /etc/ssh/sshd_config /etc/ssh/sshd_config.original
sudo chmod a‐w /etc/ssh/sshd_config.original

Una vez copiado a un nuevo archivo y protegido contra escritura para no poder modificarlo, procedemos a su modificación:

1. El puerto asignado al servicio (22) lo cambiamos por el 5301. Para ello buscamos la línea “Port 22” y en su lugar escribimos “Port 5301”.

2. Establecemos el número máximos de intentos fallidos de conexión a 1. Si no la tenemos aún, añadimos la línea “MaxAuthTries 1”.

3. Indicamos que el número máximo de conexiones concurrentes no autenticadas sean 2 mediante la siguiente línea “MaxStartups 2”.

4. Establecemos la dirección de escucha con nuestra IP Privada: “ListenAdrress 192.168.2.100 (IP maquina)”.

5. Indicamos qué usuarios pueden conectarse y desde qué IP: “AllowUsers usuario@192.168.0.11”

6. También debemos tener en cuenta que probablemente, al ser administradores, necesitaremos conectarnos desde cualquier máquina independientemente de si se encuentra en nuestra red o no, por lo que debemos añadir algún usuario para dicho propósito: ”AllowUsers usuario usuario2 usuario3”.

7. Por último, deshabilitamos la opción de conectarnos como root, para evitar intentos de intrusión externos, editando la línea “PermitRootLogin no”.

Si queremos completar aún más la seguridad, podemos configurar los permiso de los host que se intenten conectar al servicio. Para ello debemos realizar las siguientes modificaciones:

1. En el archivo /etc/host.deny añadimos la siguiente línea: “ALL: ALL”.

2. Editamos el archivo /etc/host.allow y añadimos los host a los que permitimos el acceso. En este caso solo lo haremos a un único ordenador. “sshd: 192.168.0.104 (IP portatil)”.

Una vez guardados los cambios, debemos reiniciar el servicio para que tengan efecto:

sudo /etc/init.d/ssh restart

Problema con .htaccess en Apache con Ubuntu

2010-06-21T09:53:00.000+02:00

ebemos tener en cuenta que con la configuración por defecto del servidor, no reconocerá el archivo .htaccess. Para solventar este problema debemos modificar una directiva en el archivo de configuración de apache, concretamente en /etc/apache2/sites-available/default, en el que modificaremos dentro de la directiva de nuestro directorio de trabajo la linea

AllowOverride None

Por la línea

AllowOverride All

Una vez realizado el cambio reiniciamos el servicio y tendremos resuelto el problema.

Un ejemplo de esa configuración es la siguiente:

<Directory /home/usuario/httpd>

AllowOverride All

Order Deny,Allow

Allow from all

</Directory>

Si queréis saber cómo configurar el archivo .htaccess podéis consultar el siguiente artículo.

Insertar estadísticas en página web (google analytics API)

2010-06-16T11:32:00.000+02:00

i disponemos de un portal de gestión y queremos mostrar una página de estadísticas de las visitas que recibimos o simplemente las queremos tener en una página web, podemos usar la API de Google Analytics que nos facilitará enormemente este trabajo.

Para ello, lo primero que tenemos que hacer es descargarnos la API de Analytics desde la página de askaboutphp

Una vez disponemos del fichero lo copiamos a nuestro directorio de trabajo, siendo más que recomendable copiarlo en el directorio en el cual tenemos todas las clases. Debemos modificar algunos parámetros de la clase propios, como puede ser el nombre de usuario, la password, etc. También podemos modificar dicha clase para adaptarla a nuestras necesidades. Nuestra recomendación es crer nua función que obtenga automáticamentes nuestro usuario y password de algún fichero o base de datos para no tener que incluirlo en ningún otro archivo.

El siguiente paso es obtener los datos que queremos. Para ello, debemos crear una página que consulte, mediante la API, los datos estadísticos y los devuelva. Debemos llamar al objeto de la clase e indicar cual es el identificador de nuestra cuenta con los siguientes parámetros:

// create an instance of the GoogleAnalytics class using your own Google {email} and {password}
$ga = new GoogleAnalytics(parámtros del constructor);
// set the Google Analytics profile you want to access - format is 'ga:123456';
$ga->setProfile('ga:xxxxxxxx');

Para obtener el Google Analytics profile debemos acceder al panel de gestión de nuestras cuentas de analytics (lógicamente debemos tener una creada) y en la pantalla en la que se muestran los informes podemos ver que al final de la URL se encuentran unos números, que serán los que debemos añadir como atributo de la función.

En nuestro caso utilizaremos unas gráficas para mostrar los resultados. Si quereis utilizar dichas gráficas podéis mirar como se hace en el siguiente post.

Un ejemplo para obtener el número de visitas diarias durante los diez últimos días a nuestro sitio es:

$ga = new GoogleAnalytics("google.conf");
// set the Google Analytics profile you want to access - format is 'ga:123456';
$ga->setProfile('ga:xxxxxxxx);
// set the date range we want for the report - format is YYYY-MM-DD
echo $fecha = time();
$ga->setDateRange(date("Y-m-d",$fecha-(9*24*60*60)),date("Y-m-d",$fecha));
$report = $ga->getReport(
array('dimensions'=>urlencode('ga:date'),
'metrics'=>urlencode('ga:visits'),
  'sort'=>'-ga:date'
)
);
foreach($report as $key => $valor){
 foreach($valor as $k => $v){
  print $v.";";
 }
}

Si quereis información completa a cerca de todas las opciones que nos brinda esta API podéis consultar esta categoría de la documentación de Google code.

Archivo de configuración de Apache .htaccess

2010-06-15T10:08:00.000+02:00

s el archivo de configuración de directorios de Apache. Es el primer archivo que carga el servidor al acceder a una página y permite personalizar la configuración de las directivas del fichero principal de configuración del Apache, siempre y cuando el usuario tenga los permisos apropiados.

En este caso mostraremos la configuración estandar de un archivo .htaccess, aunque las posibilidades de configuración son muchas, pudiendo modificar la mayoría de las directivas del servidor.

//Indicamos que en caso de disponer de vaias versiones de PHP se utilice la versión 5
SetEnv PHP_VER 5

//Personalizamos la página de error 404, haciendo referencia a una creada por nosotros
ErrorDocument 404 /404.php

//Evitamos que se liste el contenido de los directorios
Options All –Indexes

//Impedimos que se muestren los archivos de imagen
IndexIgnore *.gif *.jpg *.ico

//Solo permitimos el acceso a un archivo desde localhost
<Files "directorio/archivo.php">
Order Deny,Allow
Deny from all
Allow from localhost
</Files>

Si queremos saber más sobre este archivo podemos consultar en la documentación de Apache.

Si tienes problemas con el archivo y tu servidor Apache no lo reconoce, consulta el siguiente artículo.

Mostrar fecha y hora en español con Php

2010-05-31T15:48:00.000+02:00

ara mostrar la fecha con el formato: Día de la semana, día, mes del año, año podemos utilizar la siguiente función:

<?php

setlocale(LC_TIME, 'spanish');

print "<strong style='color: blue;'>".strftime("   %A %#d de %B del %Y")."";

?>

Para mostrar la hora el formato AM/PM:

<?php

print "<strong style='color: red;'>  ".date("h:i:s. A")." ";

?>

Hacer copia de seguridad en Android

2010-05-25T09:54:00.000+02:00

i vamos a cacharrear con nuestro teléfono, bien sea para instalarle una nueva ROM o porque queremos hacer algún cambio importante en la configuración es recomendable que realicemos una copia de seguridad de nuestros archivos. Para ello tenemos dos opciones:

* Si solo queremos guardar nuestros archivos personales como SMS, MMS, imágenes o videos podemos usar el programa G-Backup que nos permite exportar todos estos archivos a nuestra cuenta de GMail.

Nota: si vamos a realizar varias copias en distintos momentos, se han de eliminar las etiquetas creadas en Gmail para poder almacenar las nuevas, ya que sino no guardará los cambios.

* Si queremos hacer una copia del sistema completo podemos descargarnos uno de los programas de backup disponibles en el Market o si tenemos nuestro teléfono rooteado, podemos hacerlo desde el modo Recovery con la herramienta Nandroid. Si queréis saber como rootear vuestro Magic podéis consultar el siguiente artículo.

La mejor opción es la última que se plantea, hacer un Nandroid, por lo que no si tenies rooteado el teléfono, no dudéis en hacerlo.

Capturar pantalla de Android con el PC

2010-05-18T16:12:00.000+02:00

ara realizar capturas de pantalla de Android desde el PC simplemente tenemos que seguir los siguientes pasos:

* Lo primero que debemos hacer es conectar el teléfono con el ordenador:

1. Para ello debemos descargar el SDK de Android. Necesitamos el driver USB y las SDK Tools. Desde "SDK Setup.exe" podemos instalar esos dos componentes que aparecerán en la misma carpeta del instalador. Desde este enlace se pueden descargar los drivers por si fallan o no disponeis de ellos. Descomprimimos los archivos en el directorio principal (C:\) para poder movernos fácilmente después.

2. Ponemos el teléfono en modo Depuración USB, dentro de Ajustes -> Aplicaciones -> Desarrollo.

3. Conectamos el teléfono, lo detectará y si nos pide el driver asignamos manualmente la ubicación del directorio del driver.

4. Hacemos click derecho sobre Mi PC (o Equipo) -> Propiedades -> Hardware y vamos al Administrador de dispositivos.

5. Comprobamios que se haya configurado correctamente el dispositivo. Para ello debemos ver un nuevo grupo de dispositivos: "ADB Interface" con un "HTC Dream Composite ADB Interface".

Si no aparece este grupo debemos realizar los siguientes pasos:

a. No debemos intentar actualizar el driver que sale bajo unidades de disco, sino "Dispositivo de almacenamiento USB" dentro de "Controladoras de bus de serie universal", botón derecho -> actualizar software del controlador.

b. Seleccionamos la ubicación del driver en nuestra carpeta del SDK, todo manualmente.

Ahora debería aparecer un nuevo grupo de dispositivos: "ADB Interface" con un "HTC Dream Composite ADB Interface".

* Ejecutar el programa ddms que se encuentra en la carpeta Tools. Veremos tres pantallas. La de la izquierda muestra nuestro terminal, en la derecha información acerca del teléfono y en la inferior se muestran los procesos ocurridos en él.

* Para capturar la pantalla, en el menú seleccionamos Device -> Screen capture y desde ahí manejamos las capturas.
Con esta aplicación podemos explotar nuestro teléfono, pero de momento eso se lo vamos a dejar a los expertos.

Programa online para optimizar imágenes

2010-05-14T22:51:00.000+02:00

n uno de los artículos anteriores habíamos indicado algunos consejos para optimizar las imágenes para subirlas a nuestra página web.

Ahora es el turno de mostraros una página que os puede ahorrar mucho tiempo y a la que podeis recurrir en cualquier momento.

Esta página es: http://www.sitereportcard.com/imagereducer.php

En la que simplemente con introducir la dirección de la URL donde se encuentra la imagen o buscar el archivo entre los directorios de nuestro ordenador y subirlo nos muestra varias opciones de optimización. Los resultados están en orden ascendiente de optimización. Dependiendo del tipo de imagen (solo permite JPG,GIF y PNG) el resultado de la optimización será más o menos adecuada.

Seguro que esta aplicación os será muy útil a la hora de confeccionar vuestras páginas web.

También te puede interesar:

Optimizar imágenes para página web

Deshabilitar funciones de ratón en página web

2010-05-12T16:41:00.000+02:00

ara impedir que se pueda utilizar el ratón en nuestra página (debemos tener claras las consecuencias que ello conlleva) no tenemos más que incluir el siguiente código JavaScript en la cabecera código:

<script language="JavaScript"> 

document.onmousedown = function(){

if (event.button==2) { 

alert('RatónDeshabilitado'); 

} 

</script>

También te puede interesar:

Deshabilitar funciones botón derecho en una página web
Deshabilitar funciones del teclado en una página web

Optimizar imágenes para página web

2010-05-11T13:35:00.000+02:00

stá claro que una página web diseñada con imágenes atractivas es más llamativa y amigable para el usuario, pero debemos tener cuidado a la hora de utilizar imágenes ya que si el conjunto de éstas es muy pesado puede que ralentice la carga de la página, que además de ser un inconveniente para el usuario, también va a perjudicar nuestro posicionamiento en los buscadores.

Imagen sin optimizar:

Imagen optimizada:

Para optimizar una imagen para utilizarla en nuestras páginas web podemos seguir los siguientes consejos:

1. Utilizar una resolución de 72px por pulgada. Esta resolución es la común en la mayoría de los monitores, por lo que para el usuario es la máxima resolución que puede obtener.

2. Utilizar el estándar RGB. Éste es el estándar que utilizan los monitores. Es más económico (en cuestión de tamaño) que otros como CMYK por lo que es el recomendado.

3. Para las fotografías debemos usar JPEG. Este formato elimina información invisible para el ojo humano, reduciendo así su tamaño. Para el resto de imágenes, el forma más usual es GIF.

4. Para los logos y figuras con poca cantidad de colores utilizar PNG-8. Este formato nos proporciona una buena calidad para este tipo de imágenes y nos permite ahorrar algunos kb.

5. Utilizar los tamaños de imagen exactos. Es decir, si vamos a introducir en nuestra página una imagen en un recuadro de 100x100 nuestra imagen ha de tener dicho tamaño, ya que si utilizamos una imagen mayor y la reducimos mediante las propiedades width y height –además de no cumplir los estándares del W3C- estaremos desaprovechando unos kb muy valiosos.

Con estos pequeños consejos conseguiremos reducir el tamaño de nuestras imágenes y propiciar que la página cargue más rápido.

Deshabilitar funciones teclado en una página web

2010-05-05T11:09:00.000+02:00

ara impedir que se pueda utilizar el teclado en nuestra página –incluidas la opción de copiar un texto- no tenemos más que incluir el siguiente código JavaScript en la cabecera código:

<script language="JavaScript"> 

document.onkeydown = function(){

alert('Teclado Desabilitado'); 

} 

</script>

También te puede interesar:

Deshabilitar funciones botón derecho en una página web
Deshabilitar funciones de ratón en una página web

Deshabilitar funciones botón derecho en una página web

2010-05-04T17:02:00.001+02:00

ara deshabilitar las funciones de botón derecho solo tenemos que añadir en la cabecera el siguiente código JavaScript:

<script language="Javascript"> 

document.oncontextmenu = function(){return false} 

</script>

También te puede interesar:

Deshabilitar funciones teclado en una página web
Deshabilitar funciones de ratón en una página web

Ordención de arrays en PHP

2010-05-03T16:24:00.000+02:00

HP nos proporciona una serie de funciones que realizan la ordenación de arrays de forma automática. Debemos tener en cuenta que los arrays no son solo unidimensionales, sino que también pueden ser bidimensionales (matrices) o ser matriz de matrices.

Aquí se indican las funciones más importantes:

sort()

Descripción: Ordena el array en función de sus valores
Orden: Menor a mayor
Función inversa: rsort()
Ejemplo:

$var = array(‘1’,’4’,’3’,’2’)  
sort($var)
foreach ($var as $key => $valor) { 
    echo ‘ [‘ . $key . ‘] = ‘ . $valor . ‘<br/>’; 
}   
var[0] = 1
var[1] = 2
var[2] = 3
var[3] = 4

ksort()

Descripción: Ordena el array en función de sus claves
Orden: Menor a mayor
Función inversa: krsort()
Ejemplo:

$var = array(‘1’=>’a’,’4’ =>’b’,’3’ =>’c’,’2’ =>’d’)  
sort($var)
foreach ($var as $key => $valor) { 
    echo ‘ [‘ . $key . ‘] = ‘ . $valor . ‘<br/>’; 
}   
1 = a
2 = d
3 = c 
4 = b

asort()

Descripción: Ordena el array en función de sus valores manteniendo la relación entre clave y valor
Orden: Menor a mayor
Función inversa: arsort()
Ejemplo:

$var = array(‘1’=>’a’,’4’ =>’b’,’3’ =>’c’,’2’ =>’d’)  
sort($var)
foreach ($var as $key => $valor) { 
    echo ‘ [‘ . $key . ‘] = ‘ . $valor . ‘<br/>’; 
}   
1 = a
4 = b
3 = c 
2 = d

natsort()

Descripción: Ordena el array en función de sus valores, tal como lo haría una persona
Orden: Menor a mayor
Ejemplo:

$var = array(‘1’=>’a22’,’4’ =>’a2’,’3’ =>’a1’,’2’ =>’a11’)  
sort($var)
foreach ($var as $key => $valor) { 
    echo ‘ [‘ . $key . ‘] = ‘ . $valor . ‘<br/>’; 
}   
3 = a1
4 = a2
2 = a11
1 = a22

Propiedad CSS para elementos input

2010-04-27T12:52:00.000+02:00

omo bien sabremos a estas alturas, css en muy potente y la mejor opción para especificar las propiedades de diseño de los elementos de nuestras páginas. En este caso vamos a especificar como se utilizan las propiedades para los elementos input

Si queremos modificar todos los input (<input type="radio” />):

input {
 /*propiedades*/
}

Si queremos modificar un input (<input type="radio" class="radio" />) en el que le hemos indicado una clase:

input.clase {
 /*propiedades*/
}

Si queremos modificar todos los input de un tipo determinado (<input type="radio" />):

input[type="radio"]{
 /*propiedades*/
}

Mostrar Url remoto en PHP

2010-04-23T12:09:00.000+02:00

Si necesitamos obtener información de otra página web, por ejemplo, para obtener una URL acortada e introducirla en nuestra página sin necesidad de recargarla, tenemos varias opciones:

1. Usar una de las funciones que nos proporciona PHP:

file_get_contents
$page = file_get_contents('http://www.example.com');
echo $page;

2. Tratar el resultado proporcionado por la URL como un fichero:

$file = fopen ( "http://www.example.com" , "r" );
if (! $file ) {
    echo "

Unable to open remote file.n" ; } else{ $text=fpassthru($file); echo $text; } fclose ( $file );

3. Usar un método de Curl:

$c = curl_init('http://www.example.com');
curl_setopt($c, CURLOPT_RETURNTRANSFER, true);
$page = curl_exec($c);
curl_close($c);
echo $page;

Hay que tener en cuenta que para usar el tercer método debemos tener correctamente instalado Curl. Si tiene problemas con él puede consultar Problema al iniciar Curl: “Fatal error: Call to undefined function curl_init()”.

La recomendación es usar estos métodos por orden, es decir, probar con el primero. Si éste le diese error, pasar a usar el segundo y si éste tampoco resulta probar con el tercero.

To spam or not to spam

2010-04-22T10:49:00.000+02:00

No me había planteado indagar en este tema tan polémico pero, a raíz de un comentario que hicieron en una de las entradas de nuestro blog, creo que es necesario aclarar nuestra inequívoca postura contra el span y demás fraudes digitales.

Este era el comentario que habían hecho en el post “Configuración de archivo de Logs para IpTables”:

hola
Antes de nada, perdona que te escriba esto como un comentario, pero es que no vi tu email en el tu blog

Soy el webmaster de publizida.es

Publizida BLOG'S es un ranking / directorio de clasificación de blogs en español, creado con el único propósito de dar a conocer los mejores blog's

Registrando su blog en Publizida BLOG'S accederás al servicio de estadísticas gratuitas y podrás participar en el TOP.RANKING

También puedes acceder a la valoración que los usuarios hacen de su página.

Y lo mas importante...

darte a conocer y aumentar el numero de visitantes a tu BLOG de manera totalmente gratuita.

Si te interesa puedes darte de alta

ALTA DIRECTORIO DE BLOGS

o visitanos en ......

DIRECTORIO DE BLOGS

HTTP://PUBLIZIDA.ES

Muchas Gracias por tu tiempo... y disculpa si no fue la mejor manera de darme a conocer.

Un saludo.

DAVID T.

Webmaster de Publizida.es

Como podéis comprobar se realiza un comentario, para mí, totalmente fuera de contexto, publicitando un sitio web que en absoluto tiene nada que ver con el tema tratado, por lo que lo considero claramente como un spam. En el blog existe una referencia a mi página personal en la cual se encuentra visible un correo de contacto, por lo que si alguien necesita ponerse en contacto conmigo, esta es la forma adecuada.

Espero que esta simple reflexión les preocupe a tanta gente como a mí y evitemos que esta gran red, que ha conseguido en tan poco tiempo tener repercusiones tan importantes condene este tipo de actos y que aquellos que simplemente nos queremos expresar sin mayor ánimo que compartir nuestros escasos conocimientos lo podamos hacer sin que personas/empresas con otros intereses interfieran en ello.

Problema al iniciar Curl: “Fatal error: Call to undefined function curl_init()”

2010-04-21T10:01:00.000+02:00

uando el sistema nos devuelve este error es porque detecta que no tenemos habilitado el servicio “curl” en nuestro servidor.

- En Windows, debemos modificar el fichero php.ini y descomentar la línea:

extension=php_curl.dll

Reiniciamos el servidor y el servicio ya estará disponible.

También debemos comprobar que los archivos SSLEAY32.PHP y libEAY32.dll se encuentran en la carpeta del php.

- Si utilizamos un Linux Server puede que no tengamos instalado el servicio curl, por lo que lo debemos instalar con el siguiente comando:

apt-get install curl libcurl3 libcurl3-dev php5-curl

Configuración de archivo de Logs para IpTables

2010-04-16T08:57:00.000+02:00

pTables se usa para configurar, mantener e inspeccionar las tablas de reglas de filtrado de IPs en el kernel de Linux, pero por defecto, su sistema de logs no es todo lo completo esperamos.

Por defecto, la mayoría de los logs del sistema se guardan en el fichero /var/log/messages pero en este caso vamos a configurar un nuevo fichero para que almacene únicamente los logs que generaremos con algunas reglas en IpTables, creando así su propio archivo de bitácora.

Lo primero que debemos hacer es configurar el archivo /etc/syslog.conf, que se trata de un archivo de configuración en el que se indica el modo en que los mensajes del sistema son bitacorizados a través de la utilidad syslogd que se instala y configura por defecto en todos los sistemas GNU/Linux. Debemos añadir al final del fichero la siguiente sentencia:
kern.warning /var/log/iptables.log

Con esto indicamos que se almacenen los mensajes provienen del kernel con prioridad 4 o superior ('warning' es el nivel de prioridad 4) en el archivo /var/log/iptables.log y se ignora el resto de prioridad inferior (debug, info y notice que son del 3 hacía abajo) generalmente irrelevantes.

Guardamos el fichero y reiniciamos el servicio:


/etc/init.d/sysklogd restart para Debian / Ubuntu
/etc/init.d/syslog restart para Red Hat/Cent OS/Fedora Core

Debemos añadir que los mensajes del sistema también seguirán guardándose en /var/log/messages y en otros ficheros que se encuentren definidos en /etc/syslog.conf.

Por último solo nos queda añadir las reglas al firewall Iptables que monitorizarán los mensajes de error. Estas reglas se han de añadir justo antes de cortar un tráfico determinado. Un ejemplo del fichero de configuración de IpTables con las reglas de log añadidas (basado en el artículo de creación de firewall con IpTables) es el siguiente:


## Vaciamos las reglas
iptables -F
iptables -X
iptables -t nat -F

## Establecemos politicas predeterminada
iptables -P INPUT ACCEPT
iptables -P OUTPUT ACCEPT
iptables -P FORWARD ACCEPT
iptables -t nat -P PREROUTING ACCEPT
iptables -t nat -P POSTROUTING ACCEPT

# Aceptamos todo de localhost 
/sbin/iptables -A INPUT -i lo -j ACCEPT

# A nuestra IP le dejamos todo
iptables -A INPUT -s 192.168.2.1 -j ACCEPT

# A otra ip interna le permitimos todo
iptables -A INPUT -s 192.168.2.99 -j ACCEPT
iptables -A INPUT -s 192.168.2.100 -j ACCEPT 

# A una subred interna le permitimos todo
iptables -A INPUT -s 192.168.1.0/24 -j ACCEPT
# O a un rango de una subred
iptables -I INPUT -m iprange --src-range 192.168.1.2-192.168.1.100 -j ACCEPT

# Permitimos una conexion a ssh y telnet (22 y 23) desde un equipo
iptables -A INPUT -s 192.168.2.10 -p tcp --dport 22:23 -j ACCEPT

# A otro le permitimos acceso FTP
iptables -A INPUT -s 212.176.121.111 -p tcp --dport 20:21 -j ACCEPT

# El puerto 80 y 8080 (www) abierto, para un servidor web.
iptables -A INPUT -p tcp --dport 80 -j ACCEPT
iptables -A INPUT -p tcp --dport 8080 -j ACCEPT

# Y el resto, lo cerramos
# Inidcamos que se almacenen los accesos a los puertos que vamos a cerrar
iptables -A INPUT -p tcp -m tcp --dport 22:23 -j LOG --log-prefix 'INTENTO DE ACCESO A SSH ' --log-level 4
iptables -A INPUT -p tcp -m tcp --dport 20:21 -j LOG --log-prefix 'INTENTO DE ACCESO A FTP ' --log-level 4
iptables -A INPUT -p tcp -m tcp --dport 6001 -j LOG --log-prefix 'INTENTO DE ACCESO A 6001 ' --log-level 4

iptables -A INPUT -p tcp --dport 20:21 -j DROP
iptables -A INPUT -p tcp --dport 22:23 -j DROP
iptables -A INPUT -p tcp --dport 6001 -j DROP

# Cerramos rango de los puertos privilegiados. Cuidado con este tipo de 
# barreras, antes hay que abrir a los que si tienen acceso.
iptables -A INPUT -p tcp --dport 1:1024 -j DROP
iptables -A INPUT -p udp --dport 1:1024 -j DROP

# impedimos iniciar conexion los puertos altos
# (puede que ftp no funcione)
iptables -A INPUT -p tcp --syn --dport 1025:65535 -j DROP

# Cerramos otros puertos que estan abiertos
iptables -A INPUT -p tcp --dport 3306 -j DROP
iptables -A INPUT -p tcp --dport 10000 -j DROP

Reiniciamos el servicio IpTables y a partir de ahora podremos consultar los mensajes del log de IpTables en el fichero /var/log/iptables.log.

También te puede interesar:

Crear firewall con Iptables en Linux
Problema al iniciar IpTables: “no chain/target/match by that name”

Ranking Navegadores Febrero 2010

2010-04-06T23:45:00.000+02:00

egún datos obtenidos de la página de DesarrolloWeb, el Ranking de navegadores en todo el mundo es el siguiente:

1. Microsoft Internet Explorer: 61.58%
2. Firefox: 24.23%
3. Chrome: 5.61%
4. Safari: 4.45%
5. Opera: 2.35%

Como vemos, esto muestra una clarísima superioridad de IE respecto al resto de navegadores y comparándolo con el mes anterior, un incremento en el uso de Chrome, por lo que Firefox se mantiene con una cuota uso de uno de cada cuatro usuarios de Internet.

Si miramos los datos en España, la cosa no varía demasiado, obteniendo los siguientes resultados:

1. Microsoft Internet Explorer: 57%
2. Firefox: 30.84%
3. Chrome: 2.865%
4. Safari: 7.54%
5. Opera: 1.06%

Seguro que muchos de vosotros, usuarios asiduos de Firefox pensáis que al igual que vosotros, habrá mucha gente que utiliza este navegador. Pues… que sepáis que no os confundís, ya que si comprobamos los navegadores desde los que se acceden a XandruSoft.blogspot.com podemos ver a simple vista que sois la mayoría.

Como se puede observar en el grafico, Firefox obtiene más de un 50% de cuota, lo que permite concluir que es el navegador por excelencia utilizado para desarrollo web, IE obtiene poco más de un 20% y la gran sorpresa es que crome casi llega al 15%.

Vemos que estas estadísticas no tienen nada que ver con las globales y es que, seguro que muchos desarrolladores que trabajan sobre Windows el primer y único uso del IE es para descargarse el Firefox.

Espero que, aunque este apunte no tiene mucho que ver con desarrollo web, os dé un poco de pensar.

Problema al iniciar IpTables: “no chain/target/match by that name”

2010-03-31T22:13:00.000+02:00

i hemos configurado IpTables para Ubuntu o cualquier otro Linux y al intentar iniciar o reiniciar IpTables nos dé un error con la descripción “no chain/target/match by that name” no nos debemos volver locos pensando que tenemos mal instalado el programa o que se trata de un error imposible de encontrar.

Simplemente nos está indicando que alguna de las reglas no está bien escrita. Un error muy común suele ser confundirse al escribir IMPUT en vez de INPUT. Debemos revisar de nuevo todas las reglas del archivo IpTables, prestando especial atención a los INPUT y el problema quedará resuelto.

También os puede interesar:

Crear firewall con Iptables en Linux
Configuración de archivo para Logs de IpTables

Crear firewall con IpTables en Linux (Ubuntu Server)

2010-03-31T22:00:00.000+02:00

i no disponemos de un hardware firewall pero queremos montar uno para proteger nuestro ordenador o servidor, podemos usar un software que nos proporciona Linux y es bastante potente llamado IpTables.

Para usar IpTables en Ubuntu debemos de crear un fichero dentro del directorio /etc/init.d/ al que podemos dar cualquier nombre, aunque os recomiendo poner algo descriptivo como “iptables.cf”. Dentro de este archivo tendremos todas las reglas que queremos aplicar darle una protección extra a nuestro Ubuntu.

Un ejemplo de un fichero de configuración de IpTables es el siguiente:


## Vaciamos las reglas
iptables -F
iptables -X
iptables -t nat -F

## Establecemos politicas predeterminada
iptables -P INPUT ACCEPT
iptables -P OUTPUT ACCEPT
iptables -P FORWARD ACCEPT
iptables -t nat -P PREROUTING ACCEPT
iptables -t nat -P POSTROUTING ACCEPT

# Aceptamos todo de localhost 
/sbin/iptables -A INPUT -i lo -j ACCEPT

# A nuestra IP le dejamos todo
iptables -A INPUT -s 192.168.2.1 -j ACCEPT

# A otra ip interna le permitimos todo
iptables -A INPUT -s 192.168.2.99 -j ACCEPT
iptables -A INPUT -s 192.168.2.100 -j ACCEPT 

# Permitimos una conexion a ssh y telnet (22 y 23) desde un equipo
iptables -A INPUT -s 192.168.2.10 -p tcp --dport 22:23 -j ACCEPT

# A otro le permitimos acceso FTP
iptables -A INPUT -s 212.176.121.111 -p tcp --dport 20:21 -j ACCEPT

# El puerto 80 y 8080 (www) abierto, para un servidor web.
iptables -A INPUT -p tcp --dport 80 -j ACCEPT
iptables -A INPUT -p tcp --dport 8080 -j ACCEPT

# Y el resto, lo cerramos
iptables -A INPUT -p tcp --dport 20:21 -j DROP
iptables -A INPUT -p tcp --dport 22:23 -j DROP
iptables -A INPUT -p tcp --dport 6001 -j DROP

# Cerramos rango de los puertos privilegiados. Cuidado con este tipo de 
# barreras, antes hay que abrir a los que si tienen acceso.
iptables -A INPUT -p tcp --dport 1:1024 -j DROP
iptables -A INPUT -p udp --dport 1:1024 -j DROP

# impedimos iniciar conexion los puertos altos
# (puede que ftp no funcione)
iptables -A INPUT -p tcp --syn --dport 1025:65535 -j DROP

# Cerramos otros puertos que estan abiertos
iptables -A INPUT -p tcp --dport 3306 -j DROP
iptables -A INPUT -p tcp --dport 10000 -j DROP

Para arrancar el servicio no tenernos más que hacer

/ect/init.d/iptables.cf start

Si lo queremos parar

/ect/init.d/iptables.cf stop

Y si lo queremos reiniciar

/ect/init.d/iptables.cf restart

Podemos comprobar las reglas que se han aplicado con el comando

iptables -L

También os puede interesar:

Problema al iniciar IpTables: “no chain/target/match by that name”
Configuración de archivo para Logs de IpTables

Buscar archivos en Linux

2010-03-28T14:57:00.000+02:00

Seguro que muchas veces nos hemos vuelto locos buscando un archivo en la estructura de directorios de nuestro sistema. Para facilitarnos la vida podemos usar el comando find que nos proporciona Linux.

Las dos opciones más habituales para usarlo es buscar un nombre de archivo/directorio, con el parámetro –name o para buscar por tipo, con el parámetro –tyfe.
Por lo tanto, debemos ejecutar el comando:

find –name nombre
find –type typo

Si queremos conocer más opciones de éste comando podemos ejecutar la ayuda (man find)

Cómo cambiar grupo de archivos en Ubuntu (Server)

2010-02-26T09:49:00.000+01:00

inux dispone de de un comando que permite cambiar el propietario de un archivo y/o directorio respectivamente:

Def: $ chgrp [nuevo grupo] [archivo/directorio] [opciones][opciones]

Ej: chgrp root img.jpg

Para conocer más opciones de este comando podemos ejecutar el comando

man chgrp

Si quieres conocer más sobre permisos en Linux puedes consultar: Permisos Linux

También te puede interesar:

cómo cambiar permisos de archivos en Ubuntu (Server)
cómo cambiar propietario de archivos en Ubuntu (Server)

Cómo cambiar propietario de archivos en Ubuntu (Server)

2010-02-24T12:54:00.000+01:00

inux dispone de de un comando que permite cambiar el propietario de un archivo y/o directorio respectivamente:

Def: $ chown [nuevo usuario propietario] [archivo/directorio] [opciones]

Ej: chown xandru 755 img.jpg

Para conocer más opciones de este comando podemos ejecutar el comando

man chown

Si quieres conocer más sobre permisos en Linux puedes consultar: Permisos Linux

También te puede interesar:

cómo cambiar permisos de archivos en Ubuntu (Server)
cómo cambiar grupo de archivos en Ubuntu (Server)

Cómo cambiar permisos de archivos en Ubuntu (Server)

2010-02-23T12:56:00.000+01:00

inux dispone de de un comando que permite cambiar los permisos de un archivo y/o directorio respectivamente:

Def: $ chmod [permisos] [archivo/directorio] [opciones]

Ej: chmod 755 img.jpg

Para conocer más opciones de este comando podemos ejecutar el comando

man chmod

Si quieres conocer más sobre permisos en Linux puedes consultar: Permisos Linux

También te puede interesar:

cómo cambiar propietario de archivos en Ubuntu (Server)
cómo cambiar grupo de archivos en Ubuntu (Server)

Permisos Linux

2010-02-14T21:21:00.000+01:00

ara trabajar con sistemas Linux es muy importante que conozcamos a la perfección su estructura de permisos y roles de sus archivos y directorios.

Existen tres tipos de permisos:

w de escritura. Si es para un archivo será que podemos escribir en él y si es para un directorio significa que podemos crear ficheros dentro de él.
r de lectura. Que indica que se puede leer un archivo o directorio.
x de ejecución. Si es para un archivo será ejecutable y si es para un directorio significa que podemos pasar por él.

También debemos conocer los tres tipos de roles sobre los que se aplican los permisos:

Usuario. Es el propietario del archivo.
Grupo. Indica el grupo al que pertenece el archivo.
Otros. El resto de los usuarios que puedan utilizar el archivo.

Los permisos se muestran como “rwx” o en su defecto con el número en binario correspondiente a los permisos. Cada permiso tiene un valor asociando su posición con su correspondiente binario:
r=4
w=2
x=1
-=0

Los permisos de un archivo/directorio se muestran en este orden: permisos usuario, grupo y otros (rwx rwx rwx). Pudiendo marcar con un “-“ los permisos que no dispone.

Algunos ejemplos:

rw- r-- r-- (644) — Sólo el propietario tiene los permisos de leer y escribir; el grupo y los demás sólo pueden leer.

rwx --- --- (700) — Sólo el propietario tiene los derechos de leer, escribir y ejecutar el archivo.

rwx r-x r-x (755) — El propietario tiene los derechos de leer, escribir y ejecutar; el grupo y los demás sólo pueden leer y ejecutar.

rwx --x --x (711) — El propietario tiene los derechos de lectura, escritura y ejecución; el grupo y los demás sólo pueden ejecutar.

rwx rwx rwx (777) — Todo el mundo puede leer, escribir y ejecutar.

Para ver los permisos de los directorios y archivos se debe ejecutar:

$ ls –l <nombre del archivo/directorio>

Que nos devolverá una salida del estilo:

drwxr-xr-x 3 xandru xandru 40296 2010-02-14 21:25 permisos_linux.html

1.En el que el primer carácter indica el tipo de archivo.
2-10. Los nueve siguientes se corresponden con los permisos del usuario propietario, grupo y otros usuarios.
11. El siguiente numérico muestra si tiene un enlace físico.
12,13. Los dos nombres siguientes son el nombre es el propietario y del grupo al que pertenece
14. La cadena numérica se corresponde con el tamaño..
15,16. A continuación se muestra la fecha de creación y la hora.
17. Por último, se indica el nombre del archivo/directorio.

También te puede interesar:

cómo cambiar propietario de archivos en Ubuntu (Server)
cómo cambiar permisos de archivos en Ubuntu (Server)
cómo cambiar grupo de archivos en Ubuntu (Server)

Cómo crear página webs - (1) Comenzando con HTML y CSS

2010-02-05T19:47:00.000+01:00

TML, HyperText Markup Language, es el lenguaje predominante para la creación de páginas de internet.

Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Con él podemos crear la estructura básica de la página, las diferentes partes que tendrá, las cuales se crean con “etiquetas” rodeadas por corchetes angulares (<>). Por supuesto, sólo con este lenguaje no podríamos confeccionar una estructura bien diseñada. Para ello, nos apoyaremos en CSS, mediante el cual podremos ubicar cada elemento que creemos con HTML en la posición que deseemos.

Una vez realizada la estructura básica, HTML se puede combinar con otras tecnologías o lenguajes, como puede ser JavaScript, PHP, MySql... y con ello conseguir la funcionalidad deseada de nuestra página.

CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.

Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web, ya que si únicamente usamos HTML la apariencia del documento sería muy rígida y limitada. CSS describe cómo los elementos dispuestos en la página son presentados al usuario. Con CSS podemos especificar estilos como el tamaño, fuente, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página.

Para comenzar a trabajar con esta tecnología os propongo practicar creando vuestra primera página web, siguiendo el manual expuesto en la página web de comocreartuweb comenzando en la primera lección y acabando en la sexta y una vez finalizado sabremos crear una página web con HTML y CSS.

Crear virtual Host

2010-01-19T06:58:00.000+01:00

i estamos trabajando en varios proyectos diferentes sobre nuestro locahost sería interesante que pudiésemos acceder a cada uno por distintas URL, es decir que si tenemos un proyecto “Restaurante” la URL para acceder en modo local sería http://locahost/restaurante, si el contenido lo tuviésemos en el directorio restaurante dentro de nuestro directorio raíz.

Lo interesante sería poder acceder a al sitio con http://restaurante.

Para hacer esto, debemos buscamos el archivo de configuración de host virtuales que, dependiendo del S.O. utilizado estará en un sitio u otro. Por ejemplo en Ubuntu Server estará en /etc/apache2/httpd.conf o en caso de que estemos usando XAMPP sobre windows, el archivo httpd-vhosts.conf y lo editamos con la siguiente configuración:

NameVirtualHost *:80



<VirtualHost *:80>

DocumentRoot "/path/to/htdocs"

ServerName localhost

</VirtualHost>



<VirtualHost *:80>

ServerName nuevo_host

DocumentRoot "/path/to/nuevo_host"

</VirtualHost>

Si quisiésemos añadir más host virtuales solo tenemos que duplicar el segundo VirtualHost con su configuración correspondiente.

Por último, editamos el archivo de host (normalmente en C:\WINNT\system32\drivers\etc\hosts) añadiendo el nuevo/nuevos host a la lista para forzar su asociación a nuestro localhost.

127.0.0.1       localhost
127.0.0.1       nuevo_host

Manual/Tutorial Blueprint CSS framework

2010-01-17T16:12:00.000+01:00

n uno de los artículos anteriores habíamos cómo instalar el framework blueprint CSS, aunque para ser más exactos deberíamos decir a copiar el contenido del archivo descargado en la carpeta, que es la única instalación que necesita.

Una vez tenemos el directorio blueprint en nuestro directorio de trabajo, debemos cargar los archivos desde las páginas en las que vamos a usar el framework. Para ello debemos introducir las siguientes líneas dentro de la cabecera –como si de un archivo css se tratase-.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" /> 

<!--[if lt IE 8]>

<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" />

<![endif]-->

Usando CSS en Blueprint

Existen básicamente 3 capas en el framework blueprint CSS. La capa reset que elimina cualquier regla CSS establecida por cada navegador, typography que nos proporciona distintas tipografías y la capa grid que nos proporciona una serie de clases CSS para hacer diseños de tablas. Las dos primeras no se necesitan modificar, por ejemplo si queremos modificar el tamaño de un elemento lo haremos en nuestra propia hoja de estilo, así se facilita la actualización a posibles actualizaciones del framework.

Tipos de Tipografías

Aunque la tipografía se aplica a sí misma, existen una serie de clases definidas para ser usadas:

.small

Hace el elemento más pequeño.

.large

Hace el elemento más grande.

.hide

Oculta el elemento.

.quiet

Atenua el color de la fuente.

.loud

Hace que el texto tenga color negro.

.highlight

Añade un fondo amarillo al tezto.

.added

Añade un fondo verde al tezto.

.removed

Añade un fondo rojo al tezto.

.first

Elimina el margin/padding del lado izquierdo del elemento.

.last

Elimina el margin/padding del lado derecho del elemento.

.top

Elimina cualquier margin/padding superior del elemento.

.bottom

Elimina cualquier margin/padding inferior del elemento.

Diseño de los formularios

Para dar estilo a los elementos de los formularios, cada elemento debe tener las clases .text o .title donde .text es el tamaño normal y .title se corresponde con un tamaño grande.

También existen una serie de clases que se pueden utilizar para mostrar los mensajes de error:

div.error

Crear un cuadro de error (rojo).

div.notice

Crear un cuadro de noticias (amarillo).

div.success

Crear un cuadro de mensajes correctos (verde).

Creando una tabla

La tercera capa se corresponde con las clases, que permite crear casi cualquier clase de tabla.

La tabla por defecto esta compuesta por 24 columnas, de 30px cada una, con 10px de margen entre cada columna. El tamaño total es de 950px.

Para configurar nuestras tablas, debemos crear una columna con la etiqueta <div> y aplicar una de las clases .span-x para hacerlo. Por ejemplo, si queremos 3 columnas, con dos de ellas estrechas y una más ancha, una cabecera y un pie de tabla, debemos hacer lo siguiente:

<div class="container">

   <div class="span-24">

    The header

   </div>



   <div class="span-4">

    The first column

   </div>

   <div class="span-16">

    The center column

   </div>

   <div class="span-4 last">

    The last column

   </div>



   <div class="span-24">

    The footer

   </div>

  </div>

Hay dos clases importantes que deemos conocer. Ante todo, debemos tener en cuenta que cualquier sitio creado con ayuda de Blueprint debe estar envuelto en un div con la clase .container que se suele colocar justo después de la etiqueta body.

En segundo lugar, la última columna de una fila (por defecto hay 24 columnas) necesita la clase .last para eliminar el borde izquierdo. Sin embargo, cada .span-24 no necesita la clase .last porque siempre ocupa todo el ancho de la página.

Algunas clases más que se pueden utilizar a la hora de trabajar con tablas son:

.append-x

Añade x número de columnas vacías despues de la columna.

.prepend-x

Añade x número de columnas vacías antes de la columna.

.push-x

Empuja una columna x columnas a la izquierda. Puede ser usada para intercambiar columnas.

.pull-x

Tira una columna x columnas a la derecha. Puede ser usada para intercambiar columnas.

.border

Aplica un borde en el lado derecho de la columna.

.colborder

Añade una columna vacía, con un borde en el medio.

.clear

Crea una columna debajo de una fila, sin importar el espacio.

.showgrid

Añade un contendor o columna para ver la tabla.

En la lista x es un valor entre 1 y 23 para append=prepend y 1 y 24 para push/pull.

Otro ejemplo de una tabla con cuatro columnas con el mismo tamaño, con un borde entre las dos primeras y las dos últimas columnas, como si se tratase de un hueco entre ambas.

<div class="container">

<div class="span-5 border">

The first column

</div>

<div class="span-5 append-4">

The second column

</div>

<div class="span-5 border">

The third column

</div>

<div class="span-5 last">

The fourth (last) column

</div>

</div>

Se puede anidar las columnas para lograr el diseño deseado. Haremos una configuración donde tengamos cuatro rectángulos, dos en el lado superior y dos en el inferior de la primera mitad de la página, y una columna normal ocupando la segunda mitad.

<div class="container">

<div class="span-12">

<div class="span-6">

Top left

</div>

<div class="span-6 last">

Top right

</div>

<div class="span-6">

Bottom left

</div>

<div class="span-6 last">

Bottom right

</div>

</div>

<div class="span-12 last">

Second half of page

</div>

</div>

Los scripts

Blueprint viene con dos scripts: uno para comprimir y customizar el CSS, y uno para validar los archivos CSS, que es útil if se realizan cambios en los archivos.

El validador

El validador, como su propia palabra indica, valida los archivos centrales del CSS. El script usa una versión del validador CSS de W3C. Para ejecutarlo, se necesita tener instalado Ruby en la máquina. Se puede ejecutar el script como:

$ ruby valídate.rb

El compresor

Como los archivos que se incluyen en el HTMl son versiones comprimidas de los archivos centrales del CSS, debemos recomprimir los archivos si queremos hacer cualquier cambio.

Gestión de nuestro Servidor con Webmin

2010-01-14T12:17:00.000+01:00

sta aplicación nos ayudará a la gestión de nuestro servidor de forma remota a través de una interfaz web. Nos ofrece la posibilidad de modificar la configuración del servidor de una forma muy intuitiva.

Descargamos el paquete para Ubuntu desde su página web.

Una vez que lo tengamos en nuestra máquina, lo instalamos con:

sudo dpkg –-install webmin-1.410-all.deb.

Puede que necesitemos instalar algunos paquetes adicionales necesarios que no tenemos, pero esta es una tarea fácil y común en los sistemas operativos Linux por lo que no entraremos en detalles.

Si todo ha ido bien, tendremos instalada la aplicación en el directorio /usr/share/webmin.

Para acceder a ella, simplemente lo hacemos con la dirección

http://IP_Servidor:10000.

También puede ser interesante:
Ver estadísticas hardware de nuestro servidor

Estadísticas Hardware de nuestro Servidor

2010-01-14T11:48:00.000+01:00

l igual que son importantes las estadísticas web, no debemos olvidarnos de llevar un control sobre nuestro servidor físico, es decir, sobre sus componentes. Con esta serie de estadísticas tendremos un sistema que analizara todo nuestro Hardware y el tráfico de red, tanto entrante como saliente. El software a utilizar será PhpSysInfo.

Para instalarlo, lo haremos de la siguiente forma:

sudo apt-get install phpsysinfo

Creamos un enlace simbólico entre el directorio de la instalación y nuestro directorio web raíz.

cd /home/xandru/www/ 
ln -s /var/www/phpsysinfo

Editamos el fichero /etc/phpsysinfo/config.php para que nos muestre las estadísticas en español.

sudo nano /etc/phpsysinfo/config.php

y solo debemos configurar la variable lang para pasarla de en a es. En este fichero de configuración podemos realizar muchas más modificaciones, pero nosotros con esta modificación nos sirve de momento.

Accedemos desde nuestro navegador a la pantalla de estadísticas desde la siguiente URL:

http://192.168.2.106/phpsysinfo

También puede ser interesante:
Gestionar nuestro servidor con Webmin

Instalación de Blueprint css framework

2010-01-10T22:50:00.000+01:00

xisten varios Frameworks para trabajar con CSS, pero por casualidades del destino hemos comenzado a trabajar con este FW y la verdad que consideramos que puede satisfacer fácilmente todas nuestras necesidades de diseño para darle a nuestras páginas el aspecto deseado.

Para comenzar a trabajar con él, debemos descargar el archivo compromido (vien sea en zip o tar) desde la página oficial del proyecto Blueprint y una vez descomprimido copiar el directorio blueprint dentro de, por ejmplo, el directorio ccs de nuestro directorio de trabajo. En el archivo descargado podemos entrar más directorios, como el de ejemplos, que no serán necesarios copiar, pero sí nos pueden ser de utilidad, aunque eso queda a decisión de cada uno.

Aprende cómo utilizar este framework desde esta entrada.

Montar USB en Ubuntu (Server) modo consola

2010-01-09T20:25:00.000+01:00

i nuestro Linux no es capaz de reconocer nuestro pendrive o nuestro SO no dispone de entorno gráfico, como puede ser en el caso de que utilizemos un Server, nos vemos obligados a montar el USB de forma manual, en este caso con Ubuntu.

Dado que los pendrives son montados como unidades de almacenamiento masivo y como si se tratasen de unidades scsi, el usb será nombrado con la tipología "sdxX" donde x (puede ser a,b,c,d) será el canal donde está conectado y X (1,2,3,4,5....) será el numero de dispositivo, cabe destacar que en algunas distribuciones no es necesario el uso del numero de dispositivo X como en slackware (y slamd64).

Podemos ver las unidades disponibles con:

$ ls /dev/sd*

Aunque tal vez sea más conveniente ejecutar el comando:

$ls -l /dev/sd*

Para ver qué dispositivos se encuentran actualmente en uso
nos mostrará las unidades que se encuentran disponibles. Ahora debemos crear una carpeta para montar el usb:

#mkdir /media/usb

y ejecutamos la siguiente instrucción para montar el USB en la carpeta creada:

#mount -t vfat /dev/sdxX /media/usb

donde dsxX es la unidad que se queramos mostrar

Con esto ya tendremos montado nuestro USB en /media/usb
Cuando acabemos de utilizarlo, debemnos desmontarlo con la instrucción

umount /media/usb

Página anterior y siguiente en php y javascript

2010-01-08T05:28:00.000+01:00

uchas veces necesitamos que el usuario de nuestro sitio regrese a la página anterior a la que se encuentra, o simplemente conocer de que página proviene.

Tenemos dos opciones a la hora de realizar esta tarea: mediante instrucciones en JavaScript o PHP.

Para movernos por el historial de las páginas web utilizadas con JavaScript, las instrucciones son las siguientes:

history.back()
history.forward()

Pero si necesitamos hacer, por ejemplo, un retroceso de dos páginas debemos utilizar:

history.go(x)

donde x es el número de página a saltar (negativo será para retroceder).

Si preferimos usar PHP, también podemos ver de qué web procede el usuario con la variable HTTP_REFERER , aunque su buen funcionamiento dependerá de si las cabeceras han sido enviadas o no, por lo que podemos decir que no es 100% fiable.

$_SERVER['HTTP_REFERER']

Por ejemplo, podemos crear una página que nos indique de donde proviene el usuario:

$web = (!$_SERVER['HTTP_REFERER'])?"Ningún Sitio":$_SERVER['HTTP_REFERER'];
//Se ve si el usuario viene de alguna web, indica de cual y si no muestra “Ningún sitio”
$fecha = date("d/m/Y g:i:s a"); 
echo "Nuevo acceso desde: ".$web;
?>

También podemos añadir más información a los resultados obtenidos, aunque funciona solo con las “register globals off”

IP: ".$REMOTE_ADDR."
Pc: ".$HTTP_USER_AGENT."
Lenguaje: ".$HTTP_ACCEPT_LANGUAGE."

Abrir enlaces HTML en una ventana nueva

2009-12-25T13:43:00.001+01:00

ara que nuestros enlaces se abran en una ventana/pestaña nueva y no en la que estamos, simplemente debemos añadir target="_blank" a nuestra etiqueta de enlace, es decir, algo como:


<a href="http://xandrusoft.blogspot.com/" target="_blank">XandruSoft_Blog</a>

Tortoise en español

2009-12-21T19:36:00.000+01:00

i queremos tener la versión de tortoise en español no tenemos más que descargarlo desde alguna de las páginas de descarga como este enlace

Una vez instalado solo debemos ir a TortoiseSVN/Settings y seleccionar como idioma el español.

Si queréis saber como instalar o configurar tortoise no dudéis en mirar en
Control de Versiones

Problemas con tildes y ñs en tu página¿?

2009-12-21T09:33:00.000+01:00

ste es un problema que a mi me dio más de un dolor de cabeza, por lo que me gustaría compartir con vosotros la solución que encontré.

Me gustaría dejar claro que la solución no solo depende de la configuración que apliquemos en nuestras páginas sino que también depende, por ejemplo, de la configuración del servidor.

Nuestra solución esta dada, en principio, para un servidor Apache con una configuración por defecto, por lo que no intentéis forzarlo a que interprete los caracteres por su cuenta.

Lo primero que debemos de haber es forzar todas las páginas en las que se muestren o trabajemos con caracteres especiales, a que tengan formato UTF-8 sin bom. Esto se consigue desde cualquier editor como el NotePad++.

La base de datos ha de estar en alguna de las codificaciones UTF-8. Yo he probado con la general y todo me ha ido bien. Si estabas pensando, o tienes introducidos en la base de datos los datos con caracteres como á te recomiendo que los vallas cambiando, ya que en la base de datos los caracteres deben estar escritos igual que escribimos nosotros en el Word, es decir, con tildes y ñs.

También debemos tener en cuenta que si utilizamos PhpMyAdmin, a partir de la versión (creo) 2.x debemos utilizar la función

@mysql_query("SET NAMES 'utf8'");

después de establecer la conexión con la base de datos para forzarla a que introduzca bien los caracteres.

En principio con estas pequeñas modificaciones tendremos solucionado el problema.

Control de versiones - Importar un directorio al repositorio con Tortoise

2009-10-13T19:54:00.000+02:00

xisten muchos clientes SVN para el control de versiones, pero nosotros nos hemos fija en Tortoise. Se trata de un programa muy fácil de utilizar y nos proporciona todas las funcionalidades que necesitamos.

Para descargar el programa lo podemos hacer desde aquí.

Una vez instalado el programa, debemos crear una nueva carpeta dónde albergaremos nuestros repositorios. Llamaremos a esta carpeta SVNRepositorio. La podemos crear en cualquier zona del disco asegurándonos de que la carpeta se encuentra vacía. Nosotros la crearemos en C:

Para crear el repositorio, en el menú contextual del directorio creado, seleccionamos TorsoiseSVN -> Crear repositorio aquí. Con esto ya tendremos nuestro directorio principal donde tendremos almacenadas las distintas versiones de nuestros archivos.

1. Podemos crear cualquier estructura de directorios dentro de nuestro directorio principal. Para ello, lo más recomendable es hacerlo mediante el navegador de repositorios.

2. Ejecutaremos la opción Obtener desde la carpeta que hemos creado en el navegador de repositorios sobre la carpeta de más alto nivel que queremos añadir al repositorio (la carpeta de la que queremos guardar las versiones).

3. Utilizamos TortoiseSVN -> Añadir en al carpeta que queremos guardar (podemos seleccionar qué archivos queremos guardar, añadir comentarios, etc) en el repositorio. Aunque nos muestre una advertencia de que la carpeta no está vacía le damos a continuar.

4. Por último confirmamos la carpeta para que sea añadida.

Con esto ya tendremos nuestro árbol de repositorios, y cada vez que se modifique el estado de algún archivo se pondrá un icono en color rojo sobre este. Podemos guardar posteriormente cada versión por archivos separados o de toda la carpeta a la vez.

También podéis ver
Tortoise en Español

Variable PHP que contiene la URL de la página actual

2009-10-13T19:48:00.000+02:00

odemos usar la siguiente:

$_SERVER['REQUEST_URI']

que, si nuestra URL actual es www.midominio.com/pagina1/datos.php nos devuolverá pagina1/datos.php

Apache no carga .htaccess en Ubuntu

2009-09-29T13:00:00.000+02:00

i utilizamos el archivo .htaccess para configurar dinámicamente Apache a la hora de cargar nuestra página web, y tenemos instalado el servidor en Ubuntu, tenemos que tener en cuenta que con la configuración por defecto de este servidor no reconocerá el archivo. Para solventar este problema debemos modificar una directiva en uno de los archivos de configuración de apache.

En el archivo /etc/apache2/sites-available/default modificaremos las líneas

“AllowOverride None”

por

“AllowOverride All”

Reiniciamos el servicio y habremos solucionado el problema.

Abrir puerto 80 en router

2009-09-08T08:55:00.000+02:00

ccedemos a la pantalla de configuración de nuestro router –normalmente introduciendo su dirección IP en el navegador- y nos dirigimos a la zona de configuración del Virtual Server (NAT>Virtual Server) y en la tabla debemos especificar qué puerto queremos habilitar que será el 80 tanto para el puerto publico como el LAN. El protocolo lo dejamos como TCP y le indicaremos la dirección IP privada de nuestra máquina. Por último marcamos la casilla de Enable y ya tendremos el puerto abierto para poder acceder a nuestro http. En la imagen se muestra un ejemplo para un router SMC.

El consejo: establecer una pequeña LAN casera, ya que si os conectáis por WiFi al router puede que vuestra IP privada cambie cada vez que establezcáis comunicación y por ello deberéis cambiar la configuración en el router. Con una LAN –normalmente ya viene configurada una por defecto en el router- os evitáis este problema.

También puedes ver:
Cómo configurar un DDNS

Paso de parámetros a include()

2009-09-06T13:25:00.000+02:00

sta es una construcción bastante común en PHP, y cuando más se usa es cuando se incluyen cabeceras y pies de página.

Puede que también lo utilicemos para incluir un código común que usamos en varias páginas, como un select de provincias o una columna que aparece en todas las páginas. En alguna de estas ocasiones podemos vernos en la necesidad de usar alguna variable de la página en la que nos encontramos. La solución a este problema es realmente trivial: simplemente definimos una variable con el valor que deseemos y dentro del código que queremos incluir hacer una referencia a esa variable, ya que recordemos que el include lo que hace es añadir el código de la página externa como código de la página que hace la llamada.

Ni se os ocurra tener la idea de pasarle valores a la dirección a la que hacéis la llamada, es decir, algo como

include(pagina.php?var=”1”)

Eso está totalmente prohibido.

Configurar DDNS (Dynamic Domain Name System) con DynDns

2009-09-02T10:37:00.000+02:00

i queremos configurar un servidor web, ftp, montar una VPN, etc. en nuestro servidor casero necesitamos tener localizado nuestro router en internet. El problema es que la mayoría de nosotros tenemos una direccionamiento dinámico, es decir, nuestra IP pública cambia, a priori, cada vez que nos conectamos. Por lo que para habilitar estos servicios necesitaremos la configuración de un DDNS.

Los DNS asocian un router, mediante un nombre de dominio, a una dirección IP. Como en nuestro caso la dirección IP es dinámica, necesitaremos configurar un DDNS.

Para ello, podemos usar varios servidores DNS dinámicos. En este caso crearemos unos desde DynDns ya que es uno de los más consolidados. Nos abstendremos de explicar cómo es el funcionamiento de este servicio, aunque puede que lo hagamos en otra ocasión.

Lo primero que debemos hacer es crearnos una cuenta en su portal, www.dyndns.org, en el apartado account, seleccionamos create account y rellenamos el formulario con nuestros datos.

Recibiremos un correo de confirmación de registro y una vez finalizado, podremos acceder a nuestra cuenta y crear un nuevo dominio. El mayor inconveniente que tiene este servicio es que es uno de los más utilizados, y por ello los dominios que nos ofrecen no son los más usuales (No confundamos dominios de subdominios. Nosotros podremos crear un subdominio dentro de un dominio perteneciente a DynDns). Por lo que nuestro nuevo dominio tendrá un aspecto como el siguiente: xxxxxx.dyndns.org donde xxxxx es nuestro subdominio.

También es más que recomendable descargarse el programa que nos ofrece DynDns para llevar el control de nuestro servicio. Éste se puede descargar desde Support donde encontraremos una zona de descarga del mismo.

Lo instalamos, y una vez que introduzcamos nuestros usuario y login automáticamente detectará nuestra configuración, incluyendo nuestra IP dinámica. Aplicamos los cambios.

Una vez creado nuestro “dominio”, lo siguiente es configurar nuestro router. En este caso lo haremos para un SMC, que nos da soporte para el servicio DynDns y es capaz de actualizar el servidor DNS cada vez que detecte un cambio de IP en la interfaz de WAN.

Accedemos a la zona de DDNS, que en nuestro caso se encuentra en SYSTEM>DDNS e introducimos los datos de nuestra cuenta, que son subdominio, usuario y password. Ponemos la función a enabled.

Para comprobar que todo funciona, abrimos una ventana de ms-dos y hacemos un ping a nuestro dominio.

Por último tenemos que abrir el puerto 80 (http) en nuestro router para poder establecer la comunicación desde el exterior. Puedes ver cómo abrir puerto 80.

Cambiar formato de una fecha. Conversión entre PHP y mySql

2009-09-01T07:03:00.000+02:00

uando en nuestra página web usamos bases de datos y en estas almacenamos fechas nos vemos con el inconveniente de que el formato es distinto al que estamos acostumbrados a utilizar diariamente. El formato en mysql es aaaa-mm-dd y nosotros queremos usarla con el formato dd/mm/aaaa.

Aunque no sea la mejor forma de hacerlo, aquí os dejo las funciones de conversión de una a otra:

function cambiaFechaMySQL($fecha){
ereg( "([0-9]{1,2})/([0-9]{1,2})/([0-9]{2,4})", $fecha, $mifecha);
$lafecha=$mifecha[3]."-".$mifecha[2]."-".$mifecha[1];
return $lafecha;
}

function cambiaFechaPHP($fecha){
ereg( "([0-9]{2,4})-([0-9]{1,2})-([0-9]{1,2})", $fecha, $mifecha);
$lafecha=$mifecha[3]."/".$mifecha[2]."/".$mifecha[1];
return $lafecha;
}

Si ademas de utilizar fechas las deseas validar puedes consultar:
Validar fecha con jQuery

Asignar valores por defecto a imput=”file” y a textarea

2009-09-01T06:43:00.000+02:00

eguro que muchos os habéis estado rompiendo la cabeza buscando la forma de dar un valor por defecto a el tipo de dato imput=”file”. Pues que sepáis que no se puede!!!

No se puede dar un valor por defecto a los campos de este tipo, ya que hacen referencia a una ruta física local y podrían surgir problemas de seguridad.

Lo que se puede hacer, por ejemplo, es mostrar la imagen o el nombre del dato que tenemos almacenado y si el usuario desea modificarla, ofrecerle la opción de cargar una nueva.

La etiqueta textarea, aunque pueda parecérnoslo, no se trata de un imput y para darle valor por defecto simplemente debemos mostrar el texto que deseemos entre su marca de apertura y de cierre. Es decir, en caso de que lo que deseemos mostrar por defecto sea una variable, introduciremos el siguiente código:

Configurar página 404

2009-08-19T20:24:00.000+02:00

oy vamos a personalizar nuestra página de error 404.

Para quien no lo sepa, se muestra cuando se intenta acceder a una página que no existe o que ha sido borrada.

Lo primero que debemos hacer es crear un nuevo fichero al que llamaremos, por ejemplo, 404.php.

En este caso añadiremos unos monigotes muy graciosos que encontré y que se pueden descargar desde la página de 404 Toons.

Una vez descargado el fichero .zip tenéis que copiarlo en una carpeta dentro de vuestro directorio de trabajo y buscar cuál os gusta más.

Después de esto, llega el turno de darle forma a nuestra página 404.php. Para añadir el monigote, copiamos el código que trae en su carpeta correspondiente en nuestra página de error.

Tienes que tener cuidado a la hora de escribir el enlace en el lugar donde tenéis almacenados los archivos descargados y añadir la ruta absoluta, ¿por qué? porque las páginas 404 se comportan de forma distinta al resto y puede que, si añades una ruta relativa, te den problemas. Un ejemplo puede ser algo como lo siguiente:

"http://localhost/proyectu/404/404police1/404police1.swf"

Si no tienes el archivo .htaccess es hora de que lo crees y lo añadas a tu carpeta raíz de trabajo. Edítalo para añadir la siguiente línea de código, teniendo en cuenta que la página que acabamos de crear la tenemos en el directorio raíz:

ErrorDocument 404 /404.php

Con todo esto ya deberías ver tu página de error si accedes a una página que no existe. Asegúrate de que la caché del navegador está limpia.

Añadir gráficas de estadísticas en php

2009-08-18T11:37:00.001+02:00

i queremos dar un toque de color a nuestras páginas en las que tengamos que mostrar estadísticas, podemos utilizar la librería zxchart.

Una vez que la descarguemos del Sitio Oficial debemos añadirla en una parpeta dentro de nuestro directorio de trabajo. En esta carpeta podemos encontrar un archivo index.html en el que encontraremos documentación y ejemplos.

La gráfica que mostraremos será algo como la que observamos a continuación

Para poder mostrar las gráficas debemos añadir el siguiente código en el lugar donde queramos incluirla en nuestro fichero:

Y para que los datos se impriman en la gráfica, el código resultante ha de ser algo del estilo:

Pudiendo ser escritos directamente, o si debemos realizar consultas a una base de datos, nuestro código podía ser como el siguiente:

$valor = $_SESSION['estano'];
unset($_SESSION['estano']);
print "&tTText=Facturación de empleados\n
&tBText=Facturación por año\n
&tLText=Euros\n
";
$factura = 0;
$donde = array("fecha",$valor);
$campos = array("id_factura", "id_empleado", "fecha", "cantidad", "precio", "concepto", "borrado");
$elem = $dao->arrayListTableElementsLike("facturas",$campos,$donde);
while($row=mysql_fetch_array($elem)){
if($row["borrado"]!=1){
$id[$row["id_empleado"]] = 1;
if($row["concepto"]=="")
$cobro[$row["id_empleado"]] += ($row["precio"]*$row["cantidad"]);
else
$inv[$row["id_empleado"]] += ($row["precio"]*$row["cantidad"]);
}
}
print "&title=title;";
foreach($id as $key => $valor){
$name = $dao->getElemWhere("empleados","id_empleado",$key);
print $name.";";
}
print "\n";
print "&data1=Ingresado;";
foreach($id as $key => $valor){
print $cobro[$key].";";
}
print "\n";
print "\n&data2=No Ingresado;";
foreach($id as $key => $valor){
print $inv[$key].";";
}
print "\n";

Si queréis más información podéis consultar la documentación o... preguntarme. En la mayoría de lo posible intentaré ayudaros.

Validar número de cuenta bancaria en un formulario

2009-08-15T17:55:00.000+02:00

eguimos con la implementación de funciones de validación para nuestros formularios.

En esta ocasión validaremos el número de cuenta bancaria. A continuación podéis ver las funciones para PHP.

Donde $ofi contiene los 8 primeros dígitos del número de cuenta y $cuenta es el número completo.

También puedes añadir más funciones:
Validar Fecha en formularios
Validar DNI en formularios
Validar Email en formularios
Validación de formularios con jQuery

Validar email en un formulario

2009-08-15T17:45:00.000+02:00

entro del apartado de configuracuión de funciones de validación de formularios para la librería validate de jQuery y para PHP, esta vez nos toca añadir las restricciones de validación de email.

Aunque la librería validate de jQuery incluya una función propia de validación de email, creo que no es lo suficienteme restrictiva, por ello he modificado dicha función y de paso he creado la función en PHP para la validación en el lado del servidor.

Plugin de jQuery Validate

function(value, element) {
// contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
return this.optional(element) || /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,5})$/.test(value);
},

PHP

function compruebaEmail($email){
if (eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,5})$", $email))
return true;
return false;
}

Si no sabes cómo usar la librería Validate de jQuery lee el siguiente post:
Validación de formularios con jQuery

También puedes añadir más funciones:
Validar Fecha en formularios
Validar DNI en formularios
Validar Número de cuenta bancaria en formularios

Validar fecha en un formulario

2009-08-15T16:57:00.000+02:00

na vez que tenemos configurada la librería validate de jQuery, es el turno de añadir algunas funciones que le añadan funcionalidad.

Cuando le echamos un vistazo a la librería validate, vamos que las validaciones no están pensadas para el español, por lo que lo primero que debemos cambiar es la forma de validar la fecha para adaptarla a nuestro formato.

He creado la función tanto para jQuery como para PHP.

Plugin de jQuery Validate

function(value, element) {
if(!/Invalid|NaN/.test(new Date(value))){
var d = value.substr(0,2);
var m = value.substr(3,2);
var a = value.substr(6,4);
if((a <= 2050) || (m <= 12) || (d <= 31)){
return false
}
else{
if((a%4 != 0) && (m == 2) && (d > 28)){
return false;
}
else{
if ((((m == 4) || (m == 6) || (m == 9) || (m==11)) && (d>30)) || ((m==2) && (d>29))){
return false;
}
}
return true;
}
}
return this.optional(element);
},

PHP

Si no sabes cómo usar la librería Validate de jQuery lee el siguiente post:
Validación de formularios con jQuery

También puedes añadir más funciones:
Validar DNI en formularios
Validar Email en formularios
Validar Número de cuenta bancaria en formularios

Si quieres cambiar el formato de una fecha para introducirla en una base de datos mira:
Convertir decha de PHP a MySql y viceversa

Validar DNI en un formulario

2009-08-15T16:46:00.000+02:00

a librería validate de jQuery nos permite validar múltiples formatos, pero lo mejor de todo es que es totalmente configurable.

Cuando estamos creando un formulario en el que los usuarios han de insertar sus datos, muchas veces necesitamos que introduzcan su verdadero DNI. Para comprobarlo, he creado dos funciones, una para la librería de jQuery y otra para validación en la parte del servidor con PHP.
Plugin de jQuery Validate


nif: function(value, element) {
if(/^([0-9]{8})*[a-zA-Z]+$/.test(value)){
var numero = value.substr(0,value.length-1);
var let = value.substr(value.length-1,1);
numero = numero % 23;
var letra='TRWAGMYFPDXBNJZSQVHLCKET';
letra=letra.substring(numero,numero+1);
if (letra==let)
return true;
return false;
}
return this.optional(element);
},

PHP


function compruebaNIF($num){
if (strlen($num)==9)
if(ereg("^([0-9])*([A-Z])$",$num))
if($ret = $this->compruebaLletraNIF($num))
return true;
if (strlen($num)==10)
if(ereg("^([0-9])*-*([A-Za-z])$",$num))
if($ret = $this->compruebaLletraNIF($num))
return true;
return false;
}

function compruebaLletraNIF ($dni) {
$valor= (int) ($dni / 23);
$valor *= 23;
$valor= $dni - $valor;
$lletres= "TRWAGMYFPDXBNJZSQVHLCKEO";
$lletraNif= substr ($lletres,$valor,1);
if($lletraNif==substr ($dni,-1,1))
return true;
return false;
}

Si no sabes cómo usar la librería Validate de jQuery lee el siguiente post:
Validación de formularios con jQuery

También puedes añadir más funciones:
Validar Fecha en formularios
Validar Email en formularios
Validar Número de cuenta bancaria en formularios

Validar formularios con Jquery

2009-08-14T15:32:00.000+02:00

ara poder validar los campos de un formulario con jQuery desde el lado del cliente, lo primero que debemos hacer es descargar la librería jQuery, en caso de no tenerla, desde la página oficial del proyecto y segundo descargar el publing validate desde aquí.

Para poder usar el pluging validate lo único que debemos hacer es mover el contenido de los ficheros descargados, por ejemplo, a la carpeta js y estará listo para usar.

El código que debemos añadir al HTML es:
Dentro de la cabecera

//realizar una llamada a la librería jQuery y a Validate
<script language="javascript" src="js/jquery.js"></script>
<script language="javascript" src="js/jquery.validate.js"></script>

<script type="text/javascript">
//Una vez que se cargue la primera parte de la página ya se podrá usar la librería
$().ready(function() {
// validate the comment form when it is submitted
$("#Forms").validate();
});
</script>

//Le damos formato a los mensajes de error
<script type="text/css">
#Forms label.error {
margin-left: 10px;
width: auto;
display: inline;
color: red;
}
</script>

Dentro de los imputs que queramos validar del formulario debemos tener cuidado de que su marca name tenga el mismo valor que dentro de la función de del plugin Validate

<td class="obligatorio">Nombre (Obligatorio)</td>
<td>
<input id="cname" name="name" class="required" minlength="2" />
</td>

Donde class="required" significa que el parámetro es obligatorio, pudiendo añadir más restricciones a continuación.

En la documentación oficial tendremos las especificaciones de todas las funciones que se pueden usar, e incluso podréis añadir vuestras propias funciones para realizar validaciones que no estén incluidas.

En este blog podéis encontrar funciones añadidas para completar las validaciones en formularios.
Validar DNI en formularios
Validar Fecha en formularios
Validar Email en formularios
Validar Número de cuenta bancaria en formularios

Evolucionando

2009-02-22T07:23:00.000+01:00

Siguiendo la evolución natural de las cosas, y más en concreto la de mi página web, una vez finalizada y comparándola con muchas otras de la red, no fue difícil percatarme de que algo le faltaba. Otras páginas tenían textos en movimiento, menús desplegables… y la mía simplemente era un pantalla inmóvil y, por qué no decirlo, inútil. Buscando un poco por diferentes foros en la red, descubrí que existían varios lenguajes o tecnologías para crear páginas web. HTML era la base, la caja, pero dentro de esa caja se pueden meter muchas cosas y la mía se encontraba vacía. Por eso intenté familiarizarme con esas, para mí, nuevas tecnologías.

Descubrí la página HTMLYa, creada creo por unos argentinos (deducido de la extensión del dominio .com.ar), en la cual nos ayuda a comprender y practicar con varias de estas tecnologías, como puede ser CSS, JavaScript, DHTML, AJAX, PHP, MySql… Esto para mí era maravilloso, fantástico: podía darle animación a mi página y yo sin saberlo!! Por lo que me puse a practicar un poco e informarme más ampliamente. Si alguno lo desea, puede hacerse con alguno de los libros de la serie “In Action” como puede ser "Manning PHP in Action" ó para usuarios más avanzados Manning JQuery in Action.

Aunque todavía no he creado ninguna página en la que demuestre mis avances en la “programación web” sí que estoy inmerso en dos proyectos. Uno que es el proyecto fin de carrera, con el que me encuentro diseñando un portal web para la gestión de un local hostelero, y el otro es XandruSoft 2.0, aunque este último se encuentra parado momentáneamente mientras finalizo el proyecto.

Espero dentro de poco poder mostraros mis progresos y que os sirva de "empujoncito" para que os llame la atención la creación de páginas web, que aunque me creo incapaz de trabajar en una empresa diseñando y programando 8 horas al día; sí como meta personal se lo recomiendo a todo el mundo.

No usar MD5!!

2009-02-19T18:22:00.000+01:00

Hoy he leído un artículo creado por el Servicio de Inteligencia de una de las principales empresas de seguridad digital en el que, mediante una serie de ejemplos, nos demuestra que el MD5 (MD5 es uno de los algoritmos de reducción criptográficos) es potencialmente inseguro, ya que se puede obtener la misma cadena-resultado para distintos ficheros. El problema, por lo visto, ya viene de hace tiempo, desde que en 1996 alguien consiguiese obtener la misma cadena para dos ficheros distintos. En este artículo, muy gracioso además porque te plantean como acertar en el sorteo del Euromillones, te demuestran cómo se resuelve el problema dando lugar a distintos ficheros pdf (uno por cada resultado posible) con el mismo valor MD5. Y lógicamente, al final del artículo, te "sugieren" que no utilices MD5. Y yo me pregunto... si tantas pruebas hay de que es vulnerable, ¿por qué no se deja de usar?

XandruSoft Blog2.0, de todo para todos

2009-02-17T23:44:00.000+01:00

Otro blog más, uno de tantos, aunque se intentará, aunque sea para disfrute propio, de crear algo diferente, abierto a infinidad de puntos de reflexión y/o paranoia y donde cualquiera pueda sentirse indentificado o interesado por alguno de los temas.

XandruSoft, nace con un regalo, el regalo de un dominio y un hosting gratuito durante un año. El problema principal residia en que.. que hacer conun dominio alojado en un ISP? Podía decantarme por varias opciones:
1. Crear una página super chula con el editor que me ofrecia la gente de mi ISP, con el cual puedes elegir entre más de 5 diseños y cambiar los colores!!!
2. Buscar alguna empresa de diseño web y que me crease una página, aun más chula, más personalizada y se ocupasen ellos de todo.
Después de pensar 3 segundos (no invirtáis nunca más de ese tiempo para estos casos) me decanté por la tercera opción.
3. Buscarme la vida y crearme mi propia página, en la que pueda meter lo que yo quiera, pueda darle el diseño que me gustase, fuese gratis y sobre todo, fuese totalmente mía.

Muchos pensarán que crear una página web es una tarea dura, y que lleva mucho tiempo, pero en la web (www) podemos encontrar muchos sitios que nos ayudan con esta tarea.
Por mi parte, me decanté por la más llamativa que me salió entre las opciones del google a la hora de buscar cómo crear mi página web. Esta fue ComoCrearTuWeb.
En ella, nuestro amigo, nos enseña a cómo crear una página identica a la suya. En principio sería de poca utilidad tener una página igual a la que tiene otro usuario, por lo que puede que nos parezca absurdo. Pero según vamos avanzando en su tutorial, vamos dándonos cuenta de que estamos adquiriendo unos conocimientos básicos de programación HTML y CSS y vamos modelando en nuestra cabeza ideas para aplicarlas a nuestro propio sitio. Después de no más de un par de días realizando el tutorial, nos percatamos de que ya tenemos una página creada, por nosotros solitos y que ya somos capaces de crear cualquier cosa. Ya nos creeremos programadores web!!!!

Y por fin animándonos a crear nuestra página -una vez que disponemos del dominio, el hosting y los conocimientos basicos- nace XandruSoft