CSS3

Chris Coyier, web designer que mantém o blog CSS-Tricks, escreveu em seu perfil no Twitter que o "CSS é como o xadrez. Você pode aprender os princípios básicos em um dia, e passar a vida inteira se especializando". De fato, o CSS é a linguagem mais fácil de ser aprendida, possuindo uma sintaxe bem simples. Porém, criar páginas com layouts bem elaborados usando CSS, assim como conhecer todos os seus macetes, exige tempo e experiência.

A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes famílias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6, 7 e 8 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4, Firefox 3.6 e o Chrome, Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:

• border-radius: com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.
• text-shadow: permite adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.
• shadow: funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.
• border-colors: podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.
• Opacity: podemos adicionar opacidade aos elementos: opacity: 0.2.
• Columns: podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.
• Multiple backgrounds: podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.
• @font-face: podemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face { font-family: Agni; src: url(’agni-font.otf’) }. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif }.

O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

Vocês podem encontrar mais informações sobre o CSS3 no site http://www.css3.info/.

Texto original em:
http://imasters.uol.com.br/artigo/16315/css/ganhos_visuais_com_o_css3/

Internet Explorer 9

Às vezes as coisas não dão certo na primeira vez, nem na terceira. Quem sabe na nona! Pelo menos é isso que a Microsoft espera conseguir com o Internet Explorer 9, que eles anunciaram na feira Mix 2010. Ele tem suporte a HTML5 (com vídeo em HTML5!), renderização acelerada por hardware para imagens e texto, e uma engine de JavaScript totalmente nova.
A Microsoft fez uma demonstração do último build do IE9, a versão final de algo que parece ainda não ter data para ser lançado, e para algo chatinho como um navegador, esse é bem legal. O que há de novo no IE9?

HTML5

O HTML5 é basicamente o assunto na boca de todo mundo agora, assumindo que "todo mundo" são só desenvolvedores web e viciados em Apple, dizendo que não precisam de Flash. O HTML5 vai salvar a internet! Etc. Mas, na verdade, ele é algo mais sutil que isso: ele é a próxima versão de toda a linguagem que está por trás da web — o HTML — e ele tem suporte a diversas coisas interessantes, que farão os websites se comportarem mais como apps. O Firefox, Safari, Chrome e Opera praticamente deixaram a Microsoft comendo poeira em termos de suporte a HTML5. Até agora! Estas são as funções HTML5 que o IE9 terá, segundo a Microsoft:

• Vídeo H.264: Quando as pessoas falam que o HTML5 vai matar o Flash, é disso que elas estão falando. Alguns sites de vídeos, como o YouTube e o Vimeo, vêm experimentando com reprodução de vídeo que não requer um plugin. O H.264 é o formato padrão que os grandes sites decidiram escolher, e agora o Internet Explorer vai suportá-lo.

• Audio incorporado: Assim como a tag <video> permite incorporar vídeos diretamente em uma página, sem um plugin, a tag <audio> permite que arquivos de audio sejam incorporados em websites. O IE9 tem suporte a arquivos MP3 e AAC.

• SVG (Scalable Vector Graphics): o SVG permite criar certos tipos de gráficos que podem ser ampliados ou reduzidos sem perda na qualidade, porque eles são desenhados como vetores, não como imagens. Ele também permite animações rudimentares, ao estilo do Flash.

• CSS3: o CSS é essencialmente a forma pela qual a web é formatada, e os diversos problemas de compatibilidade que o Internet Explorer apresenta em relação ao CSS vêm enlouquecendo desenvolvedores desde, bem, sempre. O IE9 tem suporte ao CSS3, mais padronizado — incluindo suporte a seletores, cores, valores, planos de fundo e bordas e fontes — e deve suportar mais propriedades antes do lançamento. Enfim: desta vez, eles estão se esforçando.

A nova engine de JavaScript

