Contenido

Propuesta de subtítulos para el tag video en HTML5

30 Jun

aNieto2k hace 4 días en: estandares, web, webdev

+ 8

En Ginger’s Thoughts leo una propuesta muy interesante que creo que quedará en solo eso, una propuesta. Aunque la idea es muy buena y podría ser interesante disponer de ello en el nuevo HTML5. La propuesta es de Diciembre de 2008, y por el momento no hay novedades al respecto.

La idea es incluir al tag <video /> del HTML5 la capacidad de manejar subtítulos:

<video src="http://example.com/video.ogv" controls>
<text category="CC" lang="en" type="text/x-srt" src="caption.srt"></text>
<text category="SUB" lang="de" type="application/ttaf+xml" src="german.dfxp"></text>
<text category="SUB" lang="jp" type="application/smil" src="japanese.smil"></text>
<text category="SUB" lang="fr" type="text/x-srt" src="translation_webservice/fr/caption.srt"></text>
</video>

Como podemos ver en el código superior, estaríamos incluyendo texto al tag <video /> que nos permitiría establecer mediante el atributo lang el idioma del subtítulo y tu seleccionarlo directamente desde el control incluido en el navegador (preseleccionando el del idioma por defecto del navegador).

El tag <text />

Únicamente indicaría la ubicación del fichero de subtítulos que debe cargar (src), indicando el idioma (lang) y el tipo (type) de subtítulo que vamos a cargar.

Por el momento…

Por el momento podemos hacer uso de jQuert SRT, para simular el resultado con Javascript.

<!-- Javascript -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.srt.js"></script>

<!-- HTML  -->
<video src="http://example.com/video.ogv" id="video" controls>
<div class="srt"
data-video="video"
data-srt="http://example.com/video.srt" />

La idea es intersante para cuando las películas lleguen “oficialmente” a Internet. ¿no?

Disfruta de HTML5 en Internet Explorer y Firefox 2

30 Jun

aNieto2k hace 4 días en: Programacion, estandares, web, webdev

+ 0

Aunque el HTML5 está lejos, la gente ya está empezando a desarrollar cosillas usando sus nuevas capacidades. Y es que cada vez más los navegadores lo están adoptando, aunque aún es muy pronto para poder usarlo libremente sin preocuparnos de navegadores menos modernizados (IE8 e inferiores, Firefox 2,…).

Internet Explorer no le aplica estilos a elementos HTML5

Una de las peculiaridades de Internet Explorer es que si no reconoce el tag HTML que estamos usando no nos permite que le apliquemos estilos:

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

El resultado obtenido, nos mostará un texto sin rastros de cursivas. Esto lo podemos solventar con Sjoerd Visscher publicó hace menos de un año y que John Resig nos explica en este artículo.

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
  <script>document.createElement('time');</script>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

Misteriosamente, el texto aparecerá en cursiva. Por este motivo, y para permitirnos darle estilos en IE a los elementos HTML5 disponemos de un sencillo Javascript que nos generará cada uno de los elementos HTML usando el sistema anterior mediante Javascript.

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()

Tan sencillo como insertarlo en un fichero javascript e incluir este código en nuestro <head></head>:

<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->

Conclusiones

Por desgracia, implica que el Javascript es una tecnología requerida para aplicarle estilos a estos nuevos tags. Así que hemos de ser conscientes de ello.

Problema de renderizado en Gecko 1.9b5(Firefox 2, Camino)

Aunque son solo el 3% de los usuarios de Internet que aún están usando Firefox 2, este problema no es despreciable.

Y es que los navegadores basados en Gecko 1.9b5 (o inferiores) tienen un problema a la hora de renderizar elemento de bloque, por ejemplo, si tenemos HTML:

<body>
  <header><h1>Title</h1></header>
  <article><p>...</p></article>
</body>

Gecko, nos lo transforma en algo similar a esto:

<body>
  <header></header>
  <h1>Title</h1>
  <article></article>
  <p>...</p>
</body>

Siendo el resultado muy similar al que produciría Internet Explorer sin Javascript en el ejemplo anterior.

Soluciones

Podemos usar una técnica basada en Javascript que Simon Pieters nos ofrece, o servir XHTML en lugar HTML al navegador:

// HTML
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

// HTACCESS
RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

// PHP
if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
    header('Content-type: application/xhtml+xml');
}

Esto hará más sensibles las páginas web y necesitarán que los tags estén correctamente cerrados ya que pasará a tratarlo como si de XML se tratara.

El elemento video del HTML5

30 Jun

aNieto2k hace 4 días en: Programacion, estandares, web, webdev

+ 1

Se está hablando mucho de HTML5, y no es para menos. Va a suponer un antes y un despues en la forma de mostrar nuestras páginas web a Internet. El tag <video /> es sin duda el atractivo más visual de este nuevo estandar y es que su llegada puede revolucionar el mundo multimeda en Internet.

Antes (ahora)

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

La forma de visualizar un video en una página web, actualmente es similar a la que muestro en este código. Pasa por el elemento <object /> que nos permite especificar otro <embed /> que nos permite incrustar una película flash en nuestro página.

