Sentido Web

Referencias y explicaciones sobre desarrollo web, PHP, Ajax, XHTML, MySQL ...
19Nov
2011
<!-- 1 -->

Progreso de subida de ficheros únicamente con HTML5

Uno de los mayores problemas con los que nos hemos encontrado a la hora de hacer aplicaciones que suben ficheros, es mostrar al usuario cuánto se ha subido y así poder saber cuánto queda. Ahora con HTML5 y XMLHttpRequest Level 2 podemos mostrarlo sin necesidad de parte del servidor.

El script hace uso de Evento de Progreso de HTML5 para poder mostrar:

  • total: total de bytes
  • loaded: bytes subidos
  • lengthComputable: indica si el tamaño del fichero es conocido
  • transferSpeed: velocidad de transferencia
  • timeRemaining: tiempo que falta (en formato Date)

Por ahora solo es compatible con Firefox, Chrome y Safari.

En el post lo explican con gran detalle.

Html5 File Upload with Progress

25Oct
2011
<!-- 5 -->

Enlaces de navegación en edición de posts en WordPress

Algo que me desespera es tener que editar varios posts seguidos en WP (sobre todo antes del lanzamiento) y tener que ir del post actual, a la lista de post y elegir el siguiente post que necesito editar. Por ello he hecho este pequeño script que incluido en el functions.php incluye dos enlaces en la cabecera que apuntan a la edición del post anterior y al siguiente:

function add_navigation_edit_posts() {
  if(preg_match('#wp-admin/post\.php#', $_SERVER["SCRIPT_NAME"]) && isset($_GET['post']) &&  isset($_GET['action']) && $_GET['action'] == 'edit') {
    global $post;
    if(!empty($post) && $post->post_type == 'post') {
      foreach(array(true, false) as $prev) {
        $p = get_adjacent_post(false, '', $prev);
        if (!empty($p)) {
          echo '<script type="text/javascript">';
          echo 'jQuery(document).ready(function() {jQuery(".wrap h2").append(\'<a class="add-new-h2" href="'.admin_url('post.php?action=edit&post='.$p->ID).'" title="'.__('Edit').' '.$p->post_title.'">'.($prev?'&laquo; ':'').$p->post_title.(!$prev?' &raquo;':'').'</a>\');});';
          echo '</script>';
        }  
      }
    }
  }
}
add_action('admin_head', 'add_navigation_edit_posts');
Publicidad
17Oct
2011
Comments Off

Actualiza tu theme de WordPress desde SVN

Si trabajas realizando proyectos en WordPress en el que el código se aloja en un servidor usando SVN, una forma sencilla de actualizar tu theme con los últimos cambios es mediante este sencillo y no-seguro plugin.

El plugin añade una opción de menú al Settings del Dashboard de WP, el cual te servirá para indicar el servidor SVN, usuario, contraseña y el path que corresponde a la carpeta themes de WP. El plugin se conectará al repositorio SVN y recuperará las carpetas que se encuentran en el path anterior y comprobará si las carpetas corresponden a themes instalados, mostrarás una lista con los themes encontrados junto a un botón que permite actualizar todo el theme.

Digo que no es seguro porque no controlo los permisos de los usuarios ni otras cuestiones, pero si estás interesado en ello supongo que no te costará mucho meterle mano al código:

// Adding Admin menu
if ( is_admin() ){
  add_action('admin_menu', 'svn_update_menu');
  add_action( 'admin_init', 'svn_update_register_settings' );
 
}
 
function svn_update_register_settings() {
  register_setting( 'svn_up_option-group', 'svn_username' );
  register_setting( 'svn_up_option-group', 'svn_password' );
  register_setting( 'svn_up_option-group', 'svn_repository' );
  register_setting( 'svn_up_option-group', 'svn_theme_path' );
  if ($_GET['page'] == 'svn-update/svn-update.php') {
    require ('phpsvnclient/phpsvnclient.php');
    $phpsvnclient = new phpsvnclient(get_option('svn_repository'), get_option('svn_username'), get_option('svn_password'));
    $files = $phpsvnclient->getDirectoryFiles('/');
    $svn_themes = array();
 
    $themes = array();
 
    foreach(get_themes() as $k=>$t) $themes[$t['Template']] = array($k, $t["Template Dir"]);
 
    if (is_array($files)) {
      foreach($files as $f) {
        if ($f['type'] == 'directory') {
          if (isset($themes[$f['path']])) $svn_themes[$f['path']] = $themes[$f['path']];
        }
      }
    }
    update_option('svn_themes', $svn_themes);
    if (isset($_GET['svn_update'])) {
      $path = $_GET['svn_update'];
      $theme_path = WP_CONTENT_DIR . '/themes/';
      $files = $phpsvnclient->getDirectoryFiles($path);
      foreach($files as $f) {
        if ($f['type'] == 'file') {
          file_put_contents($theme_path.$f['path'], $phpsvnclient->getFile($f['path']));
        }
      }
      add_action('admin_notices', 'showSVNUpdated');
    }
  }
}
 
