Búsqueda personalizada

27 nov 2013

Envío de un correo HTML con PHP

<?php// Varios destinatarios
$para  = 'aidan@example.com' . ', '; 
// atención a la coma
$para .= 'wez@example.com';
// subject
$titulo = 'Recordatorio de cumpleaños para Agosto';
// message
$mensaje = '
<html>
<head>
  <title>Recordatorio de cumpleaños para Agosto</title>
</head>
<body>
  <p>¡Estos son los cumpleaños para Agosto!</p>
  <table>
    <tr>
      <th>Quien</th><th>Día</th><th>Mes</th><th>Año</th>
    </tr>
    <tr>
      <td>Joe</td><td>3</td><td>Agosto</td><td>1970</td>
    </tr>
    <tr>
      <td>Sally</td><td>17</td><td>Agosto</td><td>1973</td>
    </tr>
  </table>
</body>
</html>
';// Para enviar un correo HTML mail, la cabecera Content-type debe fijarse
$cabeceras  = 'MIME-Version: 1.0' . "\r\n";
$cabeceras .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
// Cabeceras adicionales
$cabeceras .= 'To: Mary <mary@example.com>, Kelly <kelly@example.com>' . "\r\n";
$cabeceras .= 'From: Recordatorio <cumples@example.com>' . "\r\n";
$cabeceras .= 'Cc: birthdayarchive@example.com' . "\r\n";
$cabeceras .= 'Bcc: birthdaycheck@example.com' . "\r\n";
// Mail it
mail($para, $titulo, $mensaje, $cabeceras);?>
Fuente: http://php.net/manual/es/function.mail.php
Por: Unknown 27 nov 2013
Leer más

25 nov 2013

Lista de ciudades de España HTML

Os ahorro el trabajo de hacer la lista de ciudades de España en select. Espero que me lo agradescais porque yo lo he tenido que hacer a mano. Jajaja.


<select name="provincia" size="1">
            <option value='selecciona'>Selecciona</option>
            <option value='A Coruña' >A Coruña</option>
            <option value='álava'>álava</option>
            <option value='Albacete' >Albacete</option>
            <option value='Alicante'>Alicante</option>
            <option value='Almería' >Almería</option>
            <option value='Asturias' >Asturias</option>
            <option value='ávila' >Ávila</option>
            <option value='Badajoz' >Badajoz</option>
            <option value='Barcelona'>Barcelona</option>
            <option value='Burgos' >Burgos</option>
            <option value='Cáceres' >Cáceres</option>
            <option value='Cádiz' >Cádiz</option>
            <option value='Cantabria' >Cantabria</option>
            <option value='Castellón' >Castellón</option>
            <option value='Ceuta' >Ceuta</option>
            <option value='Ciudad Real' >Ciudad Real</option>
            <option value='Córdoba' >Córdoba</option>
            <option value='Cuenca' >Cuenca</option>
            <option value='Gerona' >Gerona</option>
            <option value='Girona' >Girona</option>
            <option value='Las Palmas' >Las Palmas</option>
            <option value='Granada' >Granada</option>
            <option value='Guadalajara' >Guadalajara</option>
            <option value='Guipúzcoa' >Guipúzcoa</option>
            <option value='Huelva' >Huelva</option>
            <option value='Huesca' >Huesca</option>
            <option value='Jaén' >Jaén</option>
            <option value='La Rioja' >La Rioja</option>
            <option value='León' >León</option>
            <option value='Lleida' >Lleida</option>
            <option value='Lugo' >Lugo</option>
            <option value='Madrid' >Madrid</option>
            <option value='Malaga' >Málaga</option>
            <option value='Mallorca' >Mallorca</option>
            <option value='Melilla' >Melilla</option>
            <option value='Murcia' >Murcia</option>
            <option value='Navarra' >Navarra</option>
            <option value='Orense' >Orense</option>
            <option value='Palencia' >Palencia</option>
            <option value='Pontevedra'>Pontevedra</option>
            <option value='Salamanca'>Salamanca</option>
            <option value='Segovia' >Segovia</option>
            <option value='Sevilla' >Sevilla</option>
            <option value='Soria' >Soria</option>
            <option value='Tarragona' >Tarragona</option>
            <option value='Tenerife' >Tenerife</option>
            <option value='Teruel' >Teruel</option>
            <option value='Toledo' >Toledo</option>
            <option value='Valencia' >Valencia</option>
            <option value='Valladolid' >Valladolid</option>
            <option value='Vizcaya' >Vizcaya</option>
            <option value='Zamora' >Zamora</option>
            <option value='Zaragoza'>Zaragoza</option>
          </select>

