Recomendações de livros

Um bom livro é com certeza o melhor amigo do desenvolvedor. Em pouco tempo você percebe que independente do curso ou faculdade que faça você não vai aprender tudo, e nessas horas que um bom livro pode fazer a diferença. Eu separei alguns livros que acho bem legal para quem esta começando:

 

USE A CABEÇA! HTML COM CSS E XHTML

‘Use a Cabeça! HTML com CSS e XHTML’ 2ª edição é uma experiência de aprendizado para a criação de páginas Web padrão, mas o leitor não será apenas o leitor – terá que participar de jogos, resolver quebra-cabeças, solucionar mistérios e criar páginas Web. Também aprenderá como o HTML trabalha com o CSS. Para quem nunca ouviu falar do CSS, e ainda cria páginas como se estivesse em 1999 e se deseja criá-las no século 21, então precisa aprender e entender o CSS também.

 

 

Profissional Padrões de Projetos com CSS e HTML

Usar padrões de projetos para estilizar (X)HTML e CSS poupará seu tempo e esforço. Pró Padrões de Projetos com CSS e HTML contém mais de 350 padrões de projetos prontos para uso que podem ser combinados para criar um número ilimitado de soluções para projetos. Você pode se beneficiar instantaneamente de seu poder reutilizável e de sua eficiência simplesmente colocando-os em seu código e ajustando alguns valores!

Cada padrão funciona em todos os principais navegadores da web, incluindo o Internet Explorer 7, o Internet Explorer 6, O Firefox 2 e o Safari 2. Este livro será inteiramente útil e prático ele elimina a necessidade de hacks, truques, testes sem fim, e ajustes constantes nos navegadores para fazer algo funcionar.

 

JavaScript: o Guia Definitivo

JavaScript: O Guia Definitivo fornece uma descrição completa do núcleo da linguagem JavaScript, do padrão DOM e legado implementados nos navegadores Web. O livro inclui exemplos sofisticados que mostram como tratar tarefas comuns, como a validação de dados em formulários, o trabalho com cookies e a criação de animações portáveis usando DHTML. O livro também contém seções de referência detalhadas que abrangem o núcleo da API JavaScript, a API “legada” do lado cliente e a API padrão DOM do W3C, documentando cada objeto, método, propriedade, construtor, constante, e função de JavaScript, assim como o tratamento de eventos nessas APIs. Esta é uma leitura particularmente útil para os desenvolvedores que trabalham com navegadores Web compatíveis com os últimos padrões, como o Internet Explorer 6, o Netscape 6 e o Mozilla.

 

Existem vários outros livros que poderia recomendar aqui, mas optei pelos que me agradaram mais, com exceção do ‘JavaScript: O Guia’ os outros podem ser achados com facilidade em qualquer livraria. Espero que gostem e boa leitura.

Lightroom RC 3.4

Para quem não conhece o Lightroom é um software criado pela a Adobe que visa a rápida edição e o armazenamento de fotos digitais. Ele permite que o usuário importe uma grande quantidade de fotos automaticamente a partir de uma câmera ou cartão de memória, podendo organizá-las em pastas e fazendo diversos ajustes. Ainda permite salvar as configurações para futuros trabalhos.

Semana passada a versão 3.4 RC foi divulgado no Adobe Labs.

Entre as novidades da nova versão estão o suprte a varios perfis de camera e lentes, para quem estiver interesado pode fazer download no link http://adobe.ly/hPNKsu .

Tumblr, a novas mania.

Você já possui o seu?
Eu possuo, hoje mesmo estava dando uma atualizada. Um blog preguisoço… é um bom jeito de nomear o Tumblr.
Rápido, fácil e simples, ele posta informações rápida como o twitter, porém com fotos, videos, textos grandes…

Abaixo um trecho de uma matéria postada hoje no Estadão, e o link para vê-la completa:

“Em fevereiro, o Tumblr passou da marca dos 15 milhões de blogs hospedados nos seus servidores. O número é menor do que o das já tradicionais plataformas de publicação de blogs WordPress (18 milhões de páginas) e Blogger, sistema do Google que está entre os dez maiores sites do mundo. Mas o novato cresce a passos largos desde 2009 e, entre 2010 e 2011, explodiu de vez. Segundo a ComScore, o aumento no número de pageviews foi de incríveis 1.450%, número que cresceu os olhos do mercado em relação ao serviço.”

(Matéria completa AQUI)

E para quem tiver interesse, meu Tumbler, sigam!

jQuery UI

O jQuery se torna cada dia mais fundamental para conseguir ter interatividade e dinamismo na web.

Uma extensão do jQuery muito boa e que é voltada a interação e que pode ser aplicada com facilidade em sites de é a  jQuery UI.

