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

jueves, 31 de enero de 2013

Youtube Search API with PHP

In this post we will see how to use the Youtube API to use on our website. In this way we will have a video search engine online.

demo
: http://app.opnway.com/documental/




En este post veremos como utilizar la API de Youtube para utilizarla en nuestra página web. De esta forma tendremos un buscador de videos online.

Demo: 
http://app.opnway.com/documental/



<?php
    if (isset($_POST['q']))
     {
     
      if (!isset($_POST['q']) || empty($_POST['q'])) {
        die ('ERROR: Please enter one or more search keywords');
      } else {
        $q = $_POST['q']." documental";
        $q = ereg_replace('[[:space:]]+', '/', trim($q));
      }
       if (!isset($_POST['i']) || empty($_POST['i'])) {
        $i = 25;
      } else {
        $i = $_POST['i'];
      }
     
      $feedURL = "http://gdata.youtube.com/feeds/api/videos/-/{$q}?orderby=relevance&max-results=6";
      $sxml = simplexml_load_file($feedURL);
      $counts = $sxml->children('http://a9.com/-/spec/opensearchrss/1.0/');
      $total = $counts->totalResults;
      $startOffset = $counts->startIndex;
      $endOffset = ($startOffset-1) + $counts->itemsPerPage;      

      foreach ($sxml->entry as $entry) {
      
        $media = $entry->children('http://search.yahoo.com/mrss/');
        $attrs = $media->group->player->attributes();
        $watch = $attrs['url'];
        $attrs = $media->group->thumbnail[0]->attributes();
        $thumbnail = $attrs['url'];
        $yt = $media->children('http://gdata.youtube.com/schemas/2007');
        $attrs = $yt->duration->attributes();
        $length = $attrs['seconds'];
        $title =
$media->group->title;        

echo "<div style='width: 200px; float: left; margin: 5px;'><b>".substr($media->group->title, 0, 32)."</b>";
        echo "<a href='".$watch."'><img width='100%' src=\"$thumbnail\" alt=\"$title\"/></a>";
    $seg_ini =  $length;
    $horas = floor($seg_ini/3600);
    $minutos = floor(($seg_ini-($horas*3600))/60);
    $segundos = $seg_ini-($horas*3600)-($minutos*60);
echo "<class style='font-style:italic;'>".$horas.'h:'.$minutos.'m:'.$segundos.'s</class>';
    echo "</div>";
  

      }
    }
    ?>

martes, 29 de enero de 2013

Extract title and duration from youtube video with API

Hi
In this script we will see how to use the Youtube API to extract the title, the image and the duration of a video and then save this data in our database, to add a more comfortable video to our website.

Hola
en este script veremos como utilizar la API de Youtube para extraer el titulo, la imagen y la duración de un video para luego guardar estos datos en nuestra base de datos, para añadir de una forma más cómoda videos a nuestras páginas web.




Where $idvideo will $_GET['v'] form url youtube video
Donde $idvideo será la variable $_GET['v'] de la dirección de un video de Youtube


Variables that take the data are: $ title, $ time and $ image
Las variables que llevarán los datos son: $title, $tiempo y $imagen


$url = "http://gdata.youtube.com/feeds/api/videos/".$idvideo;
$doc = new DOMDocument;
$doc->load($url);
$title = $doc->getElementsByTagName("title")->item(0)->nodeValue;
$durations = $doc->getElementsByTagNameNS("*","duration");

if($durations){
$ret["duration"] = $durations->item(0)->getAttribute('seconds');
$seg_ini =  $ret['duration'];

$horas = floor($seg_ini/3600);
$minutos = floor(($seg_ini-($horas*3600))/60);
$segundos = $seg_ini-($horas*3600)-($minutos*60);
$tiempo = $horas.'h:'.$minutos.'m:'.$segundos.'s';



$imagen = 'http://img.youtube.com/vi/'.$idvideo.'/0.jpg';

Extraer información con API Wikipedia con PHP

En este código podremos ver como extraer la información desde la API de Wikipedia mediante PHP y Curl , concretamente exportaremos uno de los párrafos de un artículo concreto.

En la $url podemos ver que consta de varios parámetros, el parámetro page es la página de Albert Einstein, este dato lo obtenemos de la dirección del artículo que nos interesa:
es.wikipedia.org/wiki/Albert_Einstein


In this code we can see how to extract information from Wikipedia API using PHP and Curl, specifically will export one paragraph of a particular article.

In the $ url can see which consists of several parameters, the parameter page is the page of Albert Einstein, this data we get from the direction of the article we are interested in:
es.wikipedia.org / wiki / Albert_Einstein


<?
$url='http://es.wikipedia.org/w/api.php?action=parse&page=Albert_Einstein&format=json&prop=text&section=1&rvsection=2rvparse&rvprop=content';
$ch = curl_init($url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_USERAGENT, "TestScript");
$c = curl_exec($ch);
$json = json_decode($c);
$content = $json->{'parse'}->{'text'}->{'*'};
$final = strip_tags($matches[0], "<p>, <br/>");
echo nl2br($final); 
?>

Otra Opción:
<?
$url = 'http://es.wikipedia.org/w/api.php?action=parse&page=Albert_Einstein&format=json&prop=text&section=1&rvsection=2rvparse&rvprop=content';
$ch = curl_init($url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_USERAGENT, "TestScript");
$c = curl_exec($ch);
$json = json_decode($c);
$content = $json->{'parse'}->{'text'}->{'*'};
$pattern = '#<p>(.*)</p>#Us';
if(preg_match($pattern, $content, $matches))
{
print strip_tags($matches[1]);
}
?>



En este caso, nos mostrará el párrafo del nacimiento de Albert Einstein.

Bienvenidos a mi Blog personal

Bienvenidos a todos a mi blog personal.
Este blog será dedicado a todo lo referente a la progrmación web y a trabajos que voy haciendo, espero que os guste!

Un saludo.