Semánticamente, estamos hablando de un objeto (<object />) embebido en la página (<embed />), pero no nos dice que se trata de un video ya que este código, sirve para incrustar juegos flash, galerías,….

Con HTML5

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
<p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a> instead.</p>
</video>

Con HTML5, además de quedar más claro que este contenido es un contenido de formato video nos permite informar una alternativa a los usuarios que no estén visualizando la aplicación con un navegador con esta capacidad.  Posibilitando descargar el video para que el usuario lo descargue y lo visualize con su reproductor predeterminado.

Conclusiones

Aún nos queda mucho tiempo para poder disfrutar de un potencial real, por el momento tendremos que seguir lidiando con las diferentes versiones de HTML para ofrecer las nuevas características a los navegadores más modernos sin dejar a los navegadores antiguos olvidados.

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>

Si no quieres usar el tag <video />, para que las páginas validen por la W3C, siempre puedes usar la forma válida de incrustar videos flash en tus páginas.

<object width="460" height="265" data="http://vimeo.com/moogaloop.swf?clip_id=5072163" type="application/x-shockwave-flash">
<param value="http://vimeo.com/moogaloop.swf?clip_id=5072163"></param>
<param name="allowFullScreen" value="true"></param>
<param value="always"></param>
</object>

Via

Evita SPAM invirtiendo tu email con CSS

23 Jun

aNieto2k hace 11 días en: CSS, Curiosidades, Programacion, estandares, web, webdev

+ 21

Via Sentido Web descubro un artículo muy interesante que nos muestra como el ingenio puede ayudarnos a solucionar problemas. En este caso, mediante el uso de la propiedad direction del CSS invertimos nuestro email para mostrarlo correctamente por pantalla.

<style type="text/css">
span.test { direction: rtl; unicode-bidi:bidi-override; }  
</style>
<p><span class="test">moc.liamg@5k2oteina</span></p>

Interesante técnica para evitar el SPAM. Quizás como recomendación recomendaría email con algún punto en el nombre para hacer más dificil la lectura del mismo (xxx.yyy@zzzz.aaa). Incluso deberíamos tener en cuenta a los visitantes que no tengan activas las CSS e informar que ese correo está al revés aunque despues ocultemos el texto mediante CSS para los que si lo tengan activado.

Futurebox, el lightbox sin Javascript

21 Jun

aNieto2k hace 13 días en: CSS, Programacion, estandares, web, webdev

+ 7

La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3.

futurebox
(Ver Imagen)

El resultado es muy similiar al ofrecido por cualquiera de las versiones de Lightbox, salvo que con esta versión no disfrutaremos de efectos ni de funcionalidades que nos permitan interactuar con la foto (pasar fotos, cambiar tamaño, moverla por pantalla). Sin duda se trata de un experimento CSS muy interesante.

¿Como funciona?

Veamos el código para entender como han conseguido hacer este efecto.

// HTML
// Miniaturas
<a href="#futurebox_img1">
	<img
		src="gr_ninja-attack_med.gif"
		width="100"
		height="102"
		alt="The CSS Ninja"
		id="futurebox01"
	/>
</a>
// Contenedor de imagenes grandes (uno por cada imagen grande)
<div class="overlay" id="futurebox_img1">
	<div class="overlay_container">
		<a href="#close" title="Close future box">
			<img
				src="gr_cssninja_lrg.png"
				alt="The Css Ninja"
				width="600"
				height="639"
			/>
		</a>
	</div>
</div>

// CSS
html, body { height: 100%; }

.overlay
{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	z-index: 999;
	background: rgba(0,0,0,0.7);
}
	.overlay .overlay_container
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
		.overlay_container img
		{
			background: #ffffff;
			padding: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}

.overlay:target { display: table; }

Como podemos ver la mágia del script es el uso de :target para aplicar el display: table; al fondo de la pantalla (.overlay). Gracias a este pseudo-selector detectamos cuando un enlace-ancla lo está referenciando y al ser este accionado, aplicará el estilo asociado.

Evidentemente por el momento este código, únicamente funcionará en Firefox 1.5+, Safari 3.2+, Chrome 2+ y Opera 9.5+, echarle un vistazo a la demo y vereis lo bien que queda.

7 consejos para desarrollar Javascript de calidad

18 Jun

aNieto2k hace 16 días en: Asides, Programacion, estandares, javascript, web, webdev

+ 4

Luis publica un enlace en el que nos muestra 7 consejos básicos que hemos de seguir los desarrolladores con Javascript para conseguir que nuestro Javascript tenga ese toque de calidad que lo diferencie de un simple script. [Original]

Compatibilidad entre diferentes versiones de javascript y los navegadores

18 Jun

aNieto2k hace 16 días en: Programacion, estandares, javascript, web, webdev

+ 0

