Etiqueta: google

Vídeo en HTML5 (básico)

en por Donnie Rocken HTML5, Informática2 comentarios

Utilizando HTML siempre nos encontramos con el problema de tener que depender de QuickTime y AdobeFlash para insertar audio o vídeo. HTML5 nos da las etiquetas AUDIO y VIDEO que nos permiten, con mayor facilidad, insertar este tipo de recursos multimedia en nuestra página.

En esta ocasión nos centraremos en la etiqueta VIDEO, que como habréis podido deducir nos permite insertar vídeos en nuestra página. El uso de esta etiqueta es tan simple como lo que podéis ver en el siguiente ejemplo:


<video src="example.mp4" width="600" height="320" controls preload></video>

Ya ves que no es complejo, aunque requiere una cierta explicación. Estos son los atributos que tienes a tu disposición:

  • SRC: Enlaza con el archivo de video que queremos reproducir
  • WIDTH: El ancho del video en pixeles.
  • HEIGHT: El alto del video en pixeles.
  • CONTROLS: Nos permite incluir los controles del reproductor del navegador como el botón de play o el volumen.
  • AUTOPLAY: Permite especificar si el archivo de video se reproduce desde que se carga la pagina.
  • PRELOAD: Carga un poco el archivo de video en el buffer antes de iniciar la reproducción, para que no se trabe mientras se reproduce.

Todo parecía muy fácil hasta aquí, pero, mi querido programador web, ya sabes que NUNCA es tan fácil. Si los problemas para conseguir la compatibilidad de tu maquetación en CSS en todos los navegadores te ha hecho envejecer prematuramente varios años ya sabes lo que viene ahora: Los distintos navegadores dan soporte a distintos formatos de vídeo (seguro que no te sorprende, seguro que te lo venías oliendo). Las compatibilidade de los motores de los navegadores con los codecs de vídeo son:

  • H.264 :: Soportado por Safari, Google Chrome e Internet Explorer 9. Se trata de un codec propietario
  • OGG Theora :Soportado por Firefox, Opera y Google Chrome. Es libre, pero menos eficiente que H.264, ya que ofrece menor calidad y mayor tamaño de los archivos.
  • WebM : Soportado por Google Chrome, Firefox y Opera, aunque Google también ha creado un plugin para que funcione en IE9, y en Safari debería funcionar ya que usa como base QuickTime para reproducir vídeo. Es libre, ofrece una calidad similar a H.264 pero además consigue una mejor compresión, creando archivos más ligeros. Incluso el FlashPlayer de Adobe soportará este formato.

Todo esto provocado por el enfrentamiento entre los consorcios WHATWGs (apoyado mayoritariamente por Google, Mozilla y varias empresas del campo de software libre) y MPEG-LA (este apoyado por el eje del mal: Apple/Microsoft). Tal cual está el tema de las licencias a día de hoy, en 2016 el codec H.264 podría pasar a ser de pago, así que habrá que tener ojo con eso.

Entonces ¿cómo consigo la compatibilidad entre varios navegadores? Tampoco es difícil. Lo que tienes que hacer es no poner el atributo src dentro de la etiqueta VIDEO. En su lugar, tienes que crear etiquetas SOURCE con los distintos src y especificando en cada uno el codec, y ponerlas entre la apertura y el cierre de VIDEO, como en el siguiente ejemplo:

<video width="600" height="320" controls preload>
  <source src="ejemplo.ogv" type='video/ogg; codecs="theora,vorbis"' />
  <source src="ejemplo.mp4" type='video/mp4; codecs="avc1,mp4a"' />
  <source src="ejemplo.webm" type='video/webm; codecs="vp8,vorbis"' />
</video>

Como ves, la etiqueta SOURCE tiene como argumentos el src y type, donde definís el tipo de vídeo y el codec a reproducir.

En fin, el futuro próximo de la web está aquí, en HTML5. Haciendo uso de CSS además podréis lograr un reproductor más personalizado, más «bonito» y visible. Id pegándole un ojo.

Creando ToolTips chulos con TinyTip y jQuery

en por Donnie Rocken Informática, Javascript/jqueryDeja un comentario

Un aspecto que muchas veces descuidamos en nuestras webs son los Tooltips. A día de hoy, con tanta paranoia por el diseño instalada en nuestras cabezas por las políticas apple, el tradicional Tooltip estilo Windows será percibido como «chapucero» por el usuario (o cliente) que demandará una imagen más «2.0» (el palabro de moda).

TinyTip es un plugin ligerito, fácil de usar e implementar, que le dará una estética muy chula a vuestros proyectos. Os lo podéis descargar desde este enlace, en el que tenéis el .css el .js y una carpeta con imágenes de prueba.

Lo primero que debéis hacer es incluir en vuestro proyecto los archivos css, jQuery y el javascript de Tinytips, tal que así:

rel="stylesheet" type="text/css" media="screen" href="styles/tinyTips.css" />
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery-1.7.1.min.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery.tinyTips.js">
// ]]></script>

Recordad poner la ruta en la que hayáis guardado los archivos. Si queréis no necesitáis descargar jQuery, sino que podréis enlazarlo a la página de google. El siguiente paso es inicializar los Tooltips

