BitacoraWeb http://www.bitacoraweb.com Recursos y códigos Web, Códigos PHP, MySQL, AJAX, Javascript, Diseño, Ilustración, Redes, Informática, Windows, Internet Wed, 02 Jul 2008 10:35:24 +0000 http://wordpress.org/?v=2.5.1 en Formulario de envío de correos con Archivos Adjuntos http://www.bitacoraweb.com/2008/07/02/formulario-envio-correo-con-archivos-adjuntos/ http://www.bitacoraweb.com/2008/07/02/formulario-envio-correo-con-archivos-adjuntos/#comments Wed, 02 Jul 2008 10:29:40 +0000 David http://www.bitacoraweb.com/?p=24 Hace poco tuve que hacer un sistema que me permitiera enviar archivos adjuntos en un correo enviado desde la web. Hay muchas webs donde hay ejemplos para hacer esto, yo encontré este, no sé exactamente donde pero ahí va.

Primero la función de envío.

PHP:
  1. function form_mail($sPara, $sAsunto, $sTexto, $sDe)
  2. {
  3.     $bHayFicheros = 0;
  4.     $sCabeceraTexto = "";
  5.     $sAdjuntos = "";
  6.    
  7.     if ($sDe)$sCabeceras = "From:".$sDe."\n";
  8.     else $sCabeceras = "";
  9.     $sCabeceras .= "MIME-version: 1.0\n";
  10.    
  11.     foreach ($_FILES as $vAdjunto)
  12.     {
  13.         if ($bHayFicheros == 0)
  14.         {
  15.         $bHayFicheros = 1;
  16.         $sCabeceras .= "Content-type: multipart/mixed;";
  17.         $sCabeceras .= "boundary=\"--_Separador-de-mensajes_--\"\n";
  18.        
  19.         $sCabeceraTexto = "----_Separador-de-mensajes_--\n";
  20.         $sCabeceraTexto .= "Content-type: text/plain;charset=iso-8859-1\n";
  21.         $sCabeceraTexto .= "Content-transfer-encoding: 7BIT\n";
  22.        
  23.         $sTexto = $sCabeceraTexto.$sTexto;
  24.         }
  25.        
  26.         if($vAdjunto["size"]> 1048576){
  27.         return false;
  28.         }
  29.        
  30.         if ($vAdjunto["size"]> 0)
  31.         {
  32.         $sAdjuntos .= "\n\n----_Separador-de-mensajes_--\n";
  33.         $sAdjuntos .= "Content-type: ".$vAdjunto["type"].";name=\"".$vAdjunto["name"]."\"\n";;
  34.         $sAdjuntos .= "Content-Transfer-Encoding: BASE64\n";
  35.         $sAdjuntos .= "Content-disposition: attachment;filename=\"".$vAdjunto["name"]."\"\n\n";
  36.        
  37.         $oFichero = fopen($vAdjunto["tmp_name"], 'r');
  38.         $sContenido = fread($oFichero, filesize($vAdjunto["tmp_name"]));
  39.         $sAdjuntos .= chunk_split(base64_encode($sContenido));
  40.         fclose($oFichero);
  41.         }
  42.     }
  43.    
  44.     if ($bHayFicheros)
  45.     $sTexto .= $sAdjuntos."\n\n----_Separador-de-mensajes_----\n";
  46.     return(mail($sPara, $sAsunto, $sTexto, $sCabeceras));
  47. }

Luego el formulario que recoge los datos

HTML:
  1. <form name="formulario" action="enviar.php" method="post" enctype="multipart/form-data">
  2. <input type="text" name="nombre"> Nombre<br />
  3. <input type="text" name="email"> E-mail<br />
  4. <input type="text" name="asunto"> Asunto<br />
  5. <br /><br />
  6. Comentarios<br />
  7. <textarea name="comentarios"></textarea><br /><br />
  8. <input type="file" name="adjunto"> Archivo adjunto<br />
  9. <input type="submit" name="submit" value="Enviar">
  10. </form>

Por último el código que procesa el formulario.

