De acordo com os leitores Yure, Andre, Ithalo Jean, LUCAS e Kelvin o problema conciste em que quando a VHD ( HD virtual) é criada em quaisquer que seja o local salvo não é possível excluirá mais,  por conta de que o arquivo no caso a VHD está em uso que nem a imagem abaixo.

Bem o primerio passo para excluirmos essa VHD é ir no gerenciador de disco do Windows 7, é indo no menu iniciar e pesquisar diskmgmt.msc na barra de pesquisa.

Após isso clique com o botão direito do mouse em cima do volume VHD e clique em Excluir volume, caso ele esteja  como volume não alocado pule para próxima etapa.

O volume do VHD não existe mais para o Windows porém o arquivo .vhd ainda fica onde foi salvo.

Para excluir definitivamente a VHD temos que voltar no gerenciador de disco e clicar com o botão direito do mouse no volume VHD que agora não está alocado e clicar em propriedades.

Clique na Driver logo depois em Desinstalar e na janela que se abre clique em OK.

reinicie o computador e exclua o arquivo .vhd

Na tela de Gerenciamento vá em Gerenciamento de disco, clique com botão direito do mouse sobre o VHD que você deseja apagar e selecione Excluir volume.

Utilize o Gerenciamento de disco para deletar um disco

Na mensagem de aviso que aparece clique em Ok ou Yes caso seu windows esteja em inglês. Certifique-se de que não há dados que você precisa na unidade.

No entanto, a unidade não está completamente deletada, você precisa ir e excluí-la manualmente.

É isso aí! Agora sua VHD se foi e você recuperou algum espaço no disco rígido.

O site Pingdom oferece uma ferramenta online muito bacana que serve para ver quanto tempo seu site/blog leva para carregar em seu navegador seu funcionamento é muito simples basta acessar do site Pingdom e colar a URL que queira testar a velocidade e clicar em test now.

Pronto o sistema fará um relatório de todos os arquivos, imagens, scripts que contem seu site e mostrará através de gráficos o desempenho de cada item.

A barra amarela mostra o começo da conexão, a verde mostra a conexão completada,  e a azul exibe o tempo entre o recebimento do primeiro byte até o último byte do arquivo.

No final de seu relatório você terá todas as informações como a quantidade total de imagens, scripts, arquivos CSS entre outros e o seu tamanho em KB e por sua vez o tempo total que a página demora para carregar, veja abaixo o exemplo:

Fontstruct é uma ferramenta online muito legal e intuitiva, ela permite você criar sua própria fonte personalizada e compartilhar com todo mundo sua criação, para utilizar está ferramenta basta cria um cadastro gratuito.

Após que o cadastro tiver feito você poderá criar  suas fontes em um editor bem simples, letra por letra e inclusive números e caracteres especiais e enfim poderá disponibilizar para download e ainda você poderá fazer download gratuito de varias fontes feitas por usuários neste link.

Este vídeo mostra como a ferramenta funciona

Para iniciar o Modo de Segurança é importante que não tenha nenhum disco de armazenamento como disquetes, CDs ou DVDs, reinicie o computador e  mantenha a tecla F8 pressionada enquanto o sistema faz o boot, a tecla F8  precisa estar pressionada antes que o logo do Windows apareça.

Caso o computador estiver mais de um sistema operacional, use as teclas de direção para realçar o sistema operacional que você deseja iniciar no modo de segurança e, em seguida, pressione F8.

Logo depois realce a opção Modo de segurança no menu de Opções avançadas de inicialização.

Para você corrigir possíveis problemas de hardware você terá que fazer um logon no computador com uma conta de usuário que tenha direitos de administrador. A partir daí você poderá “Adicionar/Remover Programas” ou Drives que podem ter causado o problema.

Se o problema não foi causado pelo novo hardware ou programa, é o Registro que deve estar corrompido. Neste caso, infelizmente, há uma probabilidade muito grande de você ter que instalar o Windows novamente para corrigir tudo.

• Veja como HTML 5 substitui o flash
• HTML5 – Tutorial canvas
• HTML5 – Desenhando retângulos com canvas

No post HTML5 – Desenhando retângulos com canvas você aprendeu a criar retângulos e quadrados e hoje utilizaremos o chamado Paths, que irá possibilitar a criação de linhas fazendo outras formas geométricas e neste caso um triângulo e no próximo post explicarei a desenhar arcos e círculos em sua área canvas.
Para criar formas usando Paths precisamos adicionar outros métodos:

Bom chamamos o método beginPath() para abrir a sessão .

Método beginPath()

Esse método tem a função de dizer que vamos começar a desenhar um caminho(path), não possui nenhum parâmetro.

<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
context.beginPath();

}
}
</script>

Agora vamos começar a desenhar utilizando métodos

• moveTo
• Lines
• Arcs (em prevê)

moveTo

Este método não desenha nada em sua tela

ctx.moveTo (x,y);

Lines

O método lineto desenha linhas, esse método funciona como fosse um lápis que desenha uma linha reta até o ponto onde se definiu ao invocar o método.
Sua sintaxe leva coordenadas X e Y, podemos mover o ponto atual com um método moveTo (), o ponto final do caminho anterior é o ponto de partida para o próximo .

