de webmaster a webmaster

Archive for the ‘Copy Paste’ Category

Cómo añadir un botón para compartir con Facebook

without comments

compartir en facebook y en twitter Cómo añadir un botón para compartir con Facebook

Hay bastante formas para añadir botones para compartir mediante Facebook un enlace de una página web por ejemplo la tuya propia para proporcionarle caracteristicas autobomberas, de autobombo, pues bien de todas las formas que existes hoy nos quedamos con esta que te presentamos, por el momento, ya que cuenta con una integración bajo la tecnología “más fácil imposible”, se trata de un iframe, hay está el truco del almendruco, pero bueno, hoy con el calor que hace no estamos muy puristas y preferimos pasar de APIs y otras infernalidades que provocan dolor de cabeza al pasar de 30 grados así que si quieres probar que tal funciona eso de compartir en Facebook alguna de nuestras webs haz como nosotros y luego ya integrarás más.

Para nuestros experimentos con gaseosa hemos elegido nuestra web amiga http://miMac.es especialista en juegos para mac.

Al pie de página, justo antes de cerrar el </body> hemos insertado nuestro código del iFrame para que aparezca un botón “Me gusta” con un contador de gente a la que le gusta nuestra página dedicada a Mac, puedes ver el resultado en cualquier página de miMac.

Y ahora el código:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2FmiMac.es%2F&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>

Aquí tienes explicadas las diferentes variables y los valores que pueden tomar:

  • href – Aquí tienes que declarar la URL que quieres compartir en Facebook.
  • layout – Aquí el estilo del botón, que puede tener los siguientes valores: standard o button_count
  • show_faces – Con esta variable puedes mostrar o no el avatar de quienes del gusta la anotación. Valores: true o false.
  • width – El ancho que quieres darle al iframe.
  • action – El texto que quieres que salga en el botón, los posibles valores son: like o recommend.
  • font – El tipo de letra.
  • colorscheme – El esquema de colores, los valores posibles son: light, dark o evil.

En otro post buscaremos lo mismo pero para Twitter.

Forzar descarga de archivos en navegador

without comments

descargar Forzar descarga de archivos en navegador

Hoy os traemos un método simple pero efectivo para forzar que el navegador se descargue un archivo en lugar de abrirlos.

Esta rutina se muestra idónea para los documentos con extensión .PDF .DOC y .TXT que la mayoría de navegadores intentan abrir por si mismos produciendo en ocasiones efectos indeseados.

Esta rutina en lenguaje PHP funciona como página independendiente al que  se le pasa el nombre del fichero via GET, es de cir a través de la URL con un “forzar_descarga.php?=fileToDownload=descargame.txt

$fileToDownload=$_GET['fileToDownload'];
if($fileToDownload){
header("Content-Disposition: attachment; filename=".$fileToDownload."\n\n");
header("Content-Type: application/octet-stream");
header("Content-Length: ".filesize($fileToDownload));
readfile($fileToDownload);
} else {
echo 'Error file not exist';
}

Written by dedavid

May 19th, 2010 at 6:55 am

Generador de plantilla de columnas para web

without comments

generador.columnas web 480x394 Generador de plantilla de columnas para web

The 1Kb CSS Grid es una aplicación online que permite generar frameworks o estructuras de ficheros con el encolumnado ya creado bajo HTML y CSS. Ideal para realizar bocetos, mockups y todo tipo de pruebas.

Para configurar tu parrilla dispones de tres deslizadores desde donde debes configurar una parrilla imaginaria de columnas para dar forma a las capas de tu web.

El resultado te lo descargas en un fichero zipeado: Si abres el html te encontrás una plantilla como la siguiente:

generador de plantillas columnas 480x204 Generador de plantilla de columnas para web

El código que te genera es muy limpio. Únicamente dos archivos, un HTML y un CSS.

En nuestras pruebas hemos obtenido el siguiente código HTML

<!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>The 1Kb Grid Demo – 9 columns, 80 pixels each, with 20 pixel gutter</title>
<link href=”grid.css” type=”text/css” rel=”stylesheet” media=”screen”/>
<style type=”text/css” media=”screen”>
body { margin: 20px 0 0 0; }
p {
font:60px/100px Helvetica;
color: #000;
text-align: center;
border: 1px solid #000;
margin: 0 0 20px 0;
}
</style>
</head>
<body>
<div class=”row”>
<div class=”column grid_9″><p>9</p></div>
</div>
<div class=”row”>
<div class=”column grid_6″><p>6</p>
<div class=”row”>
<div class=”column grid_3″><p>3</p></div>
<div class=”column grid_3″><p>3</p></div>
</div>
</div>
<div class=”column grid_3″><p style=”line-height: 222px;”>3</p></div>
</div>
</body>
</html>

y el siguiente CSS

.grid_1 { width:80px; }
.grid_2 { width:180px; }
.grid_3 { width:280px; }
.grid_4 { width:380px; }
.grid_5 { width:480px; }
.grid_6 { width:580px; }
.grid_7 { width:680px; }
.grid_8 { width:780px; }
.grid_9 { width:880px; }

.column {
margin: 0 10px;
overflow: hidden;
float: left;
display: inline;
}
.row {
width: 900px;
margin: 0 auto;
overflow: hidden;
}
.row .row {
margin: 0 -10px;
width: auto;
display: inline-block;
}

Enlace: http://www.1kbgrid.com

Written by dedavid

April 23rd, 2010 at 8:15 am