PHP:
  1. if($_POST['submit']){
  2.     $namefrom=$_POST['nombre'];
  3.     $emailfrom='admin@dominio.com';
  4.     $emailto=$_POST['email'];
  5.     $subject=$_POST['asunto'];
  6.     $mensaje = "\nNombre: ".$namefrom."\n\n".$_POST['comentarios'];
  7.     //llamamos a la funcion de envio
  8.     form_mail($emailto,$subject, $mensaje, $emailfrom);
  9. }

Salu2

]]> http://www.bitacoraweb.com/2008/07/02/formulario-envio-correo-con-archivos-adjuntos/feed/ alternar color de fila en listados http://www.bitacoraweb.com/2008/06/10/alternar-color-de-fila-en-listados/ http://www.bitacoraweb.com/2008/06/10/alternar-color-de-fila-en-listados/#comments Tue, 10 Jun 2008 15:15:21 +0000 David http://www.bitacoraweb.com/?p=23 Hoy os explicaré un pequeño truco para aquellos que se inician con PHP, se trata de mostrar la información de forma más bonita. Al hacer consultas en la base de datos para mostrar un listado al usuario podemos colorear alternativamente las filas para que no haya un cansancio visual al leer.

Al colorear alternativamente evitamos que el lector se pierda al leer un listado demasiado extenso.

Para ello utilizamos una simple operación matemática que nos proporcione el resto de la división $i%2 (siendo % el resto de la división). La variable $i será un contador de filas, al dividirlo por 2, obtendremos alternativamente el valor 1 y valor 0 como resto de la división. 

PHP:
  1. echo '<table width="100%" border="0">';
  2.     echo '<tr>';
  3.     echo '<td><b>Usuario</b></td>';
  4.     echo '<td><b>Email</b></td>';
  5.     echo '<td><b>Fecha Registro</b></td>';
  6.     echo '</tr>';
  7. $result=mysql_query("SELECT * FROM usuarios");
  8. while($row = mysql_fetch_array($result)){
  9.     $i++;
  10.     if($i%2==0){$class='style="background-color:#f3f3f3;"';}
  11.     else{$class='style="background-color:#cccccc;"';}
  12.     echo '<tr>';
  13.     echo '<td '.$class.'>'.$row['username'].'</td>';
  14.     echo '<td '.$class.'>'.$row['email'].'</td>';
  15.     echo '<td '.$class.'>'.$row['fecha_reg'].'</td>';
  16.     echo '</tr>';
  17. }
  18. echo '</table>';

Salu2 

]]> http://www.bitacoraweb.com/2008/06/10/alternar-color-de-fila-en-listados/feed/ Capa centrada con CSS http://www.bitacoraweb.com/2008/06/05/capa-centrada-con-css/ http://www.bitacoraweb.com/2008/06/05/capa-centrada-con-css/#comments Thu, 05 Jun 2008 18:47:49 +0000 David http://www.bitacoraweb.com/?p=21 Este "truquito" para centrar una capa es bastante útil. Personalmente lo uso bastante si quiero mostrar algún aviso en la web o si quiero mostrar contenido por encima de todo el sitio. Hay que tener en cuenta que los margenes top y left, son exactamente a mitad de height y width pero negativos.

HTML:
  2. #capa_centrada{
  3.     position: absolute;
  4.     background-color:#cccccc;
  5.     width: 400px;
  6.     height: 300px;
  7.     top: 50%;
  8.     left:50%;
  9.     margin-top: -150px;
  10.     margin-left: -200px;
  11. }
  12. </style>
  13. <div id="capa_centrada"></div>

Los más entendidos ya sabrán que si quiero mostrar una capa por encima de las demás debo utilizar position:absolute; pudiendo especificar el nivel o altura relativa que tendrá con otras capas absolutas con la propiedad z-index.

Por ejemplo podemos aplicarle el style display:block; para mostrar la capa y con javascript podemos ocultar o mostrarla de la siguiente forma.

JAVASCRIPT:
  1. document.getElementById("capa_centrada").style.display = "block"; //muestra
  2. document.getElementById("capa_centrada").style.display = "none"; //oculta

 

