Interesante librería Javascript que nos permite mostrar en Canvas (HTML5) el contenido de un PDF. Puede venir muy bien para aplicaciones móviles, ya que en navegación en escritorio normalmente la gente tiene instalado un visor de PDFs.
Simple pdf.js page viewer
/ --
Vía / @badass_js
Interesante script que nos permite saber si un usuario ha visitado alguna página, centrada en sitios sociales tipo Facebook, Digg, … aunque se puede ampliar a cualquier web.
La idea es brillante, se crea un iframe, inserta enlaces a las páginas que deseas saber si ha visitado o no, modifica los estilos para ocultar los enlaces visitados (a:visited {display: none}) y luego pregunta por cada enlace si ha sido visitado o no (el estilo debe ser display: none si ha sido visitado).
No es fiable al 100% pero es bastante efectivo.
Vote! How to Detect the Social Sites Your Visitors Use
Vía / WebAppers
La verdad es que lo sencillo es lo mejor, y para cuando estés en la necesidad de detectar si se produce un cambio en el tamaño de la letra, nada mejor que el script que nos ofrece la gente de A List Apart.
Te puedes preguntar por qué vas a querer detectar el cambio de tipo de letra. Si te interesa tener un sitio accesible a gente con discapacidades, pues es buena idea que pienses en ello, ya que suele ser algo que pueden hacer con frecuencia.
Además de detectar ese cambio, puede ser necesario realizar alguna acción. Por ejemplo, si usamos una imagen para un botón, si cambiamos el tamaño de la letra, la imagen no cambia, por lo que el botón quedará demasiado pequeño para el resto del texto, ¿solución?, si hay cambio de tamaño de letra, sustituimos la imagen por un elemento input botón.
Al principio decÃa que la solución es sencilla, lo cual la hace aún mejor. Se trata de crear una capa que contenga un espacio dentro y que esté oculta. Se guarda el tamaño de la capa y cada cierto tiempo se detecta si ha habido un cambio en este tamaño, si es asÃ, se ha producido un cambio en el tamaño de la letra.
Text-Resize Detection
Demo
Código y ejemplos
Javascript Color Picker es un string que nos permite añadir un selector de color estilo Photoshop. Esta herramienta nos puede ser útil cuando queremos que el usuario seleccione un color, claro, que las ocasiones en las que lo podemos necesitar son bastante escasas.
A parte de las componentes HSV, también se puede utilizar las componentes RGB. Ha sido comprobado en IE5.5, IE6, IE7, FF2, Opera 9 y Safari 2.
Javascript Color Picker
VÃa / dzone
En WHATWG están trabajando en el borrador de la especificación de HTML 5. Entre los elementos y atributos nuevos que nos encontramos esta:
A parte de los que se mencionan en el artÃculo, yo he encontrado otros que también me han llamado la atención:
VÃa / 456 Berea Street
Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.
// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/, 'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/, 'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/, 'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/, 'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/, 'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//, 'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.
jQuery Fun: Greeting Your Site Referrals
Vía / dzone
Avanzando en el framework de Zend, hoy vamos a ver cómo crear documentos PDF. Quizás a muchos no les vaya a ser útil, pero un documento PDF es un formato bastante extendido.
De forma sencilla, ya que la librerÃa del framework es algo extensa, vamos a explicar que métodos son necesarios para crear un PDF.
Para cargar la librerÃa:
require_once 'Zend/Pdf.php';Para crear un nuevo documento PDF:
$pdf = new Zend_Pdf();Para crear una nueva página:
$pdf->pages[] = ($page = $pdf->newPage('A4'));$pdf->pages[] = new Zend_Pdf_Page(Zend_Pdf_Page::SIZE_A4);$pdf->pages[] = $pdf->newPage(Zend_Pdf_Page::SIZE_A4);Obtener ancho y alto de la página:
$ancho = $page->getWidth();
$alto = $page->getHeight();Usar estilos:
$estilo = new Zend_Pdf_Style();
$estilo->setFillColor(new Zend_Pdf_Color_RGB(0, 0, 0));
$font = Zend_Pdf_Font::fontWithPath('/path/fuente.ttf');
$estilo->setFont($font, 10);
$estilo->setStyle($style);Escribir texto:
$page->drawText("Hola Mundo", $x, $y);Insertar imágenes:
$img = Zend_Pdf_ImageFactory::factory('sentidoweb.png');
$page->drawImage($img, $x, $y, $x+&ancho, $y+$alto);Devolver la salida:
echo $pdf->render();Eso sÃ, antes hay que tener en cuenta que tenemos que devolver al inicio del script el Content-Type:
header("Content-Type: application/pdf");
// Si queremos que se devuelva como un fichero adjunto
header("Content-Disposition: attachment; filename=\"prueba.pdf\"");Si, se que parece muy resumido, pero otro dÃa habrá un ejemplo más completo, mejor ir paso a paso.
Comments are closed.
En opera el blog se ve espantoso…
Aunque en navegadores de equipos de sobremesa también funcionaria bien, nada mejor que tener una pagina autónoma que no dependa de muchas otras aplicaciones por parte del usuario para mostrar su contenido!