Primeiros passos no Windows 8 (Developer Preview)

O novo sistema da Microsoft está cheio de novidades para o desenvolvimento, entre elas o HTML5 e o CSS3 que irão funcionar de forma nativa no novo sistema operacional, confira como instalar e quais são as principais novidades que irão fazer a diferença.





















Build foi uma conferência realizada em setembro deste ano em Anaheim - Califórina, a conferência teve vários destaques em Windows Phone, Windows 8 com XAML e HTML5 e CSS3.


Para iniciar o desenvolvimento recomendo que instalem o Windows 8 Developer Preview com um Dual Boot, a idéia do artigo é apresentar como iniciar o desenvolvimento das novas tiles.
 

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 diversos tamanhos de telas 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 HTML5/CSS3 serão as principais formas de desenvolvimento.
  4. Além do C++/C#/VB, o JavaScript também vai ser 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.

O CSS3

Podemos dizer que a versão 3 do CSS está fazendo a diferença! Pois além de organizar as informações, está adicionando funcionalidades importantes na usabilidade, podemos dizer que a web não será mais a mesma depois da CSS3, pois com isto estamos enterrando para sempre o FLASH, e de quebra a Microsoft está se tornando mais padronizada em relação a W3C!

 

Produzida por vários "fabricantes", vou denominá-los assim, entre os mais conhecidos estão a Mozilla usa o prefixo -moz, e a Microsoft que usa o prefixo -ms, 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.

Abaixo uma lista com as principais propriedades que estão sendo criadas:

Exemplo de uso css: style="opacity:0.50; -ms-transform: rotate(94deg);"

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

    Exemplo com 50% de transparencia:

    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;

  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:

    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:

    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: 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;

O XAML continua sendo utilizado da mesma maneira, mas agora os layouts das aplicações Windows 8 terão como padrão a Metro, o XAML está entre nós desde de 2006, não tem como descontinuar todas as inovações que já foram feitas com ele, e transportar para as propriedades em HTML5 e CSS3.
 

Para saber mais:
Comunidade de CSS na @devbrasil
Comunidade do Windows 8 na @devbrasil
Baixe o Developer Preview, e não esqueça, faça um dual boot
Conferencia sobre o Windows 8
Conheça mais propriedades em CSS3
Teste o Internet Explorer 10 e HTML5 com CSS3
Todo o desenvolvimento do Windows 8 neste link da MSDN

 

Exibições: 298

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de Daniel Skroski em 12 dezembro 2011 às 13:19

Olha pessoal... nem adianta tentar na VM porque vão ter que rodar o Expression Blend 5, que tem recursos de animação e ainda o Visual Studio 2011, sei lá né, se quizer tenta a sorte... organizar-se para o futuro é importante, então faz a partição no hd usa uma máquina boa e roda o Win8 tranquilo, só quando for desenvolver coisas novas...

Comentário de Henrique Clausing Cunha em 9 dezembro 2011 às 7:17

Para quem está com dúvida quanto instalar em VM, ficou lento pra caramba aqui no meu note!

Comentário de Márcio Araújo em 8 dezembro 2011 às 14:05

A virtualização eu não conseguir também, fiz de tudo baixei versões novas de aplicativos e não deu certo. A melhor forma de testar é criando o dual boot. E o artigo muito massa Daniel Skroski gostei.

Comentário de Daniel Skroski em 8 dezembro 2011 às 4:06

Somente chamando atenção que temos que testar isso no IE10 para que funcione as propriedades -ms (Microsoft), mas podemos usar as -moz que é da (Mozilla) estas funcionam melhor no Firefox :)

Comentário de Cleiton Felipe de Moraes em 7 dezembro 2011 às 21:33

Ok Rafael e Daniel valeu pela dica vou fazer como dual mesmo....obrigado... 

Comentário de Daniel Skroski em 7 dezembro 2011 às 19:28
Dual Boot é bem melhor... E sobre o XAML temos que esperar, mas vamos usando...
A idéia é abrir o sistema operacional para web e outras linguagens além do .NET
Comentário de Rafael Martins em 7 dezembro 2011 às 9:06

 

Cleinton, eu tenho um Q82 que em dual boot o Windows 8 funciona, mas li um post de outro dono de Q82 que em virtualização não conseguiu. Então por aí vc vê algumas diferenças.

Comentário de Cleiton Felipe de Moraes em 6 dezembro 2011 às 12:00

Show cara...muito bom o post...só uma pergunta só vira com dual-boot vou VM funciona legal tbm? (Lógico que com as limitações da virtualização...)

Comentário de Rafael Martins em 6 dezembro 2011 às 11:50

 

O XAML ficando (e vai ficar), é isso que me interessa. O HTML5 e CSS3 estão fantásticos, mas o XAML ainda come eles com farinha no café da manhã. Em todo caso, é bom se livrar das imagens e deixar elas apenas pro que é pra ser: ícones e backgrounds reais.

 

PS: Pelo que ví aqui, ainda tenho que aprender sobre tudo que o box-shadow pode oferecer. Estava usando poucos de seus recursos.

 

Comentário de Ray Silva em 6 dezembro 2011 às 8:52

Bom, muito bom!

© 2019   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço