lunes, 27 de mayo de 2013

Texto Difumado para Spoilers en CSS

En alguna ocasión necesitaremos escribir un texto pero que no sea legible directamente por el usuario, en caso de las películas y los spoilers, para ello, podemos escribir el texto y difuminarlo de forma que siempre esté ahí pero no esté visible a no ser que lo selecciones o cambies el CSS mediante jQuery,

Ejemplo:
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
.spoiler {
border: 1px solid gray; color: transparent; margin: 0 !important; text-shadow: 0px 0px 5px rgba(0,0,0,0.9); }

Sombreado CSS en títulos

Hola Mundo
En esta cabecera veremos otro estilo de sombreado utilizando únicamente CSS
h1 { color: #cccccc;  font-family: Helvetica Neue, Arial, Helvetica, sans-serif;  font-size: x-large; text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135; }

jueves, 23 de mayo de 2013

Estilo elegante para títulos con CSS

Hola Mundo,
esto es un test CSS


h1 {
color: #323133;
 font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
letter-spacing: -1px;
text-decoration: none; 
text-shadow: 1px 1px #fff, 0 0 #0e0e0e, 2px 3px 1px #e3e3e3; 
text-transform: none; 
word-spacing: -2px;
}
Aquí os propongo un sencillo estílo CSS con un sombreado en blanco y gris para vuestras títulos web.

martes, 30 de abril de 2013

Selectores de color en HTML5


En HTML5 se incorporaron diferentes tipos de Input para los formularios que pueden hacer tu vida un poco más sencilla sin depender de jQuery.

Hoy veremos el input "color", un selector de color que puede ser muy util a la hora de dar vía libre a los usuarios de tu web para que creen sus propios estilos CSS, tal y como hace Twitter.



<!DOCTYPE html>
<html>
<body>
<form>
Select color:<input type="color" name="color">
</form>
</body>
</html>



Existe otra opción un poco más compleja de implementación, se trata de "Color Picker" de jQuery, tanto en una como en otra tienes la opción de elegir cualquir color en Hexadecimal, elige cual puede ajustarse más a tus necesidades

jueves, 21 de febrero de 2013

Envío de emails con PHP y PHPMailer

En ocasiones nuestra web necesita enviar E-mails a los usuarios, bien mediante un Newsletter o porque en la web se ha generado algún tipo de actividad, por ejemplo un usuario ha contestado a otro, y para que se entere queremos enviarle un correo electrónico.

Para ello utilizaremos la función PHPMailer, la cual es disponible con casi cualquier proveedor de servicios, incluido vuestro correo web @tuweb.com

Podemos utilizar muchas de las opciones que hay por internet pero, después de probar unas y otras, he decidido implementar PHPMailer para el envío de E-Mails mediante PHP, ya que otros enviaban los E-Mail pero desgraciadamente acababan en la carpeta de SPAM.

Un dato muy importante es utilizar la última versión de PHPMailer, ya que si utilizas versiones  muy antiguas puede que envíes mails directamente a SPAM, y muy poca gente revisa esa carpeta.

La última versión de PHPMailer la podeis descargar desde este link de Google Code https://code.google.com/a/apache-extras.org/p/phpmailer/downloads/list

<?php

error_reporting(E_STRICT);
require_once('class.phpmailer.php'); // RUTA ACCESO
$mail             = new PHPMailer(true);
$body             = "Esto es un <b>Email</b> de prueba con etiquetas HTML";

$mail->IsSMTP(); // telling the class to use SMTP
$mail->Host       = "mail.yourdomain.com"; // SMTP server
$mail->SMTPDebug  = 2;                     // enables SMTP debug information (for testing)
                                           // 1 = errors and messages
                                           // 2 = messages only
$mail->SMTPAuth   = true;                  // enable SMTP authentication
$mail->Host       = "mail.yourdomain.com"; // sets the SMTP server
$mail->Port       = 26;                    // set the SMTP port for the GMAIL server
$mail->Username   = "yourname@yourdomain"; // SMTP account username
$mail->Password   = "yourpassword";        // SMTP account password

$mail->SetFrom('name@yourdomain.com', 'Usuario'); //E-mail del emisor

$mail->Subject    = "Titulo de tu Email";

$mail->AltBody    = "Cabecera de tu Mail";
$mail->MsgHTML($body);

$address = "whoto@otherdomain.com";   // E-mail del receptor
$mail->AddAddress($address, "John Doe"); //Nombre del receptor

if(!$mail->Send()) {
  echo "Mailer Error: " . $mail->ErrorInfo;
} else {
  echo "Message sent!";
}

?>


Lo primero que tendreis que hacer es subir los archivos que os habéis descargado del enlace de arriba a vuestro servidor a la carpeta que queráis:
  • class.phpmailer.php
  • class.pop3.php
  • class.smtp.php
 Es importante la ruta de acceso a estos archivos que se incluye en el código anterior sea la misma, ya que si no encuentra los archivos no podrá ejecutar el Script.

Una vez modifiquéis los textos naranjas del código, ya podéis pegarlo en donde queráis que, cuando se abra ese archivo se envíe el Mail o bien podéis crear un archivo para ejecutarlo mediante Cronjobs

Mejorando los tiempos de carga de una web

Muchas veces nos ofuscamos en hacer que las bases de datos realicen las consultas más rápidamente, quitamos peso de las imágenes, depuramos los archivos CSS para que haya el menor texto posible, pero yo personalmente me olvido muchas veces de comprimir la web mediante GZIP.

Las técnicas anteriores son importantes pero esta que os explico es muy sencilla de realizar y los resultados son inmediatos, por tanto no dejaremos de realizar las anteriores optimizaciones.

Dicha técnica la podremos utilizar en servidores Apache, mediante nuestro archivo .htaccess.

Lo que haremos será comprimir los archivos que le digamos para que la transferencia de datos sea menor y por tanto tarde menos en cargar nuestra web.

Simplemente tendremos que crear mediante nuestro IDE (yo utilizo Netbeans) , simplemente con el notepad de windows, o edit de Linux un archivo que se llamará .htaccess y pegaremos en su interior la siguiente línea de código:

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_include file .html$
mod_gzip_item_include file .php$
mod_gzip_item_include file .css$
mod_gzip_item_include file .js$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include handler ^application/x-httpd-php
mod_gzip_item_exclude mime ^image/.*
</IfModule>


y una vez lo hayamos guardado lo subiremos a nuestro servidor a la carpeta raiz de nuestra web (http_docs o public_html dependiendo de nuestro proveedor)

Para realizar esta técnica tendremos que saber si en nuestro servidor está instalado el módulo gzip.

domingo, 10 de febrero de 2013

Md5 mediante javascript

Aquí tenemos un script en javascript que nos ayudará a codificar textos desde el lado del cliente.




Estudiaré las posibilidades que tiene este script, en breves el siguiente post.

Fuente original: http://pajhome.org.uk/crypt/md5/md5.html