Salu2

 

]]> http://www.bitacoraweb.com/2008/06/05/capa-centrada-con-css/feed/ Leer archivo Excel con PHP http://www.bitacoraweb.com/2008/06/04/leer-archivo-excel-con-php/ http://www.bitacoraweb.com/2008/06/04/leer-archivo-excel-con-php/#comments Wed, 04 Jun 2008 14:44:22 +0000 David http://www.bitacoraweb.com/?p=20 Hoy vamos a ver algo que puede resultar muy útil, he titulado "leer archivo excel", aunque el ejemplo que voy a poner no es exactamente con un archivo excel, sino con un csv creado desde excel. PHP proporciona una función que permite leer este tipo de archivos fgetcsv

PHP:
  1. <?php
  2. $fp = fopen ("archivo.csv","r");
  3. //bucle while que se ejecutará mientras haya filas que leer
  4. while (( $data = fgetcsv ( $fp , 10000 , ";" )) !== FALSE ) {
  5.     //mostramos los datos de cada fila
  6.     foreach($data as $row) {
  7.         echo $row.'&nbsp;&nbsp;';
  8.     }
  9.     echo '<br>';
  10. }
  11. ?>

De esta forma podríamos por ejemplo adaptar el script para insertar esos datos en nuestra base de datos, y podriamos crear un sistema que nos permitiera por ejemplo actualizar un catálogo y tienda online mediante un archivo csv que habriamos manipulado desde Excel.

Salu2

]]> http://www.bitacoraweb.com/2008/06/04/leer-archivo-excel-con-php/feed/ Estilos CSS http://www.bitacoraweb.com/2008/06/03/estilos-css/ http://www.bitacoraweb.com/2008/06/03/estilos-css/#comments Tue, 03 Jun 2008 14:51:49 +0000 David http://www.bitacoraweb.com/?p=19 En días anteriores hemos visto como se realizaba una maquetación básica con HTML. Si observáis he incluido colores de celda, márgenes, borde,... Estos atributos permiten modificar el aspecto de la web, pero si como normalmente se utilizan muchos atributos no es viable incrustarlos en el propio código HTML.

Podemos separar los estilos de la maquetación básica de la página utilizando estilos, ya sea incluidos directamente dentro de la etiqueta <head></head> o en un archivo externo CSS.

Para incluirlos directamente sólo tenemos que utilizar las etiquetas <style></style> e incluir todos los estilos dentro.

En el caso de una hoja de estilo CSS externa, enlazamos el archivo mediante la siguiente etiqueta:

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

Una hoja de estilo tipica sería la siguiente:

estilos.css