Os web apps modernos são carregados com JavaScript, e chegamos ao ponto de medir a velocidade de um navegador através da velocidade em renderizar JavaScript. (Uma engine JavaScript mais rápida significa que sites como o Gmail, Facebook e até mesmo o Gizmodo não só carregam mais rápido, como funcionam mais rápido.) Aqui está a posição do IE9 em relação ao JS, de acordo com a Microsoft:

Lembre que este é um teste feito para navegadores que usam WebKit (o que não é o caso do IE9), e que o IE9 ainda não está pronto para ser lançado: a Microsoft diz que eles ainda vão melhorar a velocidade de renderização. E, sinceramente, o IE9 não ultrapassa alguns outros navegadores mais rápidos, mas pelo menos chega perto. E ele é beeeem mais rápido que o IE8. Na demonstração ao vivo, o IE9 não foi terrivelmente mal no teste Acid3, e marcou medíocres 55/100, que a Microsoft prometeu melhorar. Mas, de novo, eles pelo menos estão tentando, e se você tem uma participação de mercado enorme (e um histórico de ignorar padrões da web), como é o caso da Microsoft, isso vale muito a pena.

Aceleração 2D

O Internet Explorer Nove conta com aceleração de vídeo via DirectX para gráficos SVG e até mesmo para renderização de texto, o que vai tornar mais rápida a renderização de CSS3 e de alguns gráficos em SVG, mas também vale para renderização de texto, o que torna todo o processo de navegação um pouco mais fluido.

A renderização de vídeo HTML5 é muito, muito mais fluida que no Google Chrome (demonstrado no evento), simplesmente por causa da aceleração de vídeo via Direct2D: a Microsoft conseguiu exibir dois vídeos em alta definição rodando liso na mesma tela do navegador, enquanto o Chrome engasgava com um vídeo só. Esta aceleração não depende de mais código no site, mas os desenvolvedores web não poderão depender deste tipo de aceleração por hardware, já que ele é restrito ao IE9 no Windows, por enquanto. Além de permitir demonstrações meio absurdas como a mostrada acima, isso quer dizer que qualquer vídeo que use a tag <video> no IE9 vai usar menos CPU do que qualquer outro navegador, o que é uma grande melhora. (Ah, isto não vai funcionar no Windows XP.)

Além disso, parte da renderização do JavaScript também pode ser delegada para a placa de vídeo, o que ajuda na renderização e tempo de resposta de web apps complicadas.

Muito do que a Microsoft está fazendo aqui é, na verdade, tentar alcançar a concorrência. E, além da aceleração 2D, não há muito de novo aqui, em relação aos outros navegadores. Mas a adoção do Internet Explorer é inevitável, e ver a Microsoft adotando padrões modernos da web — pelo menos mais que no passado — vai ter um efeito mensurável e positivo na internet, e nas pessoas que a navegam. (No trabalho, muito provavelmente o único lugar onde quem sabe de computadores usa o IE.)

Preview

Se você quiser, pode testar o IE9 agora, mas algumas das funções — principalmente o vídeo em HTML5 — ainda não estão aqui, e a interface ainda está bem básica. (Não há uma barra de endereços de fato, só uma janela pop-up chamada "Ir Para". Esta é uma ferramenta para desenvolvedores, na verdade.) O download pode ser feito aqui.

Matéria Original em Gizmodo:
http://www.gizmodo.com.br/conteudo/internet-explorer-9-um-novo-comeco-com-html5

Usando border-radius no IE

Para aqueles que odeiam o IE (como eu!) e ficam muito chateados quando precisam fazer aquela borda arredondada nos campos de texto e acabam tendo que usar imagens, porque a !@#$ do IE 6, 7 e até o 8 não aceita essa nova propriedade do CSS 3, agora podem ficar tranquilos, o pessoal do site http://www.htmlremix.com, desenvolveu um arquivo .htc para resolver isso:

