BlueProgramming: HTML

Enviar HTML E-Mails con PHPMailer

in CSS, descargar, download, Email, Enviar, Gmail, HTML, PHP, PHPMailer - on 12:08 p.m. - No comments

1- Averiguar que version de PHP tienes instalada.

<?php
echo phpversion();
?>

2- De acuerdo a la version que tengas descargar PHPMailer desde aqui .
3- Luego descomprimir el archivo que descargaste en la carpeta de tu proyecto.
4- Crear el archivo index e incluir el siguiente codigo:

<?php
$destinatario = 'destinatario@algo.com';
$nombre = 'Juana';
$apellido = 'Almonte';

require("PHPMailer-master/class.phpmailer.php");

$mail = new PHPMailer();

$mail->IsSMTP(); // Enviar via SMTP
$mail->Host = "smtp.gmail.com"; // SMTP servers
$mail->SMTPAuth = true; // encender SMTP autenticacion
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
$mail->Username = "mi_email@gmail.com"; // aqui escribe tu correo de gmail
$mail->Password = "mi_contrasena"; // aqui escribe tu contrasena del correo

$mail->From = "mi_email@gmail.com";
$mail->FromName = "PHPMailer prueba";
$mail->AddAddress($destinatario,$nombre.' '.$apellido);
$mail->AddReplyTo("mi_email@gmail.com","PHPMailer.com");

$mail->WordWrap = 50; // establecer word wrap

$mail->IsHTML(true); // enviar como HTML

$mail->Subject = "PHPMailer mensaje de prueba";
$mail->Body = "
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>PHPMailer E-mail</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
</head>
<body style='margin: 0; padding: 0;'>

<table width='600px' bgcolor='#ffffff' style='border:1px solid #CCCCCC; color: #696969; border-collapse: collapse; padding:15px 10px 20px 10px; margin: 5px 0;'>
<tr>
<td width='100%' bgcolor='#1fc8f2' style='padding: 5px; letter-spacing: -3px; color: #ffffff; font-size: 24px; border-bottom: 2px dashed #f2821f;'> TuEmail </td>
<td width='30%'> </td>
</tr>

<tr>
<td style='padding: 0 15px;'>Hola <strong>$nombre $apellido,</strong></td>
<td width='30%'> </td>
</tr>

<tr>
<td style='padding: 0 15px;'> Este es un email de prueba </td>
<td width='30%'> </td>
</tr>

<tr>
<td bgcolor='#EFEFEF' style='padding: 0 0 10px 5px;'>Gracias por aprender con nosotros.<br /> <i> BlueProgramming Staff </i> </td>
<td width='30%'> </td>
</tr>

</table>
</body>
</html>
";
$mail->AltBody = "Este es un mensaje de solo texto";

if(!$mail->Send())
{
echo "el mensaje no fue enviado";
echo "Mailer Error: " . $mail->ErrorInfo;
exit;
}

echo "El mensaje ha dijo enviando";

?>

5- Editar el codigo de acurdo a tu necesidad ej
La variable $destinatario cambiar por el correo al que quieras que llegue este correo de prueba.
En este ejemplo se envia mediante el server de Gmail por lo que es obligatio en username escribir un correo de tu propiedad (desde el que se enviara el email) que sea de Gmail y en password escribir la contrasena de ese correo.

En la parte del body o cuerpo de el mensaje esta todo el codigo HTML que se enviara al correo. Algunas notas que hay que tener en cuenta al enviar correos HTML son las siguientes:

a) Procura usar la menor cantidad de CSS para el estilo del mensaje. En vez de eso se recomienda usar los atributos HTML como por ejemplo para el color de fondo la una tabla bgcolor en vez de background-color de CSS.

b) Cuando asignes colores siempre hacerlo de la forma larga de seis caracteres debido a la que forma corta de tres no siempre va a funcionar.

Puedes descargar este ejemplo desde aqui.