Como diz no próprio site:

O jQuery UI permite interação e animação, juntamente com avançados efeitos, aplicação de temas, tudo isso baseando-se na biblioteca jQuery.

jQuery UI tem como vantagem seu alicerce, já que o jQuery é hoje  a biblioteca favorita dos desenvolvedores, tornando-a fácil de aprender, com boa documentação e exemplos.

A pagina do jQuery UI é http://jqueryui.com/

Mais uma dica Dan Wellman escreveu um ótimo livro sobre o jQuery UI chamado, “ jQuery UI 1.7: The User Interface Library for jQuery” que pode ser adquirido através da amazon ou algumas livrarias especializadas;

Novidades do HTML5 – Parte 2

“Database” client-side

Um dos objetivos do HTML5 é melhorar a experiência do uso de Aplicações Web quando o usuário estiver off-line. Para isto, foi disponibilizada uma API para setar/capturar dados exclusivamente no browser. Uma espécie de “sessão” off-line em que o valor não pode ser capturado pelo servidor.

localStorage.setItem(’chave’,’valor’); // Setar o valor no ‘banco de dados local’
localStorage.getItem(’chave’) // capturar o valor;
localStorage.clear() // limpar o valor do banco de dados local;

Formulários – Novos campos de formulário

Muitas necessidades que os desenvolvedores possuíam e só preenchiam através do javascript foram implementadas no HTML5. Em apenas algumas linhas é possível disponibilizar componentes como: slider, autocomplete, campo data, além de validações de diversos campos. Veja algumas destas opções para formulários:

Telefone – <input name=tel type=tel> - Utilizado para entrada de dados de telefones

URL – <input name=url type=url> – Utilizado para entrada de variadas URLs. Por padrão o browser irá inserir o http:// como protocolo padrão

E-mail – <input name=email type=email> – Caso opte por validação, automaticamente o browser valida se o valor for um e-mail válido

Data e hora – <input name=horario type=datetime> – Utilizado para agendamento de eventos, reuniões, etc.

Número – <input name=numero type=number> – Com os atributos “min” e “Max” é possível entrar com um intervalo de valores possíveis e com o “step” é possível definir o valor para cada incremento

Tempo – <input name=tempo type=time>

Semana – <input name=semana type=week>

Slider – <input name=slider type=range min=2 max=30 step=2 >

Atributo autofocus

Uma boa recomendação para melhorar a acessibilidade e usabilidade de uma página é já deixar o campo principal do cursor selecionado (focus no campo). Normalmente utilizamos a linha de javascript (document.getElementById(’nome_capo’).focus()) para deixar o campo focado.

<input maxlength=”256″ name=”q” value=”” autofocus>

Validações de Formulários

Não sera mais necessário a utilização de javascript para validação de formulários, no HTML5 existe o atributo “required”, que dentro de um elemento input torna o campo obrigatório e transfere para o browser a tarefa da validação do campo.

<p><label>Nome: <input name=name required></label></p>
<p><label>Tel: <input name=tel type=tel required></label></p>
<p><label>E-mail: <input name=email type=email required></label></p>
<p><label>URL: <input name=url type=url required></label></p>

<button>Enviar</button>

Validação por expressão regular

Além de deixar o campo apenas como obrigatório, é possível colocar um padrão de entrada para aquele determinado campo, que será validado pelo browser.

Por exemplo, em um campo em que só possa entrar valores numéricos com 3 dígitos:

<input pattern=”[0-9]{3}”
name=”digito”
required
title=”Validação apenas para 3 dígitos”/>

Observe que o atributo pattern aceita expressões regulares.

Validação por range de valores

No tipo de campo “numérico”, é possível fazer uma validação dos valores possíveis de entrada utilizando os atributos min e max.

<input type=number min=2 max=10 />

Autocomplete

Com HTML5 é simples exibir um input com “autocompletar”, este recurso é bem interessante, pois melhora significativamente a experiência do usuário no preenchimento do formulário – quando bem utilizado.

<label>Homepage: <input name=hp type=url list=hpurls></label>
<datalist id=hpurls>
<option value=”http://www.uol.com.br/” label=”UOL”>
<option value=”http://www.uolhost.com.br/” label=”UOL HOST – Sensacional”>
<option value=”http://www.metadeideal.com.br/” label=”Metade Ideal”>
</datalist>

Novos elementos

O HTML5 inclui novos elementos para melhorar a semântica dos documentos e minimizar o excesso de utilização de DIVS e SPANS (tags sem semântica). Alguns dos novos elementos são:

Header – define o cabeçalho de uma seção

Article – define que o conteúdo é um artigo

Nav – define um menu de navegação

Footer – define um rodapé para a seção

