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

Nuestra fuente: Sentidoweb

Otras veces ya hemos visto como realizar una instalación de Apache con PHP y eAccelerator, una vez instalado los ficheros ejecutables importantes son:

• apachectl: Mediante este script podremos:
  • Gestionar el arranque y parada del daemon (start/stop)
  • Comprobar la configuración (configtest):

    # /usr/local/apache22/bin/apachectl configtest
    Syntax OK

  • Recargar la configuración en caliente, sin apagar el daemon (graceful)
• httpd: Binario del daemon, con dicho fichero podemos:
  • Indicar que fichero de configuración cargar (opción -f)
  • Ver el listado de módulos que carga (opción -M):

    # /usr/local/apache22/bin/httpd -M
    Loaded Modules:
     core_module (static)
    (...)
     jrun_module (shared)

  • Al igual que con apachectl, comprobar la configuración con la opción -t:

    # /usr/local/apache22/bin/httpd -t
    Syntax OK

  • Ver el resumen de configuración de los VirtualHosts con la opción -S:

    # /usr/local/apache22/bin/httpd -S
    VirtualHost configuration:
    wildcard NameVirtualHosts and _default_ servers:
    *:80                   is a NameVirtualHost
             default server shuvak.systemadmin.es (/usr/local/apache22/conf/extra/httpd-vhosts.conf:7)
             port 80 namevhost shuvak.systemadmin.es (/usr/local/apache22/conf/extra/httpd-vhosts.conf:7)
             port 80 namevhost systemadmin.es (/usr/local/apache22/conf/extra/vhosts/systemadmin.es.conf:1)
             port 80 namevhost foro.systemadmin.es (/usr/local/apache22/conf/extra/vhosts/foro.systemadmin.es.conf:1)
    Syntax OK

Un ejemplo de configuración típica de un VirtualHost sería la siguiente:

<VirtualHost *:80>
        DocumentRoot "/var/www/systemadmin.es/htdocs"
        DirectoryIndex index.php
        ServerName systemadmin.es
        ServerAlias foro.systemadmin.es

        <Directory /var/www/systemadmin.es/htdocs>
            Options FollowSymLinks
            AllowOverride all
            Order deny,allow
            Allow from all
        </Directory>

        ErrorLog  "| /usr/local/sbin/cronolog -S /var/www/systemadmin.es/logs/current.error.log /var/www/systemadmin.es/logs/%Y/%m/%d/error.log"
        CustomLog "| /usr/local/sbin/cronolog -S /var/www/systemadmin.es/logs/current.custom.log /var/www/systemadmin.es/logs/%Y/%m/%d/custom.log" combined

</VirtualHost>

Las directivas importantes son:

• DocumentRoot: Directorio base desde el cual serviremos el contenido. Deberemos acompañarlo de la directiva Directory para establecer si se puede servir o no su contenido
• DirectoryIndex: Cuando se intente servir la raíz o cualquier directorio (sin especificar fichero), cual se debería servir. Típicamente se usa index.algo, pero podría ser cualquier fichero. Esta directiva indica que fichero servir y en que orden de prioridad. Por ejemplo:

  DirectoryIndex index.php index.html index.htm

  Primero miraría si existe un fichero index.php, en caso que no exista buscaría el siguiente (index.html) y así el listado que indiquemos. En caso que no exista ninguno, se serviría un 404

• ServerName y ServerAlias: Nombres a los que responde según el header Host. Se pueden especificar wildcards tanto pode delante (*.systemadmin.es) como por detrás (webmail.*). La diferencia entre ServerName y ServerAlias a la practica tiene poca importancia.

En cuanto a la gestión de logs, personalmente uso cronolog ya que una vez configurado cómo queremos almacenar los logs no deberemos hacer mantenimiento a no se que queramos eliminar los antiguos. Para ello suelo emplear un simple script que haga limpieza:

#!/bin/bash
for i in $(find /var/www/ -maxdepth 2 -iname logs);
do

        #eliminacion de los mas antiguos de 10 dias
        find $i -mtime +10 -type f -exec rm {} \;

        #eliminacion de directios vacios
        find $i -empty -type d -exec rmdir {} \; 2>/dev/null

        #compresión de logs ya rotados
        find $i -type f -iname \*\.log -mtime +2 -exec gzip {} \;

done

Deberemos adaptar el find del for para que encuentre los directorios raíz dónde tenemos los logs.

Para conocer el estado del Apache existe el modulo mod_status, que nos indica que esta haciendo dicho daemon. Generalmente se instala en /server-staus con acceso limitado por IP de origen.

En el scoreboard veremos los estado del los apachitos (procesos apache) y podremos ver si existe algún problema con algún VirtualHost. Típicamente podremos ver:

• Se nos llena el scoreboard de W: Cuando un slot esta en estado W significa que esta contestando, pero si vemos que se nos acumulan W posiblemente esta contestando muy lentamente por algún motivo o bien simplemente se queda colgado. Generalmente indica problemas en la base de datos.Si habilitamos la opción

  ExtendedStatus On

  Tendremos un listado de todas las peticiones y su estado, para cuanto tiempo lleva un slot en el estado actual deberemos fijarnos en la columna SS. Por lo tanto, las peticiones en estado W que tenga el SS alto son las primeras que deberemos investigar. Evidentemente, si servimos contenido estático (un mp3) es lógico que tarde en ser entregado y por lo tanto que su SS sea alto.