Elementos transparentes con CSS

in bordes, CSS, div, HTML, imagen, letras, opacity, rgba, transparencia, transparente - on 3:02 p.m. - No comments

Es posible volver elementos transparentes con CSS utilizando la propiedad opacity. En caso de que se desee solo el color de fondo transparente y las letras o bordes opacos se ultiliza los colores rgba. El grado de tranparencia se puede regular segun se desee.

Ejemplo:

Imagen transparente utilizando la propiedad opacity


<style>

img.trans_imagen {

opacity:0.5;

}

</style>



<img class="trans_imagen" src="img/gato.jpg" />

Div transparente utilizando la propiedad opacity.

*Nota: Cuando se utiliza la propiedad opacity para dar transparencia a un div todos los elementos y propiedades relacionados al div tambien se haran trasparentes.

Div transparente con letras y/o bordes opacos

Para esto se utilizan los colores rgba en vez de la propiedad opacity.

Manipulacion de tablas HTML con DataTables

in DataTables, español, filtrar, grid, HTML, instalar, javascript, JQuery, ordenar, PHP, plugin, sort, tabla - on 7:57 p.m. - No comments

En mi experiencia en mejor plugin para la manipulacion de datos en tablas HTML es DataTables. El mismo le permitira ordenar, buscar y mostrar los datos de sus tablas de una forma dinamica, gracias a que es un plugin de la libreria de javascript JQuery.

A continuacion un ejemplo de como instalar DataTable con datos traidos desde la base de datos.

1. Descargar la version mas reciente de DataTable en la siguiente direccion: http://datatables.net/download/, extraer el archivo .zip

2. Ejecutar el siguiente script para la creacion de la base de datos:

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8 */;

-- Database: `datatable_ejemplo`

CREATE DATABASE IF NOT EXISTS `datatable_ejemplo` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;

USE `datatable_ejemplo`;

-- --------------------------------------------------------

-- Table structure for table `cliente`