Mercedes Conde Blanco
Por: Unknown 25 nov 2013
Leer más

20 nov 2013

Contar y limitar caracteres de un textarea con JavaScript

Aquí os dejo un código JavaScript que cuenta los caracteres de un textarea, definiendo el límite e impide que se escriba más caracteres de dicho límite.


<html> 
<head> 
<SCRIPT language="JavaScript" type="text/javascript"> 

function contador (campo, cuentacampo, limite) { 
if (campo.value.length > limite) campo.value = campo.value.substring(0, limite); 
else cuentacampo.value = limite - campo.value.length; 
} 

</script> 
</head> 
<body> 
<center> 
<form name="form1"> 
sólo puedes entrar 125 caracteres. 
<textarea name="mensaje" wrap=physical cols="28" rows="4" onKeyDown="contador(this.form.mensaje,this.form.remLen,125);" onKeyUp="contador(this.form.mensaje,this.form.remLen,125);"></textarea> 
<input type="text" name="remLen" size="3" maxlength="3" value="125" readonly>te quedan todavía 
</form> 
</center> 
</body> 
</htm>

Espero que les sirva de ayuda.

Mercedes Conde Blanco
Por: Unknown 20 nov 2013
Leer más

19 nov 2013

Canvas a partir de datos MySql

Voy a copiar aquí un código que me parece aún más interesante que el del artículo anterior.
Con este código se crea el gráfico a partir de datos de la base de datos.

HTML
<!DOCTYPE html>
<html><head><title>Nombre de la página</title><link rel=”STYLESHEET” href=”nombre_del_archivo_de_estilo.css”/></head>
<body>
<center><canvas id=”myCanvas” width=”1280″ height=”720″ style=”border:1px solid #FFFFFF;”>Your browser does not support the HTML5 canvas tag.</canvas></center>

JavaScript
<script>
function draw(inicio, valor)
{
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”); // En 2D
// Defines el ancho
ctx.width=1280;
var ancho=ctx.width;
//Defines el alto
ctx.height=720;
var alto=ctx.height;
// Crear gradiente para el fondo
var grd=ctx.createLinearGradient(0,0,ancho,0);
grd.addColorStop(0,”black”); // Punto y color de inicio
grd.addColorStop(0.5,”#309a07″); // Color intermedio
grd.addColorStop(1,”black”); //Color final
// Rellenar el fondo con el gradiente
ctx.fillStyle=grd;
ctx.fillRect(0,0,ancho,alto);
// Dibujo los datos
// El punto de partida es x=inicio, y=alto (el alto es abajo del todo). La x la vamos moviendo a la derecha, la y es fija abajo del todo.
ctx.moveTo(inicio,alto);
// Movemos la línea hacia arriba en la variable y, manteniendo la x fija por ser una barra vertical
ctx.lineTo(inicio,valor); 
ctx.lineWidth=10; // Definimos el grosor de la línea
ctx.globalAlpha = 0.99; // Definimos la transparencia
ctx.strokeStyle = “white”; // Color de la línea
ctx.stroke();
}
</script>