HTML:
  1. BODY {
  2.   background: #ffffff;
  3.   color: #000000;
  4.   margin: 0px;
  5.   font-family:arial,verdana,helvetica;
  6.   font-size:12px;
  7. }
  8.  
  9. .head {
  10.     background-image: url('images/template/bg_head.jpg');
  11.     background-repeat: repeat-x;
  12.     background-color: #ffffff;
  13. }
  14.  
  15. #box {
  16.     border: 1px solid #cccccc;
  17. }
  18.  
  19. A:link {COLOR: #000000; TEXT-DECORATION: underline}
  20. A:visited {COLOR: #000000; TEXT-DECORATION: underline}
  21. A:active {COLOR: #000000; TEXT-DECORATION: underline}
  22. A:hover {COLOR: #990000; TEXT-DECORATION:none}

Explicación:

- primeramente a la etiqueta BODY le aplicamos color de fondo blanco, color de texto negro, sin margen, fuentes arial, tamaño 12 px.

- despues incluimos una clase "head", esto sólo afectará al elemento que tenga definida esta clase, por ejemplo: <td class="head">

- luego incluimos un estilo para un elemento concreto que debe ser identificado con un id. Por ejemplo: <table id="box">

- por últimos aplicamos estilos a todos los enlaces (etiqueta A) que haya en la web de forma que tendrán un color negro con subrayado y cuando el cursor pase por encima se coloreará a rojo sin subrayado.

 
Salu2

]]> http://www.bitacoraweb.com/2008/06/03/estilos-css/feed/ Redimensión de imágenes con PHP http://www.bitacoraweb.com/2008/05/30/redimension-de-imagenes-con-php/ http://www.bitacoraweb.com/2008/05/30/redimension-de-imagenes-con-php/#comments Fri, 30 May 2008 09:44:33 +0000 David http://www.bitacoraweb.com/?p=18 Hoy vamos a hablar acerca de la redimensión de imágenes. Hay muchas cosas que decir acerca de esto, de hecho podríamos escribir un libro porque este tema da mucho que hablar por la gran cantidad de opciones y configuraciones que hay que tener en cuenta.

Básicamente tenemos dos opciones a la hora de redimensionar, la más común pero limitada es la librería GD que viene normalmente instalada en todos los servidores junto con PHP, y luego tenemos ImageMagick que últimamente se está empezando a ver en los nuevos servidores que nos porporcionan los ISP.

En el caso de la librería GD, debemos tener en cuenta que consume muchos recursos del servidor, por lo que es bastante lento. Esto provoca que si el archivo de origen es muy grande tengamos problemas de memoria memory_limit y tiempo de ejecución max_execution_time. Podemos modificar los valores del php.ini o mediante el archivo .htaccess, pero aún así no podremos aplicar esta librería para archivos más grandes de 1 ó 2 MB.

Otra limitación es que no podemos utilizar un archivo TIFF como base, aunque la librería soporta bastantes formatos gif, jpeg, png, ... En caso de necesitar redimensionar archivos TIFF o con un gran tamaño deberemos utilizar Imagemagick.

A continuación incluyo un ejemplo para redimensionar una imagen jpeg con la librería GD que ha sido subida mediante un upload de archivos. El script redimensionará la imagen a un ancho máximo de 200 píxeles y la copiará a la carpeta que especifiquemos.

PHP:
  1. $anchura_maxima = 200; //ancho máximo en pixeles
  2. $nombre_temporal = $_FILES['foto']['tmp_name'];
  3. $nombre_archivo = $_FILES['foto']['name'];
  4. $datos = getimagesize($nombre_temporal);
  5.  
  6. //calculo de altura
  7. $ratio = ($datos[0] / $anchura_maxima);
  8. $altura = ($datos[1] / $ratio);
  9.  
  10. $img = @imagecreatefromjpeg($nombre_temporal);
  11. $thumb = imagecreatetruecolor($anchura_maxima,$altura);
  12. imagecopyresampled($thumb, $img, 0, 0, 0, 0, $anchura_maxima, $altura, $datos[0], $datos[1]);
  13. ImageJPEG($thumb, "fotos/".$nombre_archivo,75); //copiamos la imagen JPG con compresión 75
  14. imagedestroy($thumb);
  15. imagedestroy($img);

Salu2

]]> http://www.bitacoraweb.com/2008/05/30/redimension-de-imagenes-con-php/feed/ Maquetación básica para Web http://www.bitacoraweb.com/2008/05/29/maquetacion-basica-para-web/ http://www.bitacoraweb.com/2008/05/29/maquetacion-basica-para-web/#comments Thu, 29 May 2008 14:10:27 +0000 David http://www.bitacoraweb.com/?p=16 En el último post de esta serie de consejos básicos para los que se inician en el desarrollo web, comentamos que toda web html debe tener un estructura básica que incluya las etiquetas <html>, <head> y <body>

Hoy vamos a realizar una estructura completa por medio de tablas, para una web típica que tendrá encabezado, menú lateral, contenido y pie de página.

 

 

Debo decir que la maquetación con tablas a día de hoy no está recomendada, sino que se recomienda el uso de capas, pero creo que para alguien que se inicia es mucho más fácil de entender el uso de las tablas y el resultado será igualmente válido.

Para definir una tabla con html debemos usar la etiqueta <table></table>, dentro incorporaremos filas <tr></tr> y columnas o celdas <td></td>. Podemos incorporar atributos a la tabla para espaciado de celdas cellspacing y margen cellpadding, incluyendo el valor del espaciado y margen en píxeles. También podemos incorporar un borde, border="1" y un color de fondo hexadecimal, bgcolor="#000000".

Para las celdas podemos incorporar un atributo de alineamiento del texto vertical valign="top", valign="middle", valign="bottom" o si queremos alineamiento horizontal align="left", align="right", align="center".