function showSVNUpdated() {
  echo '<div id="message" class="updated fade"><p><strong>Theme updated</strong></p></div>';
}
 
function svn_update_menu() {
  add_options_page('SVN Update Options', 'SVN Update', 8, __FILE__, 'svn_update_options');
}
 
function svn_update_options() {
?>
<div class="wrap">
<h2>SVN Update Options</h2>
<form method="post" action="options.php">
<?php settings_fields('svn_up_option-group'); ?>
<table class="form-table">
 <tr>
     <th scope="row" valign="top">Username</th>
     <td>
         <input id="svn_username" name="svn_username" value="<?php echo get_option('svn_username'); ?>" type="text"/>
           <label for="svn_username">Write your SVN username</label>
     </td>
 </tr>
 <tr>
     <th scope="row" valign="top">Password</th>
     <td>
         <input id="svn_username" name="svn_password" value="<?php echo get_option('svn_password'); ?>" type="password" />
           <label for="svn_password">Write your SVN password</label>
     </td>
 </tr>
 <tr>
     <th scope="row" valign="top">Repository</th>
     <td>
         <input id="svn_username" name="svn_repository" value="<?php echo get_option('svn_repository'); ?>" type="text" />
           <label for="svn_reposotoy">for example: <em>http://domain.com/svn_path/project</em></label>
     </td>
 </tr>
 <tr>
     <th scope="row" valign="top">Theme path</th>
     <td>
         <input id="svn_username" name="svn_theme_path" value="<?php echo get_option('svn_theme_path'); ?>" type="text" />
           <label for="svn_theme_path">for example: <em>/trunk/my_project/themes</em></label>
     </td>
 </tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
</p>
</form>
</div>
<h3>Available Themes</h3>
<?php 
  $themes = get_option('svn_themes'); 
  if (empty($themes)) {
    echo '<p>No themes found in SVN repository instaled in WordPress</p>';
  } else {
    echo '<ul>';
    foreach($themes as $k=>$t) {
      echo '<li>/'.$k.' => '.$t[0].' <a href="'.admin_url('options-general.php?page=svn-update%2Fsvn-update.php&svn_update=/'.$k).'" class="button-primary">Update</a></li>';
    }
    echo '</ul>';
  }
?>
 
<?php
}

Este plugin necesita la librería PHP SVN Client para acceder al SVN, tan solo hay que meterlo en el mismo directorio que el plugin. Le faltan muchas cosas al plugin, pero ni tengo ganas ni tengo tiempo.

06Oct
2011
<!-- 1 -->

JSZip: crear ficheros ZIP mediante Javascript

Interesante librería que nos permite crear ficheros ZIP desde Javascript, con unas simples líneas de código podemos crear zips con ficheros de texto, imágenes, crear directorios…

var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;

El único problema que hay es a la hora de generar el nombre del fichero: Firefox crea un fichero con un nombre extraño y acabado en .part, Safari lo nombra “Unknown” sin extensión, Chrome “download.zip” e IE directamente ni funciona la librería.

JSZip

Vía / @devongovett

29Sep
2011
<!-- 9 -->

Acceder a Streaming API de PHP

Para aquellos que necesiten realizar aplicaciones sobre Twitter que tiren de la Streaming API, por ejemplo monitorear o que se dice de una marca, les va a venir muy bien este código:

set_time_limit(0);
 
$query_data = array('track' => 'lo que quieres buscar');
$user = 'username';	// replace with your account
$pass = 'password';	// replace with your account
 