Un desarrollador web cada día debe lidiar, para hacer compatibles sus aplicaciones, con los diferentes navegadores que hay actualmente en Internet, con las diferentes versiones de cada uno de los navegadores y además con las diferentes versiones de las tecnologías que usa. Ya sea CSS2, CSS3 o Javascript 1.6, 1.7 … al fin y al cabo siempre tenemos que ir condicionando nuestras aplicaciones para todas las posibles combinaciones. Como sabemos que es nuestro trabajo y que si no lo hacemos nosotros no lo hará nadie, nuestra mejor herramienta es estar bien informado de todo lo relacionado a estas incompatibilidades y así poder acotarlas antes de que el problema nos haga correr.

comparativa
(Ver Imagen)

Para ello, páginas como estas nos ayudarán en el día a día. Se trata de una recopilación de diferencias entre las diferentes versiones de Javascript, desde la 1.6 hasta la 1.8.1, en la que podemos ver la compatibilidad con los principales navegadores disponibles. ¿Conoces alguna más?

Doodle.js, librería para trabajar con canvas

17 Jun

aNieto2k hace 17 días en: Programacion, estandares, javascript, web, webdev

+ 0

Doodle.js es una librería que nos permite trabajar fácilmente con el elemento <canvas /> y todo lo que ello conlleva. Con una estética similar a jQuery, dibujar sobre el lienzo que es <canvas /> es tan sencillo como esto:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <!-- CANVAS PARA IE -->
  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->

  <!-- SCRIPT DOODLE -->
  <script src="./doodle-0.1.js" type="text/javascript"></script>
  <!-- JAVASCRIPT -->
  <script type="text/javascript">
    function init() {
			(function(oo) {
			 oo.canvas('#my_canvas');
			 var box = oo.rect({x:25, y:25,width:50, height:50, fill:"#ff0000"});
			 box.draw(); //draw a red box with initial parameters

			 box.modify({fill:'rgb(0,255,0)'}).translate(50,0).draw();
			 box.modify({fill:'purple'}).rotate(-45).draw();
			 box.modify({fill:'yellow'}).translate(50,0).scale(1.5).draw();
			 box.modify({fill:'blue'}).transform(1.5,0,0,1.5,50,0).draw();

			})($doodle);
    };
  </script>
  </head>
  <body onload="javascript:init();">
  <!-- ELEMENTO CONTENEDOR CANVAS -->
    <canvas id="my_canvas" width="600" height="400">
      <p>Error: El elemento canvas no está disponible para este navegador.</p>
    </canvas>
  </body>
</html>

Ejemplos

No os perdais algunos de los ejemplos disponibles en la página de la librería:

Firefox 3.5 y las transformaciones 3D

16 Jun

aNieto2k hace 18 días en: Actualidad, CSS, Programacion, de la red, estandares, web, webdev

+ 6

Firefox 3.5 nos delitará con la posibilidad de realizar tranformaciones 3D nativamente. Esta propiedad del CSS nos permitirá, entre otras cosas, dar efecto de profundidad a los elementos de nuestra web mediante transformaciones de inclinación y tamaño realizado con unas pocas líneas de código.

isocube
(Ver Imagen)

Código

// HTML
<div class="cube">
    <div class="face top">
    </div>
    <div class="face left">
    </div>
    <div class="face right">
    </div>
</div>

// CSS
.cube {
 position: absolute;
}

.face {
 position: absolute;
 width: 200px;
 height: 200px;
}

// Tranformaciones 3D
.top {
 -moz-transform: rotate(-45deg) skew(15deg, 15deg);
}

.left {
 -moz-transform: rotate(15deg) skew(15deg, 15deg);
}

.right {
 -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
}

Por el momento, deberemos usarla con prefijo (-moz), ya que aún no está estandarizado por la W3C. Por el momento tenemos que conformarnos con la beta 4, pero en poco más de un mes tendremos versión definitiva.

Comparación de cálidad entre Ogg/Theora+Vorbis y Youtube h264

15 Jun

aNieto2k hace 19 días en: Programacion, estandares, javascript, web, webdev

+ 5

Mucho se está hablando últimamente de HTML5 y las mejoras multimedia que incorpora a los nuevos navegadores. El nuevo tag <video /> harás las delicias de más de uno y otros estarán pensando en si este nuevo estandar ofrecerá la misma cálidad que los formatos existentes. De ahí que via hacks.mozilla.org descubra una comparativa [Traducción parcial] de el nuevo formato Ogg Theora+Vorbis(MP3), un estandar abierto y disponible para todo aquel que quiera ayudar al proyecto con nuevas implementaciones y que rivaliza con el formato HD de Youtube que hasta el momento está usando una compresión H264.

Para desmentir alguna falsas ideas que algunos tienen sobre los estándares abiertos:

Si [youtube] fuera a cambiar a theora y mantener apenas la calidad actual que posee, tomaría casi todo el ancho de banda de Internet.

Realizan una serie de pruebas con los dos formatos y demuestran que:

Ogg Theora+Vorbis Youtube h264
bbb_theora_486kbit_3661
(Ver Imagen)		 bbb_youtube_h264_499kbit_366
(Ver Imagen)
  • Theora+Vorbis es sustancialmente mejor que el de YouTube a 327 kbit/seg.
  • Vorbis es mucho mejor que el mp3.

Estas nuevas funcionalidades vienen para quedarse, y lo vamos a notar, eso está claro :D

← Anterior ↑