Podemos anidar todas las tablas que queramos, para ello sólo debemos incorporar la nueva tabla anidada dentro de una celda <td></td>

Utilizaremos para el ejemplo una tabla principal con un ancho fijo width="860" y una altura que ocupará el 100% de la ventana, height="100%".

Hemos limitado la cabecera y el pie con una altura fija (height) mientras que la sección central no está limitada por lo que ocupará el espacio restante.

El lateral está limitado a una anchura de 200, y la sección de contenido ocupará el ancho restante. Muy importante esta tabla que está anidada tenga la anchura y altura total de la celda donde está situada, width y height 100%.

Ni que decir tiene que esto ya lo hace frontpage y dreamweaver por nosotros, pero creo interesante tener una base de html.

HTML:
  3. <title>Título de la página</title>
  4. </head>
  5. <body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
  7. <table border="1" width="860" height="100%" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">
  8.     <tr>
  9.         <td bgcolor="#cccccc" align="center" height="100">
  10.             CABECERA
  11.         </td>
  12.     </tr>
  13.     <tr>
  14.         <td>
  15.             <table border="0" width="100%" height="100%" cellspacing="0" cellpadding="0">
  16.                 <tr>
  17.                     <td bgcolor="#808080" align="center" width="200">
  18.                         LATERAL
  19.                     </td>
  20.                     <td bgcolor="#f3f3f3" align="center">
  21.                         CONTENIDO
  22.                     </td>
  23.                 </tr>
  24.             </table>
  25.         </td>
  26.     </tr>
  27.     <tr>
  28.         <td bgcolor="#cccccc" align="center" height="50">
  29.             PIE DE PÁGINA
  30.         </td>
  31.     </tr>
  32. </table>
  33. </center>
  34. </body>
  35. </html>

 

Salu2

]]> http://www.bitacoraweb.com/2008/05/29/maquetacion-basica-para-web/feed/ Web multilingüe con PHP http://www.bitacoraweb.com/2008/05/28/web-multilingue-con-php/ http://www.bitacoraweb.com/2008/05/28/web-multilingue-con-php/#comments Wed, 28 May 2008 15:33:31 +0000 David http://www.bitacoraweb.com/?p=15 En esta ocasión vamos a ver lo sencillo que es tener un sistema multilingüe para nuestra web. Sólo debemos incorporar el siguiente código al inicio de todas las páginas.

PHP:
  1. //si no existe la variable lang:
  2. //comprobamos si existe la cookie
  3. //en caso contrario asignamos idioma del navegador
  4. $lang=$_GET['lang'];
  5. if($lang==false){
  6.     if($_COOKIE["lang_cookie"]){$idioma=$_COOKIE["lang_cookie"];}
  7.     else{
  8.         $navegador=substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2);
  9.         if($navegador=='en'){$idioma='en';}
  10.         elseif($navegador=='fr'){$idioma='fr';}
  11.         else{$idioma='es';}
  12.     }
  13. }
  14. else{
  15.         if($lang=='en'){$idioma='en';}
  16.         elseif($lang=='fr'){$idioma='fr';}
  17.         else{$idioma='es';}
  18. }
  19. //enviamos cookie para mantener la selección del usuario
  20. setcookie("lang_cookie",$idioma,time()+3600);
  21.  
  22. echo $idioma;

Este código lo que hará en primer lugar es asignar un idioma a los usuarios nuevos, que será el idioma principal que tenga su navegador. Esto supongo que ya sabréis donde se cambia, pero por si acaso, sólo es necesario ir a Herramientas -> Opciones de Internet -> Idiomas, en nuestro navegador.

Luego podemos poner las típicas banderitas de idiomas con un enlace a cualquier página o $PHP_SELF, incluyendo la variable "lang" con el idioma que proceda. Por ejemplo:

HTML:
  1. <a href="index.php?lang=es">Español</a><br>
  2. <a href="index.php?lang=fr">Français</a><br>
  3. <a href="index.php?lang=en">English</a>

 