$fp = fsockopen("stream.twitter.com", 80, $errno, $errstr, 30);
if(!$fp){
	print "$errstr ($errno)\n";
} else {
	$request = "GET /1/statuses/filter.json?" . http_build_query($query_data) . " HTTP/1.1\r\n";
	$request .= "Host: stream.twitter.com\r\n";
	$request .= "Authorization: Basic " . base64_encode($user . ':' . $pass) . "\r\n\r\n";
	fwrite($fp, $request);
	while(!feof($fp)){
		$json = fgets($fp);
		$data = json_decode($json, true);
		if($data){
			//
			// Do something with the data!
			//
		}
	}
	fclose($fp);
}

El parámetro track se puede cambiar por follow (usando IDs numéricos) para saber que dice algún usuario y que dicen los que le mencionan o retuitean.

Vía / AF-Design

Publicidad
14Sep
2011
Comments Off

Añadir clase a la imagen destacada de WordPress según el tamaño

Hace bastante que no escribía, sobre todo por falta de tiempo, pero quería escribir sobre este pequeño truco de WordPress. Cuando añadimos una imagen destacada en un post de WordPress nos podemos encontrar con que la imagen ocupa todo el ancho (lo más normal) o que no ocupa tanto, con lo que nos encontramos que la imagen queda muy sola y el diseño queda feo.

Para solucionar esto, deberemos añadir un filtro, comprobar el tamaño de la imagen y el del ancho del contenido y en el caso de que creamos que es conveniente (por ejemplo la mitad del ancho del contenido) añadir una clase a la imagen:

function mi_post_thumbnail_html($html) {
  // Se suele recomendar definir la variable $content_width para ocasiones como esta
  global $content_width;
  preg_match('#width="([^"]+)"#', $html, $s);
  if (isset($s[1]) && $s[1] < $content_width/2) {
    preg_match('#class="([^"]+)"#', $html, $c);
    if (isset($c[1]) && strpos($c[1], "right") === FALSE) {
      return str_replace('class="'.$c[1].'"', 'class="'.$c[1].' right"', $html);
    }
  }
  return $html;
}
add_filter('post_thumbnail_html', 'mi_post_thumbnail_html');
15Jun
2011
<!-- 2 -->

PDF.js librería Javascript para leer PDF en Canvas

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.

<html>
<head>
  <title>Simple pdf.js page viewer</title>
  <script type="text/javascript"
          src="pdf.js"></script>
  <style type"text/css">
body {
  margin: 6px;
  padding: 0px;
  background-color: #c0bdb7;
}
#controls {
  border-bottom: 1px solid black;
  position:fixed;
  left: 0px; top: 0px;
  width: 100%;
  padding: 7px;
  background-color: rgb(242, 240, 238);
}
span#info {
  float: right;
  font: 14px sans-serif;
  margin-right: 10px;
}
#viewer {
  margin: auto;
  border: 1px solid black;
  width: 8.5in;
  height: 11in;
}
#pageNumber {
  text-align: right;
}
  </style>
 
<script type="text/javascript">
function queryParams() {
    var qs = window.location.search.substring(1);
    var kvs = qs.split("&");
    var params = { };
    for (var i = 0; i < kvs.length; ++i) {
        var kv = kvs[i].split("=");
        params[unescape(kv[0])] = unescape(kv[1]);
    }
    return params;
}
 
var canvas, numPages, pageDisplay, pageNum;
function load() {
    canvas = document.getElementById("canvas");
    canvas.mozOpaque = true;
    pageDisplay = document.getElementById("pageNumber");
    infoDisplay = document.getElementById("info");
    pageNum = parseInt(queryParams().page) || 1;
    fileName = queryParams().file || "compressed.tracemonkey-pldi-09.pdf";
    open(fileName);
}
 
function open(url) {
    document.title = url;
    req = new XMLHttpRequest();
    req.open("GET", url);
    req.mozResponseType = req.responseType = "arraybuffer";
    req.expected = (document.URL.indexOf("file:") == 0) ? 0 : 200;
    req.onreadystatechange = xhrstate;
    req.send(null);
}
 
function xhrstate() {
    if (req.readyState == 4 && req.status == req.expected) {
        var data = req.mozResponseArrayBuffer ||
                   req.mozResponse ||
                   req.responseArrayBuffer ||
                   req.response;
        pdf = new PDFDoc(new Stream(data));
        numPages = pdf.numPages;
        document.getElementById("numPages").innerHTML = numPages.toString();
        gotoPage(pageNum);
    }
}
 