ctx.lineTo (x,y);

Veja o Exemplo de triângulo com canvas e o código logo abaixo para você entender melhor, não esqueça de ler os comentários do código que é uma explicação resumida.

<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

// Exemplo de triângulo com cor sólida
ctx.beginPath();
ctx.moveTo(0,0);// O ponto de partida do desenho são as coordenadas 0,0
ctx.lineTo(0,150);// A 1ª linha do desenho vai da coordenada 0 até 150 de largura
ctx.lineTo(150,0);// A 2ª linha começa onde termina a 1ª, ou seja vai da coordenada 150 de largura para 0
ctx.lineTo(0,0);// A 3ª linha começa onde acaba a 2ª, se não houver mais linhas em seu desenho ela automaticamente se encontra com a 1ª linha
ctx.stroke();

}
}
</script>

stroke(), fill() e closePath()

O método stroke servi para deixar sua forma sem preenchimento enquanto o método fill é usado para deixar sua forma com preenchimento de cor sólida suas sintaxes não tem parâmetros

ctx.stroke();
ctx.fill();

O método closePath uni o último ponto do desenho até o primeiro assim fechando a forma, mas caso sua forma ja tenha sido fechada ou há apenas um ponto no desenho este método não faz nada, sua sintaxe não possuí parâmetros.

ctx.closePath ();

Sintaxe de um modelo de código-fonte

Criei um modelinho onde segui a ordem e o que servi cada método só para facilitar um pouco.

<script type="application/javascript">
 function draw() {
 var canvas = document.getElementById("canvas");
 if (canvas.getContext) {
 var ctx = canvas.getContext("2d");

 context.beginPath();// marca o inicio do desenho
 ctx.moveTo (x,y);// mostra o ponto inicial do desenho
 ctx.lineTo (x,y);// desenha linha retas
 ctx.closePath ();// marca o final do desenho

 // Ou você usa o método stroke ou fill, nunca os dois
 ctx.stroke();//deixa o desenho sem preenchimento
 ctx.fill(); // deixa o desenho com preenchimento de cor sólida
 }
 }
 </script>
 <body>

 <canvas id="canvas" width="150" height="150">
 Este texto se mostra para os navegadores não compatíveis com canvas.

 Por favor, utiliza Firefox, Chrome, Safari ou Opera.
 </canvas> </body>
<pre>

Espero que com estas ferramentas possam fazer excelentes fundos (backgrounds) para seu Twitter.

1 Twiback

Esta ferramenta permite  ao usuário trocar automaticamente as imagens de fundo e do ícone do  perfil de seu Twitter em uma interface simples e intuitiva e para tudo isso não precisa ir ao Twitter para alterar essas configurações, mas um ponto negativo dessa ferramenta é que só está disponibilizada em inglês.

2. COLOURlovers

Personalize o fundo de seu Twitter com imagens e texturas de um modo muito fácil tendo em mãos milhares de imagens disponíveis no site e o legal é que o usuário pode ver em tempo real como fica o seu Twitter, para isso basta logar com sua conta, é uma ferramenta muito completa, ela te possibilita alterar cores de diversos lugares de seu Twitter.

3. TwitterGallery

Galeria de milhares de planos de fundo para o Twitter, basta procurar o plano de fundo mas adequado para você clicar nele, colocar seu nome de usuário e senha do Twitter e pronto você terá um novo plano de fundo em seu micro-blog.

• Veja como HTML 5 substitui o flash
• HTML5 – Tutorial canvas

Porém este post é avançado e exige um conhecimento mais profundo sobre HTML e DOM (Document Object Model).

Grade

Para você ter noção maior é preciso ler o post anterior, partindo daquele exemplo da tela de 150 pixels de largura e 150 pixels de altura, é possível começar a desenhar formas.Para entender mais sobre grade separei alguns posts que poderão te auxiliar nessa dúvida:

Curso de CSS – Posicionamentos ( Aula 10)
The grid – (em inglês)
Entender a tela de canvas

Fonte developer.mozilla.org

A origem desta rede é posicionado no canto superior esquerdo (coordenadas (0,0)). Todos os elementos são colocados em relação a essa origem. Assim, a posição do canto superior esquerdo do quadrado azul torna-se x pixels da esquerda e Y pixels do topo (coordenada (x, y)).

Desenhado Retângulos

Primeiramente vamos olhar a sintaxe de três funções que desenha retângulos:

fillRect(x, y, largura, altura) : Desenha um retângulo preenchido.
strokeRect(x, y, largura, altura) : Desenha um contorno retangular.
clearRect(x, y, largura, altura) : Limpa a área especificada e torna totalmente transparente.

Bem cada umas destas 3 funções tem os mesmos parâmetro x e y, os mesmos especificam a posição na tela(em relação à origem), os outros parâmetro largura e altura são bem óbvias.

Quem acompanha desde o post anterior HTML5 – Tutorial canvas vai perceber a função draw () sendo utilizada logo abaixo mais as três funções acima.