Con la variable $idioma que retorna el script, podemos hacer después un include al archivo de idioma en cuestión, que contrendrá las traducciones de los contenidos:

PHP:
  1. include("languages/".$idioma.".php");

Ejemplo de archivo de idioma español, es.php:

PHP:
  1. define('HEADER_TITLE', 'Inicio');
  2. define('CONTENT', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua<br><br>');
  3. define('FOOTER', '&copy; 2008 bitacoraweb.com');
  4. ...

Salu2

]]> http://www.bitacoraweb.com/2008/05/28/web-multilingue-con-php/feed/ Iniciarse con la maquetación http://www.bitacoraweb.com/2008/05/27/iniciarse-con-la-maquetacion/ http://www.bitacoraweb.com/2008/05/27/iniciarse-con-la-maquetacion/#comments Tue, 27 May 2008 15:42:56 +0000 David http://www.bitacoraweb.com/?p=14 Ayer vimos algunos cosejos básicos a la hora de diseñar una web, hoy vamos a ver lo básico para empezar a maquetar ese diseño en HTML.

Para empezar necesitamos un editor. En el mercado existen multitud de ellos, más o menos completos, como puede ser Dreamweaver o FrontPage de MS Office. Para la gente que se inicia yo no recomendaría Dreamweaver, ya que pienso que es mucho más complicado su uso, aunque si es cierto que proporciona muchas más herramientas. El uso de estos dos programas, es adecuado si no conoces el código HTML, ya que hacen ese trabajo por ti.

Yo particularmente, no utilizo ninguno de los dos, ya que me gusta escribir a mano todo el código, así lo controlo perfectamente y no se me incluye código no deseado que normalmente incluyen estos programas. Con el simple editor de notas de windows, puedes escribir el código, pero es más adecuado un editor un poco más potente que te ponga el código en colores, para facilitar la visión, por eso utilizo HomeSite o notepad2.

El código HTML está constituido por TAGS (etiquetas), todo lo que esté contenido dentro de la etiqueta de inicio y la de cierre estará afectado por ella. Ejemplo de estiquetas:

HTML:
  1. <b></b>  negrita
  2. <i></i> cursiva
  3. <u></u> subrayado
  4. <a></a> enlace
  5. ...

 

Las etiquetas pueden tener a su vez atributos, que se incluyen en la etiqueta de inicio, por ejemplo href permite incluir la URL a la que se irá al pinchar en el enlace:

HTML:
  1. <a href="http://www.bitacoraweb.com/">Bitacoraweb</a>

Pues bien, lo que tienen en común todas las web es la estructura básica, con los tags: <html>, que indica que se trata de una página con código html, <head>, es la zona donde se incluyen códigos de optimización para buscadores y algunos scripts, <body>, zona donde se va a incluir el contenido de la web.

 

HTML:
  3. <title>Título de nuestra web</title>
  4.  
  5.  
  6. </head>
  8.  
  9.  
  10.  
  11.  
  12. </body>
  13. </html>

Este código ya podríamos guardarlo en un archivo index.html, si lo abrimos con el el explorador, veremos que la ventana es nombrada mediante la etiqueta <title></title> dentro de <head></head>

Salu2

]]> http://www.bitacoraweb.com/2008/05/27/iniciarse-con-la-maquetacion/feed/ A quién te pareces http://www.bitacoraweb.com/2008/05/27/a-quien-te-pareces/ http://www.bitacoraweb.com/2008/05/27/a-quien-te-pareces/#comments Tue, 27 May 2008 11:57:06 +0000 David http://www.bitacoraweb.com/?p=11 Vaya risas que pasamos con esta web en la oficina... y la pregunta es ¿Cómo estará hecho? ¿en que se basan para el reconocimiento facial? Cuando lo hice yo me salio que era clavadito a Mary-Kate Olsen... je je je

 

Está claro que han debido usar un software de reconocimiento facial, igual al que ofrecen en esta empresa. Supongo que instándolo en el servidor, podremos utilizarlo con el comando system() o exec() de PHP, siempre que estemos con SAFE_MODE desactivado.

Salu2

]]> http://www.bitacoraweb.com/2008/05/27/a-quien-te-pareces/feed/