CREATE TABLE IF NOT EXISTS `cliente` (

`codigo` int(11) NOT NULL AUTO_INCREMENT,

`nombre` varchar(25) NOT NULL,

`apellido` varchar(25) NOT NULL,

`direccion` varchar(45) NOT NULL,

`telefono` varchar(12) NOT NULL,

PRIMARY KEY (`codigo`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

-- Dumping data for table `cliente`

INSERT INTO `cliente` (`codigo`, `nombre`, `apellido`, `direccion`, `telefono`) VALUES

(1, 'Maria', 'Lopez', 'c/ 20 Los Ramos', '829-234-2344'),

(2, 'Juan', 'Gomez', 'c/ D Las Flores', '849-322-2344'),

(3, 'Flavia', 'Pichardo', 'c/77 El tronco', '809-345-6420');

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

3. Abrir un documento php con el formato HTML correspondiente.

4. Hacer la conexion a la base de datos:

<?php

mysql_connect('localhost','root','') or die ("No se pudo conectar a la base de datos");

mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");

5. Crear la tabla html que contendra nuestros datos. Es muy importante que la tabla cuente con las etiquetas <theader> y <tfooter> para que el DataTable pueda funcionar. El siguiente es mi codigo para el ejemplo.

<thead>

<tr>

<th> <strong>Codigo </strong> </th>

<th> <strong>Nombre </strong> </th>

<th> <strong>Apellido </strong> </th>

<th> <strong>Direccion </strong> </th>

<th> <strong>Telefono </strong> </th>

</tr>

</thead>

<tbody>

<?php

$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";

$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();

while ($fila = mysql_fetch_array($re)) {

echo '<tr">

<td>' . $fila['codigo'] . '</td>

<td>' . $fila['nombre'] . '</td>

<td>' . $fila['apellido'] . '</td>

<td>' . $fila['direccion'] . '</td>

<td>' . $fila['telefono'] . '</td>

</tr>';

}

</tbody>

</table>

6. Luego hay que anadir dentro de las etiquetas <head> el enlace a los estilos css para el dataTable de la siguiente manera:

@import "DataTables-1.9.4/media/css/jquery.dataTables.css";

</style>

7. Finalmente necesario insertar justo despues del cierre de la etiqueta <body> los siguientes enlaces:

$(document).ready(function() {

$('#datatables').dataTable({

"aaSorting": [[0, "desc"]],

"sPaginationType": "full_numbers",

"bAutoWidth": false,

"oLanguage": {

"sLengthMenu": "Mostrar _MENU_ ",

"sZeroRecords": "No existen datos para esta consulta",

"sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",

"sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",

"sInfoFiltered": "(De un maximo de _MAX_ registros)",

"sSearch": "Buscar: _INPUT_",

"sEmptyTable": "No hay datos disponibles para esta tabla",

"sLoadingRecords": "Por favor espere - Cargando...",

"sProcessing": "Actualmente ocupado",

"sSortAscending": " - click/Volver a ordenar en orden Ascendente",

"sSortDescending": " - click/Volver a ordenar en orden descendente",

"oPaginate": {

"sFirst": "Primero",

"sLast": "Ultimo",

"sNext": "Siguiente",

"sPrevious": "Anterior"

}

});

})

</script>

El resultado deberia lucir asi:

Este es mi codigo completo:

<?php
mysql_connect('localhost', 'root', '') or die("No se pudo conectar a la base de datos");
mysql_select_db('datatable_ejemplo') or die("No se pudo seleccionar la base de datos");
?>
<html>
<title> DataTable Ejemplo </title>
<head>
<style type="text/css" title="currentStyle">

@import "DataTables-1.9.4/media/css/jquery.dataTables.css";

</style>
</head>

<body>

<table id="datatables">
<thead>
<tr>
<th> <strong>Codigo </strong> </th>
<th> <strong>Nombre </strong> </th>
<th> <strong>Apellido </strong> </th>
<th> <strong>Direccion </strong> </th>
<th> <strong>Telefono </strong> </th>
</tr>
</thead>
<tbody>
<?php

$sql = "SELECT codigo, nombre, apellido, direccion, telefono FROM cliente";
$re = mysql_query($sql) or die("Error al ejecutar la consulta") . mysql_error();

while ($fila = mysql_fetch_array($re)) {

echo '<tr">

<td>' . $fila['codigo'] . '</td>
<td>' . $fila['nombre'] . '</td>
<td>' . $fila['apellido'] . '</td>
<td>' . $fila['direccion'] . '</td>
<td>' . $fila['telefono'] . '</td>

</tr>';

}

?>
</tbody>
</table>
</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script src="DataTables-1.9.4/media/js/jquery.dataTables.js" type="text/javascript"> </script> 

<script type="text/javascript" charset="utf-8"> 

$(document).ready(function() {

$('#datatables').dataTable({

"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"bAutoWidth": false,

"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ ",
"sZeroRecords": "No existen datos para esta consulta",
"sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(De un maximo de _MAX_ registros)",
"sSearch": "Buscar: _INPUT_",
"sEmptyTable": "No hay datos disponibles para esta tabla",
"sLoadingRecords": "Por favor espere - Cargando...",
"sProcessing": "Actualmente ocupado",
"sSortAscending": " - click/Volver a ordenar en orden Ascendente",
"sSortDescending": " - click/Volver a ordenar en orden descendente",

"oPaginate": {
"sFirst": "Primero",
"sLast": "Ultimo",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},

}
});

})

</script>

</html>

BlueProgramming

Enviar HTML E-Mails con PHPMailer

Elementos transparentes con CSS

Imagen transparente utilizando la propiedad opacity

Div transparente utilizando la propiedad opacity.

Div transparente con letras y/o bordes opacos

Manipulacion de tablas HTML con DataTables

Populares

Archivo

Acerca de mí