• Se nos llena el scoreboard de K: Tendremos que ver si nos interesa reducir el tiempo de KeepAlive de las conexiones. Por defecto lo tenemos a 5 segundos, pero lo podemos dejar en 1 o 2 segundos según la aplicación.

En otra ocasión ya hablamos de en que debemos fijarnos para entender el problema que tenga un entorno LAMP

Otra cosa a tener en cuenta es la diferencia entre ServerLimit y MaxClients: ServerLimit es el límite fijo que no puede ser modificado mediante una recarga de configuración (graceful) mientras que MaxClients es el límite actual.

Actualmente mod_status no muestra los slots de Apache que quedan deshabilitados por la directiva MaxClients, por lo que nos puede dar pie a error al suponerlos libres. En su momento hice un patch para evitar esto y será incluido en la próxima release de Apache (2.4), actualmente ya se encuentra disponible en la versión beta desde la versión 2.3.11.

Nuestra fuente: Systemadmin

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.

Nuestra fuente: SentidoWeb

Para generar el fichero desde un comando SQL en MySQL deberemos indicar INTO OUTFILE con el nombre de fichero y las siguientes opciones:

• FIELDS TERMINATED BY: Indicamos como terminan los campos, en este caso deben ser separados por comas ‘,’
• OPTIONALLY ENCLOSED BY: Como se deben indicar en el caso que tengan el separador como valor. En este caso mediante comillas dobles ‘”‘
• ESCAPED BY: Indicamos como debemos escapar los carácteres, en este caso mediante la contrabarra ‘\\’
• LINES TERMINATED BY: Indicamos como especificamos una nueva fila, en este caso mediante un intro ‘\n’

Por lo tanto el comando SQL quedaría:

mysql>  select * from loquesea
INTO OUTFILE "/tmp/inventari.txt"
FIELDS TERMINATED BY  ','
OPTIONALLY ENCLOSED BY '"'
ESCAPED BY  '\\'
LINES TERMINATED BY '\n' from RackObject;
Query OK, 168 rows affected (0.29 sec)

Nuestra fuente: Systemadmin.es

<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>

Nuestra fuente: Sentidoweb

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

Nuestra fuente: Sentidoweb

$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

Nuestra fuente: Sentidoweb

Con dicha opción –bootstrap arranca el mínimo de la instancia sin tener disponible ni el socket ni el puerto TCP para conexiones de clientes, sino que únicamente se comunica con el usuario por stdin.

Por lo tanto, deberemos pasar los comandos que queremos que ejecute. Cuando le mandemos el EOF, se cerrará la base de datos y terminará la aplicación. Por ejemplo, con el MySQL apagado ejecutamos el mysqld con la opción bootstap y le mandamos crear una base de datos:

# /usr/local/mysql/bin/mysqld --defaults-file=/etc/my.cnf --bootstrap
create database test_single_user;

Finalizando la entrada de comandos con control-D (EOF).

Una vez arranquemos de nuevo el MySQL normalmente, podremos comprobar como se ha ejecutado el comando que hemos indicado:

# mysql
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 1
Server version: 5.5.10-log Source distribution

Copyright (c) 2000, 2010, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| test_single_user   |
+--------------------+
4 rows in set (0.00 sec)

mysql>

Evidentemente, podemos ejecutar más de un comando, siendo de esta forma una buena manera de ejecutar ciertas operaciones delicadas que no queremos que nadie nos pueda molestar:

# /usr/local/mysql/bin/mysqld --defaults-file=/etc/my.cnf --bootstrap
use test_single_user
create table a2 as select * from a1;

Nuestra fuente:  systemadmin.es

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\(','\)']]}});
</script>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</body>
</html>

Nuestra fuente: Sentidoweb

El primero de ellos trata sobre cómo mejorar el rendimiento de las aplicaciones en HTML5, a parte de alguna que es puramente Javascript y no HTML5 (como guardar en una variable un elemento DOM y no buscarlo cada vez que vayamos usarlo), la mayoría de ellas trata sobre el uso de transiciones CSS3 por parte del navegador y no mediante el uso de Javascript, ya que así sería el navegador el que se encargue de ello y pueda optimizar su ejecución, por ejemplo:

var elem = evt.target;
  // Modernizr es una librería que nos indica que elementos CSS3 y HTML5 dispone el navegador
  if (Modernizr.csstransforms && Modernizr.csstransitions) {
    // Mediante CSS3
    elem.style.transition = 'all 3s ease-out';
    elem.style.transform = 'translateX(600px)';
  } else {
    // Mediante jQuery
    jQuery(elem).animate({ 'left': '600px'}, 3000);
  }

El siguiente tutorial nos indica cómo meterle efectos CSS3 a nuestros textos, y la verdad es que alguno está muy currado. Claro que yo no soy muy partidario de usarlos según que tipo de publicación (se puede abusar mucho de ello), pero la verdad es que nos puede venir muy bien.
Y por último consejos HTML5 y CSS para convertir nuestra web a formato adaptado para móviles. Algunos trucos de rencimiento como el uso del almacenamiento local y algo bastante interesante cómo indicar la orientación o el viewport de la página:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">
<meta name="viewport" content="target-densitydpi=device-dpi">

Nuestra fuente: Sentidoweb