<script type="text/javascript">// <![CDATA[
type</span>="text/javascript">
		$(document).ready(function() {
			$('a.tTip').tinyTips('title');
			$('a.imgTip').tinyTips('<img <span="" class="hiddenSpellError" pre="img ">src="imagenes/demo-image.jpg" />
Puedes usar imágenes en tus Tooltips.', 'yellow');
			$('img.tTip').tinyTips('title', 'green');
		});
      </script>

Bueno, puedes ver tres inicializaciones: La primera implica que los enlaces de la clase tTip mostrarán como texto el que metáis en el parámetro title. El segundo es lo mismo, con la clase imgTip, pero mostrará una imagen y, debajo de ella, el texto, y además recibe el parámetro ‘yellow’, que define el color de fondo. La tercera es un tooltip para una imagen, de nuevo con el texto definido en title y fondo verde (los colores que podéis usar los veréis al descargar la carpeta images). En el siguiente ejemplo podéis ver la implementación dentro de un html:


<div id="<span class=" hiddenspellerror"="" pre="id ">demo"></div>

    
<img <span="" class="hiddenSpellError" pre="img ">class="tTip" src="imagenes/demo-image.jpg" title="Hola, soy una imagen de muestra!" />Lorem ipsum dolor sit amet. <a class="imgTip" href="#">Enlace con un tooltip con la misma imagen que la de al lado</a> In ligula mauris, aliquam quis tempor quis, consectetur a erat. Nulla non justo pellentesque dui elementum pharetra nec eu magna. <a class="tTip" href="#" title="Y en este último ejemplo podéis ver que puedo poner un texto todo lo largo que quiera, aunque lo normal es una explicacioncilla corta, no un parrafazo tan largo">Último ejemplo</a>

    </p>
</div>

En fin, con estas simples instrucciones veis que podéis tener vuestros Tooltips personalizados y bien chulos sin romperos la cabeza

// ]]>

Paginación con PHP+MySQL

en por Donnie Rocken Informática, Lenguajes de programación, SQLDeja un comentario

Hoy me encontraba con la necesidad de hacer uso de la paginación en un desarrollo PHP. Nunca lo había hecho previamente en este lenguaje, aunque sí había tenido que hacerlo en VB.NET (tablas paginadas a gogo en mi paso por Nática SL) y en Java. Entre la experiencia con otros lenguajes y las búsquedas en San Google he encontrado como hacerlo.

Para esto vamos a utilizar dos funciones de MySQL: SQL_CALC_FOUND_ROWS, que nos permite calcular el número de resultados de una consulta sin LIMIT, y FOUND_ROWS, que nos permite recuperar el resultado de la última ejecución de la función anterior. Estos dos métodos nos ahorrarán hacer una consulta COUNT para saber el total de resultados, que necesitaremos para calcular la cantidad de páginas que se mostrarán.

Supongo que ya sabéis crear una conexión con una base de datos MySQL en PHP, así que es lo primero que debéis hacer.

Lo siguiente es definir una variable con el número máximo de resultados a mostrar por página:

 $max = 10

En mi caso la fijé en 10 resultados. Luego hay que definir qué página se mostrará, que en principio se pedirá usando el método GET:

$pagina = (int) $_GET[‘pag’];

if($pagina<1)

{

$pagina = 1;

}

$offset = ($pagina-1)*$max;

Luego viene la creación de la consulta paginada y de la consulta para conocer el total.

$sql = «SELECT SQL_CALC_FOUND_ROWS id, name FROM clientes LIMIT $offset, $max»;

$sqlTotal = «SELECT FOUND_ROWS() as total»;

Tras esto, recogemos los Result Set de ambas consultas, con los que podemos calcular el total y almacenar los resultados.

$resultSet = mysql_query($sql);

$rsTotal = mysql_query($sqlTotal);

$filasTotal = mysql_fetch_assoc($rsTotal);

$total = $filasTotal[‘total’];

Bueno, ahora sólo nos queda crear una tabla en la que mostrar los resultados, con los enlaces a las distintas páginas debajo.

border=»1″ bordercolor=»#0000EE»>
<thead>
<tr>
<td>Id</td>
<td>Name</td>
</tr>
</thead>
<tbody>
<?php
while ($fila = mysql_fetch_assoc($resultSet))
{
$id = $fila[«id»];
$name = htmlentities($fila[«nombre»]);
?>
<tr>
<td><?php echo $id; ?></td>
<!–?php echo $name; ?>–>
</tr>
<?php
}
?>
</tbody>
<tfoot>
<tr>
colspan=»2″>
<?php
$totalPag = ceil($total/$max);
$enlaces = array();
for( $i=1; $i<=$totalPag ; $i++)
{
$enlaces[] = «href=\»?pag=$i\»>$i«;
}
echo implode(» – «, $links);
?>
</td>
</tr>
</tfoot>
</table>

Tenéis que perdonar el deficiente sangrado del código, pero al ponerlo como comentario siempre queda descojonado. En cualquier caso podéis probar a copiar y pegar en un editor como Aptana Studio, donde el sangrado automático arreglaría la cuestión.

En fin, espero que esto os sea de ayuda.