Ainda não conhece o Windows 8?

Então antes de "conhecer" ele, já vamos iniciar o desenvolvimento com a mão na massa, pois não dá mais para perder tempo!

Desde o dia 13 de setembro já estão divulgando no twitter e facebook sobre a versão Developer Preview do Windows 8…

Quais as principais diferenças entre a Versão 7 e a Versão 8 do Windows?

1. O sistema operacional está sendo desenvolvido para ser responsivo, ou seja vai funcionar em diversas resoluções diferentes com experiência de usuário adaptada.
2. Na versão preview foi dividida as aplicações com o visual de "Tiles" e outra semelhante a do Windows 7.
3. O WPF e o HTML/CSS3 serão as principais formas de desenvolvimento.
4. Além do C++/C#/VB, o JavaScript vai ser muito mais usado nativamente.
5. O objetivo principal da Microsoft é deixar com que funcione aplicativos desenvolvidos com HTML5/CSS3 ou XAML nativamente, assim desenvolvedores de outras linguagens vão ter uma curva de aprendizado menor!

O HTML5

Nada mais é do que uma nova semântica da W3C, agora temos tags como <header>, <article>, <section> entre muitas outras, mas ele sozinho é muito pobre, e talvez até acrescente apenas uma organização muito maior e uma semântica correta para "sempre". É importante saber que nem todos os browsers vão funcionar o HTML5 e muito menos o CSS3, então veja uma tabela sobre quais deles já estão aptos a esta função.

Veja mais testes:
http://samples.msdn.microsoft.com/ietestcenter/

O CSS3

Este sim, ta sendo a sensação do momento! Pois ele está além de organizer as informações, está adicionando funcionalidades importantes na usabilidade, pode se dizer que a web e a internet não serão mais a mesma depois da CSS3, pois com isto estamos enterrando totalmente o FLASH, e de quebra a Microsoft está se tornando mais padronizada!

Pois bem, vamos aos fatos, hoje a CSS3 está sendo desenvolvida por vários "fabricantes", vou denominálos assim, os mais conhecidos são a Mozilla, Web Kit, e a Microsoft, estes e alguns outros provavelmente, estão criando inúmeras propriedades para deixar como sugestão para a W3C adotar estes padrões, mas tudo ainda com muita incerteza e digamos assim, ninguém sabe o que vai realmente ficar e o que vai sair destas novas listagens de propriedades, mas como eu e vocês aqui na @DevBrasil são adoram a MS, vai uma listinha para vocês entenderem um pouco mais sobre esta nova etapa padronizada da MS.
.
Lembrem se que estamos usando um padrão -ms.

1. Transparency
   Agora podemos adicionar transparencia nos elementos HTML e HTML5 através do atributo "style".

   Exemplo com 50% de transparencia:

   background-color: rgb(0, 136, 255);

   border-color: rgb(36, 36, 36);

   color: rgb(36, 36, 36);

   opacity: 0.50;

2. Border Radius
   Com a CSS3 não é necessário usar javaScript ou imagens para deixar as bordas arredondadas, o interessante é que pode se escolher em quais arestas e quanto de radius em cada vértice.

   Exemplo com arestas diferentes:

   border-radius: 10px 0px 10px 10px;

   border-style: solid;

   border-width: 4px;
   

3. Box Shadow
   Efeitos embassados em HTML? Isso mesmo, com o box-shadow em breve poderemos fazer a sombra nos padrões da W3C.

   Exemplo com sombras internas na figura:
   

   border-radius: 13px;

   border-width: 4px;

   box-shadow: inset 5px 12px 22px 0px hsl(59,88%,54%);

4. Text Shadow
   Funciona igual ao box-shadow, porém, somente para fora das letras, o inset somente para o box-shadow.

   Exemplo com sombras avermelhada:
   

   background-color: transparent;

   color: black;

   text-shadow: 6.5px 0px 0px 0px hsla(6, 86%, 54%, 0.25);