Details – detalhes sobre alguma informação, caso tenha o atributo “open”, exibe o conteúdo, caso contrário esconde.

Figure – conjunto de imagens e legendas

Conclusão

Em portais e websites de larga audiência, com público variado, ainda é cedo para utilizar HTML5 (sobretudo pelo baixo suporte dos navegores líderes de mercado), porém, em Portais ou Webapplications, cujo o ambiente é conhecido (uma intranet por exemplo), já é possível e recomendado que utilizem os novos recursos.

Porém, antes de utilizar recursos do HTML5, pense exatamente qual será o benefício para o seu usuário, usar por usar apenas pelo hype (e se vangloriar para os amigos que você já utiliza html5), e não pensar na experiência do usuário será um erro.

Ter um bom discernimento de “onde usar” e “quando usar” HTML5 será fundamental para o sucesso do seu projeto.

Os usuários de Internet agradecem!

Artigo escrito por: Marcelo Linhares.

Novidades do HTML5 – Parte 1

Muito se fala sobre as novidades do HTML5 e o que ela irá representar para as novas aplicações WEB.

Este post tem a proposta de apresentar o que está sendo discutido na atual especificação, o que já está efetivamente sendo suportado por alguns browsers, bem como analisar o impacto destas novidades no futuro das aplicações web.

O HTML5

O HTML5 foi criado pelo WHATWG (Web Hypertext Application Tecnhology Working Group), grupo formado por desenvolvedores de diversas empresas, como Opera, Mozilla e Apple, que estavam descontentes com o rumo que a W3C estava dando ao XHTML. A proposta do HTML5 é ser uma linguagem melhor preparada para construção de aplicações WEB, bem como ser independente de plugins, além de ter novos elementos que dão mais semântica ao conteúdo. Atualmente o WHATWG e o W3C trabalham em conjunto no desenvolvimento do HTML5.

Embora a versão final do HTML5 esteja previsto para 2012, muitos browsers já estão suportando algumas das principais novidades do HTML5, e a cada dia aparecem exemplos de bom uso dos novos recursos da linguagem na WEB. O Youtube, por exemplo, já possui uma versão experimental do portal em HTML5. http://www.youtube.com/html5

De acordo com a avaliação do HTML5Test, que classifica de 1 a 160 pontos o suporte dos browsers ao HTML5, temos:

1- Google Chrome 4.1 – 118 pontos
2- Opera 10.51 – 102 pontos
3- Firefox 3.6.3 – 101 pontos
4- Internet Explorer 7/8 – 19 pontos

Como podemos perceber a Microsoft – em suas atuais versões de browsers – não tem um bom suporte ao HTML5, porém já anunciou que suportará integralmente o HTML5 em seu novo browser, o IE 9 – com expectativa de lançamento no segundo semestre de 2010.

Um DOCTYPE de fácil memorização

O DOCTYPE possui uma nobre função: orientar o browser como ele deve renderizar o seu conteúdo, porém a memorização da sintaxe dos DOCTYPEs não é tarefa das mais fáceis, principalmente quando lembramos que são três as versões para o HTML 4.01/xHTML (transational, frameset e strict). Geralmente recorremos ao “copy+paste” para inseri-los na página. No HTML5, a declaração é feita em uma linha com 15 caracteres:

<!DOCTYPE Html>

Gráfico nativo com canvas

Uma das principais novidades do HTML5 é o elemento canvas, que através do javascript permite a criação de animações e jogos bem interessantes e, junto com o SVG, promete substituir tecnologias que exigem instalação de plugins, como o Flash, Silverlight e JavaFx.

Vamos utilizar como exemplo a criação de um gráfico simples. Veja a sintaxe do canvas:

<canvas id=”elementoCanvas” width=”900px” height=”200px”>
Seu browser não suporta elemento canvas
</canvas>
<script type=”text/javascript”>

var canvas=document.getElementById(’elementoCanvas’);
var ctx=canvas.getContext(’2d’);

// desenha um retângulo 100px X 100px, com cor vermelha, 50% de transparência
ctx.fillStyle=’rgba(255,0,0,0.5)’;
ctx.fillRect (20, 20, 100, 100);

// desenha um retângulo 100px X 100px, com cor verde, 50% de transparência
ctx.fillStyle=’rgba(0,255,0,0.5)’;
ctx.fillRect (40, 40, 100, 100);

// desenha um retângulo 100px X 100px, com cor blue, 50% de transparência
ctx.fillStyle=’rgba(0,0,255,0.5)’;
ctx.fillRect (60, 60, 100, 100);

// Escreve no gráfico
ctx.fillStyle = ‘#000′;
ctx.fillText (’Gráfico em Canvas, sensacional!’, 15, 15);
</script>

Resultado:

Obs.: Além do atributo “id” (utilizado para identificação via DOM), o elemento canvas só permite dois atributos (largura e altura), quando não especificados, temos por padrão: 300×150px.

Edição de textos em tempo real com o contentEditable

O atributo “contentEditable” foi criado pela Microsoft e incorporado no HTML5. Ele permite deixar “qualquer tag” do documento editável, os valores possíveis são “true” ou “false”.

<p contenteditable=”true” class=”contentEditable”>Você pode editar este texto, para isto, dê duplo clique sob o texto</p>

CSS3 – Novo mundo de possibilidades

O CSS está para o desenvolvedor como o martelo está para o marceneiro. Companheiro inseparável na hora de implementar algum site.

Atualmente o CSS está em sua segunda versão. Ele surgiu no ano de 94 (mais detalhes aqui) e a partir daí vem facilitando cada vez mais a vida dos desenvolvedores.
Em tempos passados, o CSS foi ignorado por quase todos. Hoje, com toda esta revolução em volta dos Padrões, é difícil dizer como vivíamos sem ele.

Você já deve conhecer um bocado destas versões. Queria começar a falar um pouco sobre o CSS 3 que será sua próxima versão. Muitas novidades serão implementadas, por isso, é legal que comecemos a estudar desde agora o que está por vir.
Para começar, o W3C está mudando a maneira que eles atualizam o CSS. Nesta terceira versão, o CSS será dividido em módulos. Cada módulo será atualizado independentemente dos outros. Em vez de atualizar o CSS inteiro, tornando as aprovações e adoção mais demoradas e burocráticas, haverão várias atualizações pequenas, referentes aos módulos de desenvolvimento.
Assim, quando houver atualizações na parte de Seletores do CSS, os dispositivos já poderão adotar esta atualização sem ter que esperar atualizações maiores da linguagem.

Outra vantagem é que separando o CSS por módulos, será mais fácil para dispositivos específicos suportarem o CSS. Eles podem escolher quais módulos suportarão e quais podem ser descartados. Por exemplo, dispositivos que dependem do CSS Aural, poderão monitorar apenas módulos que fazem parte deste pacote. Do mesmo jeito que dispositivos que se interessam só por propriedades visuais, poderão monitorar apenas propriedades que fazem parte desta área.
Dê uma olhada neste link para conferir os módulos e seus respectivos responsáveis.

As propriedades também sofrerão muitas alterações, melhoramentos que facilitarão a vida no desenvolvimento de um site. Mas isso fica para os próximos posts.

Há uma entrevista muito interessante no Slashdot com o Håkon Wium Lie, onde ele reponde algumas questões sobre CSS e seu futuro.

Artigo escrito por: Diego Eis

Galerias jQuery

Olá! Como vão pessoinhas que frequentam meu blog? Tenho uma novidade! Agora o Blog da Chairim possui um colaborador!
O meu querido “Rodrigo Gankutsuou” que possui um incrivel Blog sobre programação “Vida de Programador” , estará por aqui, todas as quartas trazendo novidades, dicas e tutoriais que envolvam um pouco do mundo de design e web.

Espero que gostem!
E de estréia, segue o primeiro post do Rodrigo:

Galeria de foto em jQuery

Uma imagem vale mais que mil palavras. Não há dúvidas sobre isso. A maior parte dos sites hoje utilizam um slide show para exibição de imagens, por ser um método muito eficaz para atrair a atenção dos visitantes.

Nesse meu primeiro post no Blog da Chairim trago dez galerias em jQuery, espero que gostem e até a próxima semana.

jQuery Cycle

Website | Demo

Pikachoose

Official Website | Demo

s3Slider

Official Website | Demo

Galleria

Official Website | Demo

slideViewer

Official Website | Demo

Image Flow

Official Website | Demo

jQuery Gallery Scroller

Official Website | Demo

Spacegallery

Official Website | Demo

Easy Slider

Official Website | Demo

jFlow

Official Website | Demo

Adobe Illustrator agora suporta HTML5

A Adobe lançou um add-on para o editor de design do Illustrator CS5 que permitirá que os desenvolvedores exportem seus designs para a Web e plataformas móveis usando recursos do HTML5.

Segundo David Macy, gerente de produto sênior na Adobe, os desenvolvedores poderão criar um design uma só vez e exportá-lo para múltiplas plataformas, como páginas da Web, smartphones, tablets e mídia impressa.

O add-on permite a renderização de designs usando CSS3, o elemento canvas do HTML5 e o formato de imagem SVG.

Os usuários podem fazer o download do Adobe Illustrator CS5 HTML5 Pack clicando aqui.

Fonte: Baboo

Calmaaaaa que faltam só 3 meses para eu me formar e voltar a me dedicar aqui!!! =D