function displayPage(num) {
    pageDisplay.value = num;
 
    var t0 = Date.now();
 
    var page = pdf.getPage(pageNum = num);
 
    var t1 = Date.now();
 
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
 
    var gfx = new CanvasGraphics(ctx);
 
    // page.compile will collect all fonts for us, once we have loaded them
    // we can trigger the actual page rendering with page.display
    var fonts = [];
    page.compile(gfx, fonts);
 
    var t2 = Date.now();
 
    // This should be called when font loading is complete
    page.display(gfx);
 
    var t3 = Date.now();
 
    infoDisplay.innerHTML = "Time to load/compile/render: "+ (t1 - t0) + "/" + (t2 - t1) + "/" + (t3 - t2) + " ms";
}
 
function nextPage() {
    if (pageNum < numPages)
        ++pageNum;
    displayPage(pageNum);
}
 
function prevPage() {
    if (pageNum > 1)
        --pageNum;
    displayPage(pageNum);
}
function gotoPage(num) {
    if (0 <= num && num <= numPages)
        pageNum = num;
    displayPage(pageNum);
}
  </script>
</head>
 
<body onload="load();">
  <div id="controls">
    <button onclick="prevPage();">Previous</button>
    <button onclick="nextPage();">Next</button>
    <input type="text" id="pageNumber" onchange="gotoPage(this.value);"
           value="1" size="4"></input>
    / <span id="numPages">--</span>
    <span id="info"></span>
  </div>
  <div id="viewer">
    <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
      -- are always 96 dpi.  These dimensions are 8.5x11in at 96dpi. -->
    <canvas id="canvas" width="816" height="1056"></canvas>
  </div>
</body>
 
</html>

PDF.js

Vía / @badass_js

08Jun
2011
Comments Off

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

Publicidad
03Jun
2011
<!-- 3 -->

Conocer los +1 de Google de tus posts de WordPress

Ahora que Google ha sacado el botón +1, puede ser interesante saber que puntuación llevan nuestros posts en Google. Una forma rápida (y un tanto cutre) sería crear un fichero (por ejemplo en la raíz del blog que tenga el siguiente código:

<?php 
define('DOING_CRON', true);
define('DOING_AJAX', true);
require_once('../wp-load.php');
global $wpdb;
$result = $wpdb->get_results("SELECT * from $wpdb->posts where post_status = 'publish' order by ID desc limit 20");
?>
<html>
  <head>
    <title>+1 de Google de mis posts</title>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
      {"parsetags": "explicit"}
    </script>
  </head>
  <body>
<?php foreach($result as $i=>$p) { $url = get_permalink($p->ID); ?>
  <p><?php echo $url; ?><script type="text/javascript">
      gapi.plusone.render("content<?php echo $i; ?>", {"href":"<?php echo $url; ?>"});
    </script>
    <span id="content<?php echo $i; ?>">
      <g:plusone></g:plusone>
    </span>
  </p>
<?php } ?>
  </body>
</html>

Espero que os sea de ayuda

31May
2011
Comments Off

Librería PHP para TwitPic

TwitPic es un servicio que se utiliza para subir fotos que luego publicas en Twitter. Si estás realizando una aplicación que tira de Twitter y quieres dar la oportunidad al usuario de subir sus fotos puedes hacer uso de esta aplicación y su API (es necesario darse de alta):

$twitpic = new TwitPic($api_key, $consumer_key, $consumer_secret, $oauth_token, $oauth_secret);
try {
  /*
  * Retrieves all images where the user is facetagged
  */
  $user = $twitpic->faces->show(array('user'=>'meltingice'));
  print_r($user->images);
 
  $media = $twitpic->media->show(array('id'=>1234));
  echo $media->message;
 
  $user = $twitpic->users->show(array('username'=>'meltingice'), array('process'=>false, 'format'=>'xml'));
  echo $user; // raw XML response data
 
  /*
  * Uploads an image to TwitPic
  */
  $resp = $twitpic->upload(array('media'=>'path/to/file.jpg', 'message'=>'This is an example'));
  print_r($resp);
 
  /*
  * Uploads an image to TwitPic AND posts a tweet
  * to Twitter.
  *
  * NOTE: this still uses v2 of the TwitPic API. This means that the code makes 2 separate
  * requests: one to TwitPic for the image, and one to Twitter for the tweet. Because of this,
  * understand this call may take a bit longer than simply uploading the image.
  */
  $resp = $twitpic->uploadAndPost(array('media'=>'path/to/file.jpg', 'message'=>'Another example'));
  print_r($resp);
  
} catch (TwitPicAPIException $e) {
  echo $e->getMessage();
}

TwitPic API for PHP