5. Gradients
   Agora sem precisar do Photoshop, é possível criar gradients via código CSS3, com certeza uma grande evolução gráfica para os padrões.

   Exemplo com 3 cores no gradiente:

   background-image: -ms-linear-gradient(90deg, black 0%, yellow 26%, red 100%);

6. Typography
   Agora com o @font-face é possível usar fontes que jamais era possível antigamente.
   

   <style type="text/css">

   @font-face { font-family: FelbridgeOTSCondensed; src: url(‘fonts/FelbridgeOTS-Condensed.woff’); }

   @font-face { font-family: ITCGrimshawHand; src: url(‘fonts/GrimshawHand.woff’); }

   @font-face { font-family: FrutigerOTSRegular; src: url(‘fonts/FrutigerOTS.woff’); }

   @font-face { font-family: FrutigerOTSBold; src: url(‘fonts/FrutigerOTS-Bold.woff’); }

   @font-face { font-family: SyndorOTSCondensed; src: url(‘fonts/SyndorOTS-Condensed.woff’); }

   @font-face { font-family: Whimsy; src: url(‘fonts/Whimsy.woff’); }

   @font-face { font-family: Zoinks; src: url(‘fonts/Zoinks.woff’); }

   @font-face { font-family: HandelGothicOTS; src: url(‘fonts/HandelGothicOTS.woff’); }

   @font-face { font-family: AyitaPro; src: url(‘fonts/AyitaPro.woff’); }

   @font-face { font-family: CelesteSmallSCRegular; src: url(‘fonts/CelesteSmallTextScWeb.woff’); }

   < /style>
   

7. 2D Transforms
   Com estas propriedades podemos movimentar os objetos no eixo X,Y.

   Exemplo com propriedades, rotate, scale, skew.

   -ms-transform-origin: 50% 50%;

   -ms-transform: translate(147px, 72px) rotate(23deg) scale(1.2) skew(15.99deg, 15deg) skewY(21deg) rotate(42deg);

   
   

8. 3D Transforms
   Com estas propriedades podemos movimentar os objetos no eixo X,Y,Z.
   

   Exemplo com propriedades, rotate, scale, skew.

   -ms-backface-visibility: visible;

   -ms-transform-origin: 56% 50%;

   -ms-transform: perspective(850px) rotateY(-49deg) translate3d(193px, 48px, 37px);

    

   
   

9. Transitions
   Com estas propriedades é possível fazer transições e animar seus objetos
   

   -ms-transform: rotate(94deg);

   -ms-transition:1.8s cubic-bezier(0.00, 0.46, 0.25, 1.00) 2.5s;

   top: 71px;

    

    

Conheça mais propriedades em:

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/

Como fica o XAML nesta história?

Ele continua sendo utilizado da mesma maneira, mas agora vamos incorporar os estilos dos sistemas baseados na Metro, como o XAML está entre nós desde de 2006, não tem como descontinuar todas as inovações, e transportar todas as propriedades para HTML5 e CSS3, mesmo porque teria muitas coisas que o XAML pode estar a frente, como os PATHS e animações com estes pontos vetoriais, mas vamos levando ambos em paralelo pois vale a pena ter o conhecimento em ambos…

O Desenvolvimento em Windows 8

Build, foi uma conferencia realizada pela Microsoft no dia 13 de setembro de 2011, que foram feitas várias palestras que apresentaram diversas tecnologias interessantes para Windows Phone, Windows 8 e outras variações de desenvolvimento que são super atuais.

Para iniciar o desenvolvimento recomendo que vejam os videos em http://www.buildwindows.com

Além dos videos inicie o desenvolvimento por esta URL: http://msdn.microsoft.com/en-us/windows/apps

Baixe o Developer Preview, e não esqueça, faça um dual boot!
http://www.techtudo.com.br/dicas-e-tutoriais/noticia/2011/09/como-instalar-o-windows-8-em-dual-boot-com-o-windows-7.html