Assim como para Safari, Chrome e Firefox usamos, por exemplo:

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px; 
border-radius: 10px;
}

Para usar no IE basta chamar no CSS o arquivo .htc

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
behavior:url(border-radius.htc);
}

Não esqueça de declarar a propriedade “real” border-radius e seu valor, senão o resultado será diferente.

O demo e o arquivo .htc você pode baixar neste link:
http://curved-corner.googlecode.com/files/border-radius-demo.zip

Visite o link – http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Parabéns para o pessoal do HtmlRemix

Alguns sites com dicas sobre CSS:

Gerador de cantos arredondados
http://border-radius.com/

CSS: border-radius and -moz-border-radius
http://www.the-art-of-web.com/css/border-radius/

Curso CSS - [ Usando o border-radius ] A la carte
http://www.brasilhightech.com.br/2010/02/curso-css-usando-o-border-radius-la.html

Geosense para o Windows 7

Você sabia que o Windows 7 tem uma plataforma de sensores e localização com a qual permite que seus aplicativos e gadgets possam saber exatamente onde eles estão, permitindo-lhes fornecer localmente mais conteúdo relevante e funcionalidades? Não? Pois é, aproveitando este recurso foi que criaram o programa Geosense para o Windows 7.

O Geosense é um programa gratuito que utiliza a nova plataforma de Sensores e Localização do Windows 7 para saber onde você está, usando localização por IP e triangulação por rede de celular ou Wi-Fi.

O programa está disponível em versões 32-bit e 64-bit e pode ser baixado neste link. Depois de instalado, você precisa ativá-lo, digitando “sensor” no menu iniciar, em seguida selecione “Sensor de localização e outros sensores” e habilite o Geosense, se ele ainda não estiver ativo.

Vale a pena lembrar que não é necessário ter um chip de GPS em seu PC para obter a sua geolocalização atual utilizando o Geosense no Windows 7.

Fonte:
http://www.win7br.com/2211/descubra-qual-a-sua-atual-localizacao-com-o-geosense-para-o-windows-7/

Pivot: Animação poligonal

Uma curta-metragem dirigida pelo holandês André Bergs.

Muito bom, assistam.

HTML 5

O HTML5 oferece uma experiência web totalmente diferente para usuários e, embora exista um longo caminho para ser finalizado, muitos navegadores importantes - com exceção do Internet Explorer 8 - como o Opera, Google Chrome, Safari 4 e o Firefox 3.5 já implementaram grandes partes da linguagem, incluindo tags de vídeo e suporte à tecnologia Canvas.

Vamos construir uma estrutura básica e falar sobre cada uma delas.

A primeira modificação nota-se no DOCTYPE.

Antes, tínhamos vários tipos de DOCTYPE: Strict, Transitional ou Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

No HTML5, o DOCTYPE ficou infinitamente mais simples:

<!DOCTYPE HTML>

Então a estrutura do HTML5 ficará assim:

<!DOCTYPE HTML>
<html>
<head>
<title>Título do documento</title>
</head>
<body>Conteúdo</body>
</html>

No HTML atual, não há um padrão para a leitura das máquinas do que é um cabeçalho, uma seção, menu ou rodapé. O que geralmente diferencia são as IDs das DIVs. No HTML5 esta padronização existe.

Vejam a diferença:

HTML 4.01

<div id="topo"></div>
<div id="menu"></div>
<div id="conteudo"></div>
<div id="rodape"></div>

HTML5

<header></header>
<nav></nav>
<article></article>
<footer></footer>

Vejam que a estrutura já tem um padrão.

Explicando:

A tag <header> define uma introdução ao documento.

A tag <nav> define uma seção de navegação. Se você possuir botões Anterior e Próximo no seu documento, deve ser inserido dentro da tag <nav>.

A tag <article> define conteúdo externo. Pode ser uma notícia, artigo, texto qualquer ou qualquer outro conteúdo.