function draw(){
 var canvas = document.getElementById('tutorial');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');

 ctx.fillRect(25,25,100,100);
 ctx.clearRect(45,45,60,60);
 ctx.strokeRect(50,50,50,50);
 }
}

• Veja o Exemplo aqui

No próximo post veremos como desenhar círculos, triângulos e a mudar a cor de preenchimentos e mais para frente a fazer animações e até um joguinho com .
Este é o código completo:

<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");

ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
}
</script>
<style type="text/css">
body {

 * margin: 20px;
 * font-family: arial,verdana,helvetica;
 * background: #fff;}

h1 {

 * font-size: 140%;
 * font-weight:normal;
 * color: #036;
 * border-bottom: 1px solid #ccc;

}
canvas {

 * border: 2px solid #000;
 * float: left;
 * margin-right: 20px;
 * margin-bottom: 20px; }

pre {

 * float:left;
 * display:block;
 * background: rgb(238,238,238);
 * border: 1px dashed #666;

 * padding: 15px 20px; margin: 0 0 10px 0; }

</style>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">

Este texto se mostra para os navegadores não compatíveis com canvas.

 Por favor, utiliza Firefox, Chrome, Safari ou Opera.
 </canvas>
 <pre>function drawShape(){
 function draw() {
 var canvas = document.getElementById("canvas");
 if (canvas.getContext) {
 var ctx = canvas.getContext("2d");

 ctx.fillRect(25,25,100,100);
 ctx.clearRect(45,45,60,60);
 ctx.strokeRect(50,50,50,50);
 }
 }
 </pre>

 </body>

Porém este post é avançado e exige um conhecimento mais profundo sobre HTML e DOM (Document Object Model)

Usando o Básico

<canvas id="tutorial" width="150" height="150"></canvas>

A sintaxe desta propriedade é muito parecida com o img , porém a única diferença é de não ter valores src e alt. A propriedade tem apenas dois atributos – Width e Height. Quando não há atributos Width e Height, a tela será inicialmente 300 px de largura e 150 de altura.

O atributo id não é específico para a tag , ele é um atributo HTML padrão e pode ser aplicado a (quase) todos os elementos HTML (como classe , por exemplo). É sempre uma boa idéia  fornecer um id para identificar  nosso script.

Leia este post sobre id e class para entender melhor Curso de CSS – Classes e Id ( Aula 3)

Dicas de uso

Navegadores como o Internet Explorer e versões mais antigas do Firefox não dão suporte para a propriedade , então a solução é fornecer conteúdos que usam a tag e dentro da tag usar um conteudo alternativo.

Veja um exemplo para entender:

<canvas id="stockGraph" width="150" height="150">
 current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

O contexto de renderização

Cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usadas para criar e manipular o conteúdo apresentado. Darei ênfase no  contexto de renderização 2D, que é a única utilizada atualmente. No futuro, outros contextos pode fornecer diferentes tipos de processamento, por exemplo, é provável que num contexto em 3D baseado em OpenGL ES será adicionado aos navegadores.

Inicialmente é em branco, para aparecer algo é necessário acessar o contexto de renderização com um método chamado DOM getContext.

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

Um modelo que vamos usar

Este modelo usaremos como ponto de partida e para exemplos mais tarde.

<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
 function draw(){
 var canvas = document.getElementById('tutorial');
 if (canvas.getContext){
 var ctx = canvas.getContext('2d');
 }
 }
 </script>
<style type="text/css">
 canvas { border: 1px solid black; }
 </style>
</head>
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>

Veja um exemplo

Este simples exemplo chama a interseção de dois retângulos, um dos quais tem a transparência alfa.

<html>
<head>
<script type="application/javascript">

function draw() {
 var canvas = document.getElementById("canvas");
 if (canvas.getContext) {
 var ctx = canvas.getContext("2d");

 ctx.fillStyle = "rgb(200,0,0)";
 ctx.fillRect (10, 10, 55, 50);

 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
 ctx.fillRect (30, 30, 55, 50);
 }
 }

</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

Vamos explorar como isso funciona em mais detalhes nos exemplos mais tarde.
Continue lendo o próximo post HTML5 – Desenhando retângulos com canvas

O que é canvas

canvas é um novo elemento HTML5 que pode ser usado para desenhar gráficos em conjunto com JavaScript, podendo fazer algo simples como gráficos, composições de  fotos ou algo mais complexo como animações.

Foi introduzido pela Apple para o Mac OS X Dashboard e, posteriormente, implementado em seu navegador o Safari, todo navegador baseado em Gecko pode usar essa tag.

Porem nem todos navegadores podem pode fazer de uso dessa tag HTML5, somente  as versões mais recentes do Mozilla Firefox, Google Chrome, Safari e Opera, já o Internet Explorer fica por enquanto fora dessa lista.

Nos próximos posts farei tutoriais ensinando a usar canvas

Abaixo veja alguns exemplos do que essa nova tag HTML5 é capaz

Chupa flashhhh rsrsrs

HTML5 – Blob

HTML5 – Magnetic

HTML5 – Trail

HTML5 – Particle Depth

HTML5 – Wave

HTML5 – Particles

Visite canvasdemos e veja centenas de demos de canvas e descubra o poder de HTML5