PHP
<?php
//Llamamos al archivo que nos conecta a la base de datos
require_once(“archivo_con_los_datos_de_conexion_a_la_base.inc”); 
// Hacemos la petición de datos a la base
$salida=mysql_db_query (“nombre_de_la_base_de_datos”, “Select * from nombre_de_la_tabla”);
$numdatos=mysql_num_rows ($salida);
for ($a=0;$a<$numdatos;$a++)
{
$dato=mysql_fetch_row($salida); // Extraemos una fila
$inicio=$dato[0]; //En el ejemplo, la primera columna era una simple key autoincrementable
$inicio=$inicio*20; // Vamos moviendo 20 pixeles a la derecha cada dato
$valor=$dato[1]; //En el ejemplo, la segunda columna es el dato a dibujar
$valor=$valor*7.2; //La altura era de 720 y los datos de 0 a 100. Escalamos
$valor=720-$valor; // Canvas tiene las coordenadas (0,0) arriba a la izquierda. Invertimos la y para que empiece desde abajo.
echo “<script>draw($inicio, $valor);</script>”; // Llamamos a la función que dibuja
}
?>
</body>
</html>

Un ejemplo de cómo puede quedar:


Código y gráfico procedente de la página : http://www.robermartinez.com/blog/2012/10/27/canvas-con-html5-y-php-a-partir-de-datos-sql/

Gracias por el aporte del autor
Por: Unknown 19 nov 2013
Leer más

Sencilla Gráfica en 2D con canvas html

Aquí os pongo un ejemplo de gráfica en canvas 2D que he pillado por ahí, es de código libre, así que lo podeis usar a vuestro antojo:


<!DOCTYPE html>
<html lang="es">
 
  <head>
    <meta charset="utf-8"/>
    <title>Dibujo con Canvas</title>
  </head>

  <script type="text/javascript">
            function dibujar(){

                var ctx = document.getElementById ('nuestroCanvas');
                var contenido = ctx.getContext ('2d');
                var imagenGrafica = new Image();
                imagenGrafica.src = 'grafica.png';
                imagenGrafica.onload = function(){

                        //Cargo la imagen en la posición
                        contenido.drawImage(imagenGrafica,0,0);
                       
                        //Indicar el grosor de la línea
                        contenido.lineWidth = 4;
                        //Dibujo las líneas para simular la gráfica
                        contenido.beginPath();

                        contenido.moveTo(16,156);
                        contenido.lineTo(77,66);
                        contenido.lineTo(135,100);
                        contenido.lineTo(194,200);
                        contenido.lineTo(255,185);
                        contenido.lineTo(316,195);
                        contenido.lineTo(376,155);
                        contenido.lineTo(436,185);
                       
                        contenido.strokeStyle = "hsla(333, 71%, 53%, 1)";
                        contenido.stroke();

                         //Indicar el grosor de la línea
                        contenido.lineWidth = 1;
                         //Dibujo las líneas para simular la gráfica
                        contenido.beginPath();

                        contenido.moveTo(16,126);
                        contenido.lineTo(77,176);
                        contenido.lineTo(135,160);
                        contenido.lineTo(194,100);
                        contenido.lineTo(255,155);
                        contenido.lineTo(316,225);
                        contenido.lineTo(376,85);
                        contenido.lineTo(436,185);
                       
                        contenido.strokeStyle = "hsla(120, 100%, 50%, 1)";
                        contenido.stroke();



                }
            }


</script>
 
  <!--Este código ha sido realizado por @eneakao, puedes utilizarlo libremente-->
  <body onload="dibujar()">
    <canvas id="nuestroCanvas" width="451" height="274"></canvas>
  </body>

</html>

Aquí os podeis descargar el ejemplo.

Espero que os sirva.
Por: Unknown
Leer más

12 nov 2013

Etiqueta en imagen cuando pasas el cursor - Tooltip

Ahora vamos a ver como hacer un Tooltip de forma sencilla. Para quien no sepa que es un tooltip, es como una especie de cartelito que aparece cuando ponemos el ratón encima de una imagen o un enlace.

Aqui el CSS:


.tooltip { display: inline; position: relative; }
.tooltip:hover:after { bottom: 26px; content: attr(title); /* este es el texto que será mostrado */ left: 20%; position: absolute; z-index: 98; /* el formato gráfico */ background: rgba(255,255,255, 0.2); /* el color de fondo */ border-radius: 5px; color: #FFF; /* el color del texto */ font-family: Georgia; font-size: 12px; padding: 5px 15px; text-align: center; text-shadow: 1px 1px 1px #000; width: 150px; }
.tooltip:hover:before { bottom: 20px; content: ""; left: 50%; position: absolute; z-index: 99; /* el triángulo inferior */ border: solid; border-color: rgba(255,255,255, 0.2) transparent; border-width: 6px 6px 0 6px; }

Y aquí el HTML:


< a class="tooltip" href="" title="Diesel, 80.000km ...">Coche


Ejemplo: Coche




Mercedes Conde Blanco
Por: Unknown 12 nov 2013
Leer más

8 nov 2013

Mapa interactivo de España -> use maps html


Me surgió la necesidad de encontrar un mapa interactivo de españa, con sus enlaces para cada ciudad. Estuve buscando pero no encontré nada. Al final eché mano de viejos conocimientos del Gimp e hice el mío propio, dejo aquí la imagen y el código del mapeado.



Y aquí el código del mapeado:


<img src="Sin nombre" width="300" height="208" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Mercedes Conde -->
<area shape="poly" coords="54,15,67,26,84,20,84,10,86,2" href="lacoruña" />
<area shape="poly" coords="61,25,57,34,66,40,90,32,83,22" href="pontevedra" />
<area shape="poly" coords="66,42,81,47,99,44,102,32,89,32" href="orense" />
<area shape="poly" coords="87,2,83,22,90,31,100,32,101,23,96,3" href="lugo" />
<area shape="poly" coords="96,5,102,22,128,19,144,9" href="asturias" />
<area shape="poly" coords="101,23,102,37,128,42,133,36,136,16" href="leon" />
<area shape="poly" coords="137,19,154,25,157,17,168,13,160,7,141,11" href="cantabria" />
<area shape="poly" coords="164,9,165,16,170,22,178,15,180,10" href="vizcaya" />
<area shape="poly" coords="182,13,176,20,184,20,189,13" href="gipuzcua" />
<area shape="poly" coords="168,19,170,27,180,31,184,20" href="alava" />
<area shape="poly" coords="136,20,132,38,152,46,153,44,144,33,150,23" href="palencia" />
<area shape="poly" coords="125,40,127,61,141,62,145,55,156,52,152,44" href="valladolid" />
<area shape="poly" coords="97,44,111,58,128,61,125,42,102,38" href="zamora" />
<area shape="poly" coords="147,34,160,52,170,42,169,22,164,12,159,12,150,27" href="burgos" />
<area shape="poly" coords="171,42,191,44,191,36,172,29,168,28" href="larioja" />
<area shape="poly" coords="180,30,196,43,206,17,187,14" href="navarra" />
<area shape="poly" coords="204,25,210,43,224,55,233,53,230,48,234,43,234,24" href="huesca" />
<area shape="poly" coords="234,22,235,43,231,49,235,55,246,48,252,39,255,28" href="lleida" />
<area shape="poly" coords="254,29,278,48,281,30,276,25,265,27" href="girona" />
<area shape="poly" coords="247,48,260,61,278,47,254,30" href="barcelona" />
<area shape="poly" coords="231,54,228,69,235,74,244,63,258,57,248,49" href="tarragona" />
<area shape="poly" coords="227,68,219,73,208,90,216,96,226,96,236,74" href="castellon" />
<area shape="poly" coords="189,44,185,60,197,67,205,62,218,56,220,50,207,38,205,25" href="zaragoza" />
<area shape="poly" coords="197,66,193,80,206,88,230,66,230,53,221,53" href="teruel" />
<area shape="poly" coords="160,51,168,61,176,59,183,64,189,62,184,58,188,44,172,42" href="soria" />
<area shape="poly" coords="166,59,161,67,168,80,170,85,184,73,194,79,197,68,189,63,178,64" href="guadalajara" />
<area shape="poly" coords="140,62,147,77,166,58,160,52,144,55" href="segovia" />
<area shape="poly" coords="130,63,132,70,118,81,129,86,142,82,148,76,140,62" href="avila" />
<area shape="poly" coords="107,56,98,67,92,70,99,77,99,82,107,81,111,77,118,83,131,68,129,62" href="salamanca" />
<area shape="poly" coords="142,83,160,65,169,85,159,90" href="madrid" />
<area shape="poly" coords="97,81,97,94,86,95,93,108,100,103,110,110,122,108,132,102,125,84" href="caceres" />
<area shape="poly" coords="132,102,149,98,158,107,172,100,166,86,155,91,141,83,125,87" href="toledo" />
<area shape="poly" coords="165,87,173,103,183,107,198,103,203,87,185,74" href="cuenca" />
<area shape="poly" coords="200,100,209,118,224,113,221,95,215,95,203,88" href="valencia" />
<area shape="poly" coords="208,117,209,133,215,137,232,116,225,114" href="alicante" />
<area shape="poly" coords="184,134,199,153,216,140,208,133,208,119,201,118,193,127" href="murcia" />
<area shape="poly" coords="173,104,174,124,183,135,202,117,209,119,200,102" href="albacete" />
<area shape="poly" coords="136,100,132,118,148,127,175,123,173,103" href="ciudadreal" />
<area shape="poly" coords="92,105,93,114,89,124,96,133,113,138,118,132,124,131,122,122,133,116,135,101,110,110" href="badajoz" />
<area shape="poly" coords="185,137,179,151,173,156,173,165,189,165,198,152" href="almeria" />
<area shape="poly" coords="181,131,168,146,146,152,146,159,158,166,174,166" href="granada" />
<area shape="poly" coords="148,125,146,141,152,150,171,145,179,131,174,124" href="jaen" />
<area shape="poly" coords="118,132,127,146,135,143,140,155,154,150,147,140,146,127,132,117,121,122,124,131" href="cordoba" />
<area shape="poly" coords="118,134,109,137,103,143,106,147,105,159,111,162,129,161,138,152,134,143,126,146" href="sevilla" />
<area shape="poly" coords="104,161,104,168,112,178,123,183,127,179,124,161" href="cadiz" />
<area shape="poly" coords="124,161,128,177,138,172,157,165,146,154,136,152" href="malaga" />
<area shape="poly" coords="92,130,83,143,87,156,105,161,104,149,101,143,108,137" href="huelva" />
<area shape="poly" coords="123,189,125,196,137,194" href="ceuta" />
<area shape="poly" coords="153,199,166,202,167,194" href="melilla" />
<area shape="poly" coords="11,169,10,197,79,197,80,168" href="tenerife" />
<area shape="poly" coords="240,106,249,123,294,95,270,77,265,85" href="mallorca" />
</map>



Espero que os sirva.
Por: Unknown 8 nov 2013
Leer más

6 nov 2013

Gradientes de colores para todos los navegadores CSS3 

 /* navegadores sin soporte */
    background: black url(images/cabecera_degradado.jpg) repeat-x;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(black));
    /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, black, white);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, black, white);
    /* Opera 11.10+ */
    background: -o-linear-background(top, black, white);
    /* IE 10 */
    background: -ms-linear-background(top, black, white);
    /* estándar */
    background: linear-background(top, black, white);
Por: Unknown 6 nov 2013
Leer más

4 nov 2013

Plantillas para WordPress

Si estáis buscando plantillas para WordPress gratuitas, os recomiendo la página

http://www.themesparawordpress.com/


Si sabéis de otras buenas páginas, os ánimo a dejarmelas en comentarios. Un saludo.
Por: Unknown 4 nov 2013
Leer más
Suscribirse a: Entradas (Atom)

Más visitas para tu blog

Más visitas para tu blog

Vuestras visitas:

Trucos Blogger

Sobre Google

Los + vistos en la semana

 

© 2014 Aplicaciones ...---Chey---.... All rights resevered. Designed by Chey Developer

Back To Top
Recibe las actualizaciones directo a tu correo