Video HTML

Ya publicamos un artículo sobre vídeo no hace mucho…

Ahora, nos basamos en un concepto puro HTML y CSS, sin Javascript ni librerías de terceros. Sí, es posible con una centésima parte de lo que ocupan estos scripts. En concreto, menos de 2Kb. toda la página. Es flexible y adaptable a cualquier proyecto Web. Compatible con los navegadores: IExplorer 8+, Opera 12+, Safari 5+, Firefox 30+, entre otros…

Puedes ver un ejemplo en: Vídeo Test

Anuncios
Video HTML

Full Screen CSS

Un ejemplo muy sencillo basado en CSS que hice para “Pantalla Completa” con texto en caption translúcido… Una imagen de fondo fija ajustada proporcionalmente al tamaño de la zona visible del navegador, y el texto, incluido en DIVs con fondo translúcido, queda en primer plano.

Veamos aquí el detalle. Pulsando la tecla de función [F 11] se amplía a pantalla completa.
Se puede ver el código fuente completo incluido en la página.

Full Screen CSS

FullScreen API

Es sabido el interés que tienen los Sitios basados en imágenes, fotos ocupando toda la pantalla. Sí, toda la pantalla del monitor completa. Se puede conseguir pulsando la tecla de función [F 11] con el Navegador abierto. También, hay opciones basadas en Flash, HTML5, Canvas… Pero, ¿es posible con JavaScript puro?. La respuesta es, con algunas limitaciones, sí. La compatibilidad con los Navegadores es el otro “Caballo de batalla”. No obstante, vale la pena probar. Para empezar, veamos lo que hay al respecto:

http://sindresorhus.com/screenfull.js/

http://www.thecssninja.com/demo/fullscreen/

http://html5professor.com/tutoriels-18.html

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities

http://stackoverflow.com/questions/7495373/how-to-make-browser-full-screen-using-f11-key-event-through-javascript

Native Fullscreen Plug-in para WP:

http://wordpress.org/extend/plugins/native-fullscreen/

Etc…

Espero que, salvando barreras de idiomas, saquemos algo en claro. Es un tema que está de “actualidad”. Personalmente, he dedicado algún tiempo en los últimos años, me gustaría desarrollar algo sencillo y compatible, en base a lo ya publicado. En fin… Aquí está la primicia:

<!DOCTYPE html>

<html>
<head>
<title>full-screen</title>
<style type=”text/css”>
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<script type=”text/javascript”>
function fullscr() {
if (document.body.requestFullscreen) {document.body.requestFullscreen();}
if (document.body.msRequestFullScreen) {document.body.msRequestFullScreen();}
if (document.body.mozRequestFullScreen) {document.body.mozRequestFullScreen();}
if (document.body.webkitRequestFullScreen) {document.body.webkitRequestFullScreen();}
if (typeof window.ActiveXObject !== “undefined”) {
var wscript = new ActiveXObject(“WScript.Shell”);
if (wscript !== null) {wscript.SendKeys(“{F11}”);}
}
}

function fullcls() {
if (document.exitFullscreen) {document.exitFullscreen();}
if (document.cancelFullscreen) {document.cancelFullscreen();}
if (document.mozCancelFullScreen){document.mozCancelFullScreen();}
if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}
if (typeof window.ActiveXObject !== “undefined”) {
var wscript = new ActiveXObject(“WScript.Shell”);
if (wscript !== null) {wscript.SendKeys(“{F11}”);}
}
}
</script>
</head>
<body>
<button onclick=”fullscr(); return false”>Fullscreen</button> <button onclick=”fullcls(); return false”>Normal</button>
</body>
</html>

Como dije, tenía pendiente algo sencillo, compatible con: IExplorer 7+, Firefox 20+, Opera 12+, Safari 5+, etc. en Windows. La página del ejemplo ocupa 1,28 Kb. , para que más…

FullScreen API

Miscelánea

Un poco de todo, algunos enlaces a un click de distancia. Iremos ampliando la lista de Webs; para empezar, recomendamos:

Best Download Sites

Source Code Online

Your Free Scripts

Free Templates

Smashing Magazine

Dezinerfolio

Siiimple

Minimal Sites

Site Inspire

Minimal Exhibit

Folio Focus

Blog Design Heroes

Splashnology

Designspiration

Art Lawyer Magazin

Form.de

swissted.com

CSS Rainbow

CSS Luxury

CSS Line

CSS – Tricks

Love Textures

CL Cristalab

Web Resources Depot

Web 2.0 Badges

Anieto2k.com

The New Code

Demosthenes.info Blog

Tympanus Web Development

Codrops – useful drops of code

TheCodePlayer

Creative JS

Javascript 3D Library

Javascript 3D Examples

Malihu Web Design

Unijimpe

Leigeber

SlayerOffice

Milov.nl Experiments

The Huntingground

VicsJavaScripts

Javascript-FX

DHTML Site

BodyTag

W3Schools

Interec Manuales

Web Development Tutorials

HTMLSource Tutorials

O’Reilly’s CD bookshelf

Project Fondue

Learn HTML & CSS

Y más…

Un Saludo.

Miscelánea