blog reactions
Postado em: 14 de maio de 2008 por Pedro Rogério
O dock do MacOS é com certeza é um aparato invejado por todo sistema operacional, surgiram até alguns javacripts caso você quisesse colocar algum menu estilo dock em seu site, mas como o CSS se torna mais poderoso a cada dia, hoje em dia é possível desenvolver menus desse tipo com CSS Animations:
<html>
<head>
<title>MacOSX Dock CSS Animations
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#page { margin-top:10em;}
.dock li {display:inline;}
.dock img {width:96px; opacity: 0.7; -webkit-transition: all 1s ease-in;}
.dock span {position:absolute;top:3em;left:0;opacity:0;-webkit-transition:all 1s ease-out;}
.dock li:hover img, .dock li:hover span{width:128px;opacity:1;}
.dock li:hover span {left:50%;}
</style>
</head>
<body>
<div id="page">
<ul class="dock">
<li><img src="finder.png" alt="Imagen" /><span class="desc">Finder</span></li>
<li><img src="systempreferences.png" alt="Imagen" /><span class="desc">Preferences</span></li>
<li><img src="firefox.png" alt="Imagen" /><span class="desc">Firefox</span></li>
<li><img src="itunes.png" alt="Imagen" /><span class="desc">iTunes</span></li>
<li><img src="terminal.png" alt="Imagen" /><span class="desc">Terminal</span></li>
<li><img src="trash.png" alt="Imagen" /><span class="desc">Lixeira</span></li>
</ul>
</div>
</body>
</html>
O segredo fica por conta da propriedade -webkit-transition, uma propriedade que somente os usuários dos browsers Safari 3.1 e Webkit podem usufruir. Caso você utilize alguns desses browsers, veja aqui um pequeno exemplo.
Referências
blog reactions
Postado em: 29 de fevereiro de 2008 por Pedro Rogério
Aos poucos os melhores browsers estão migrando para o Windows, dessa vez estão tentando rodar o Webkit no windows:
Referências
blog reactions
Postado em: 4 de janeiro de 2008 por Pedro Rogério
Uma das novidades que o HTML5 promete é a possibilidade de uma base de dados do lado cliente. Por esse motivo, os browsers que queiram seguir esse padrão já devem ir colocando essa funcionalidade em sua lista de pendências, ou então dependerão do Google Gears para essa funcionalidade.
WebKit é o primeiro a dar o passo em relação a isso, depois de implementar o suporte correto a @font-face, agora dão suporte a base de dados com uma API assíncrona para trabalhar com ela. A linguagem escolhida para trabalhar com a base de dados será JavaScript já que está do lado cliente e é a linguagem mais apropriada para isso, usando SQL para interagir com a base de dados.
Exemplo de uso
var database = openDatabase("Database Name", "Database Version");
database.executeSql("SELECT * FROM test", function(result1) {
// do something with the results
database.executeSql("DROP TABLE test", function(result2) {
// do some more stuff
alert("My second database query finished executing!");
});
});
WebInspector
Aproveitando que o WebInspector é uma ferrameta muito úil para os desenvolvedores com WebKit, foi criada uma versão modificada para possuir a possibilidade de administrar as bases de dados locais a partir do browser.
Referências
blog reactions
Postado em: 11 de dezembro de 2007 por Pedro Rogério
Os desenvolvedores do WebKit estão trabalhando para que seu browser tenha suporte as tags HTML5 <audio /> e <video />. O código HTML com a integração de Java Script seria da seguinte forma:
<video />
//HTML
<video src=sample.mov autoplay></video>
//javascript
<script>
function playPause() {
var myVideo = document.getElementsByTagName(’video’)[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
//Aqui é onde controlamos onde o vídeo termina
myVideo.addEventListener(’ended’, function () {
alert(’video playback finished’)
} );</script>
<input type=button onclick=”playPause()” value=”Play/Pause”>
<audio />
var audio = new Audio("song.mp3");
audio.play();
Referências