A tag <footer> define um rodapé do documento. Geralmente contém nome do autor, data que foi escrito o documento etc.

Agora que nós vimos as tags básicas, vamos dar uma olhadinha em outras super legais:

<aside> é utilizado para representar conteúdo que está relacionado com outro conteúdo dentro de um contexto (<article>). Um exemplo fácil para assimilação são as citações. Se há uma citação em um texto que deve ser destacado, pode-se utilizar o <aside> para destacar certa frase ou citação. Fora do contexto ele é interpretado como conteúdo secundário, não relacionado com o conteúdo em questão.

Resumindo: Se você utiliza o <aside> dentro de uma tag <article> você relaciona a citação com o conteúdo do article, caso contrário, com o tema da página em geral.

A tag <audio> define um som. Pode ser música, som, podcast, etc. Qualquer conteúdo dentro da tag de áudio será um texto alternativo caso o navegador utilizado não suporte a tag.

<audio src="musica.mp3">

Seu navegador não suporta o elemento de áudio.</audio> A tag <áudio> possui alguns atributos importantes:

src: especifica a localização do ficheiro de áudio.

autoplay: especificação de execução automática do arquivo após carregamento. Exemplo:

<audio src="musica.mp3" autoplay="autoplay">

Seu navegador não suporta o elemento de áudio.</audio> controls: especifica se deve ou não exibir os controles de áudio (play, stop, pause, etc).

<audio src="musica.mp3" controls="controls">

Seu navegador não suporta o elemento de áudio.</audio> A tag <dialog> define um diálogo ou conversa, como o próprio nome já diz.

<dialog>
<dt>Pedro</dt>
<dd>Oi Lyvia como vai você?</dd>
<dt>Lyvia</dt>
<dd>Vou bem e você?</dd>
<dt>Pedro</dt>
<dd>Tudo ótimo!</dd>
</dialog>

Tag <details>: utilizada para descrever detalhes de um documento, ou de trechos dele.

<details>Este poema foi escrito por Luis Fernando Veríssimo.</details>

Porfim, a tag <figure>. Ela é utilizada pra inserir uma legenda relacionada a uma imagem, vídeo, áudio, objeto, etc.

<figure>
<img src="imagem.jpg" alt="imagem" title="imagem" />
<legend>Figura 1. Este texto tem relação com a imagem acima.</legend>
</figure>

Utilizando a tag legend, você adiciona a legenda à imagem.

Claro que existem outras tags e atributos, porém resolvi falar apenas das principais, pois há muito mais além de cada elemento. Vou falar de cada uma detalhadamente em artigos separados!

Viram só? Não é tão complicado! Pelo contrário, é bem facinho! Com isso, espero que futuramente os browsers se alinhem a um padrão único de leitura e acompanhem essa padronização, sem que os desenvolvedores necessitem de hacks (leia-se gambiarras) para que os sites funcionem em todas as plataformas!

Espero que eu tenha ajudado!

Até a próxima!

———————————————-
Autor: Michel Martins - Gerente de e-commerce do CPT Cursos Presenciais, programador e professor de cursos tecnológicos da Gigabyte Cursos. Graduando em Comércio Eletrônico pela Univiçosa, é apaixonado por tecnologia e gosta de saber de tudo um pouco.
michelmfreitas@gmail.com

Post original em:
http://imasters.uol.com.br/artigo/16050/

———————————————-

Nerds e o Sexo, Shakespeare e Cerveja

Paulo Cezar o PC fala sobre Nerdiossexualismo, Shakespeare, comenta o que acontece com o corpo de um nerd quando rejeita o sexo, faz criticas muito legais sobre cerveja e bebidas, vale a pena assistir…

“Tirar foto com cerveja, copo de cerveja, garrafa de cerveja na mesa, realmente, é ser bem idiota”.

há, tem mais vídeos aqui: http://www.youtube.com/user/maspoxavida