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?
- 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.
- Na versão preview foi dividida as aplicações com o visual de "Tiles" e outra semelhante a do Windows 7.
- O WPF e o HTML/CSS3 serão as principais formas de desenvolvimento.
- Além do C++/C#/VB, o JavaScript vai ser muito mais usado nativamente.
- 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.
- 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;
-
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;
-
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%);
-
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);
-
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%);
-
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>
-
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);
-
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);
-
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
