Archive for the ‘Web’ Category
5 Ferramentas Online para Web Designers/Developers
Um bom desenvolvedor web que se preze sabe que não param de surgir por aí ferramentas que facilitam (e muito) a vida, principalmente no quesito design.
Muitas dessas ferramentas são online, acessadas diretamente pelo navegador, e facilitam em aspectos básicos de design, que normalmente tomariam um tempo que seria melhor gasto em aspectos mais complexos.
Vou listar e descrever abaixo algumas que eu uso. Caso conheça alguma outra, compartilhe nos comentários! 
Form style generator: Esta é uma ferramenta bem útil para gerar o CSS de campos de formulário. Você pode personalizar o fundo do campo com degradê, colocar borda de vários tipos e tamanhos, configurar a fonte e efeitos de hover e focus. Depois de configurar do jeito que você quer, basta clicar em “Your CSS” e todo o código CSS será gerado automaticamente para você.
Genfavicon: Excelente para criar o favicon de seu site (ícone que aparece na “aba” em que seu site está aberto e na barra de endereço). Escolha a imagem que você deseja utilizar por uma URL ou por upload, escolha o tamanho desejado, defina a área de corte e pronto! Seu arquivo favicon será gerado com o formato e o tamanho correto.
Spiffy Corners: Essa é realmente muito útil! Sabe aqueles quadros com borda arredondada que você fazia utilizando imagens no atributo “background” do CSS ou utilizando o border-radius (que não funciona no IE)? Então, essa ferramenta faz todo o trabalho sujo pra você sem utilizar imagens nem border-radius, tornando seus quadros cross-browser. Defina o nome da classe, a cor do fundo, a cor do quadro e pronto! Você terá em mãos o HTML e CSS no ponto para serem usados.
Ajaxload: Indispensável para quem precisa de uma animação de loading, principalmente para requisições ajax. Você escolhe uma animação entre dezenas de possibilidades, personaliza a cor de fundo (ou deixa transparente) e a cor da animação. Depois é só clicar em “Generate It” e você terá sua animação personalizada em .gif, pronta para ser usada.
Stripe Generator: Ferramente perfeita pra criar backgrounds de sites com listras. Você pode configurar o tamanho, o espaçamento, as cores e a orientação das listras, além de definir o estilo do fundo (opaco ou com degradê). Também é possível colocar sombreamento nas listras. A imagem gerada é de 40×40, bastando você repetí-la através do CSS para obter o efeito de listras no fundo do site.
Chrome Experiments: O que está por vir na web!
Com certeza uma das coisas mais aguardadas pelos desenvolvedores web é a chegada do HTML 5 e seus novos recursos e firulas.
Para demonstrar o potencial da junção do HTML 5, com o avanço do javascript e diversas outras tecnologias novas que não param de pipocar, como o Canvas e o SVG, o Google mantém um site chamado Chrome Experiments, que tem por objetivo demonstrar experimentos criados por designers e desenvolvedores espalhados pelo mundo, que utilizam essas novas tecnologias.
Os experimentos são fantásticos, e já da pra perceber que teremos em um futuro breve um novo conceito de navegação e interatividade nos sites.
Pra você conseguir abrir os experimentos com perfeição, você tem que utilizar o Google Chrome, que é o navegador que possui a maior compatibilidade com o HTML 5 e essas novas tecnologias. Com o Chrome em mãos, divirta-se!
Showcase: Sites com jQuery
Boa noite pessoal!
Depois de quase 2 semanas sem posts (o tempo anda curto), vamos falar mais um pouco sobre jQuery.
O que não falta por aí são sites que realmente impressionam, que ao bater o olho você jura que foi feito em Flash, mas que no fim das contas trata-se de grandes idéias implementadas utilizando jQuery.
Para mostrar o poder dessa biblioteca javascript, vou mostrar aqui alguns sites que vi nesses últimos dias e que me chamaram a atenção:
1 – Elliott Kember – freelancer web developer: Por ser um site de uma web designer, você estranha logo de cara por não ter um layout atrativo. Mas ao observar uns “quadradinhos” se movendo na tela você acaba percebendo que trata-se daquele joguinho clássico “snake”, e você ainda pode jogar controlando a “cobrinha” pelo teclado! Para completar, no canto superior esquerdo, a página está “descolada”, e ao puxá-la com o mouse você consegue ver o código fonte por trás! Criativo, não?
2 – youlove.us – Além de um layout muito bem feito, destaca-se o cabeçalho e o rodapé. Um efeito no fundo cria uma espécie de animação, mudando a tonalidade do fundo. No rodapé, onde se tem a imagem de uma cidade, cria-se um ciclo de noite e dia muito bonito!
3 – Durham Web Design – O interessante neste site é a área de navegação, que ocupa o site inteiro. Forma uma espécie de mosaico mostrando o portfolio do designer, que ao passar o mouse sobre suas partes indica que tipo de trabalho se trata. Vale destacar também o efeito de fade na transição de uma página para outra. Simples e elegante!
4 – slicemachine.com – O efeito do menu no topo apesar de simples é bonito, mas o destaque mesmo é o efeito utilizado nos 5 quadros. Este realmente dá a impressão de que é flash!
5 – arnaud-k.fr – O efeito nas divs do topo é muito interessante. Ao movimentar do mouse elas se deslocam em direções alternadas, dando a impressão de que o terreno, as nuvens e o avião estão se mexendo! O menu também possui um efeito que remete a flash, e os quadros no conteúdo são revelados com fade ao passar do mouse.
Enfim, existe uma infinidade de outros sites que utilizam jQuery neste nível, ou até em um nível superior. Estes eu encontrei no usejquery.com (excelente showcase de sites que utilizam jQuery). Fique a vontade para comentar e indicar outros sites (não vale sites em flash =P)!
Até a próxima!
O novo Google Wave
O Google Wave é um novo produto da Google que utiliza todos os recursos da Web 2.0.
Ele integra aplicação de email – GMail, mensageiro instantâneo – GTalk, blogs – Blogger, ferramentas wiki, redes sociais – Orkut, recursos de chat, compatilhamento de arquivos, compartilhamento de imagens – Picasa, tradução simultânea (inclusive dos chats), ferramenta de colobaração – permite que grupos desenvolvam aplicações, textos, entre outros. E isso tudo seria possível na mesma janela de seu navegador. No momento, o serviço está em testes para alguns desenvolvedores. Abaixo, uma prévia dele.
O que vocês acham dele? Comente!
Verifique se seu PC suporta seus Games
Utilizando do exemplo abaixo do Windows 7, onde a Microsoft lançou um software que escaneia seu PC e verifica sua compatibilidade, existe um software, o Can You Run It?, há bastante tempo que faz isso, mas para jogos.
Todos os novos jogos e os de mais sucesso do passado estão no site. Ao acessar o site você escolhe o jogo, ele baixa um software que faz o scan e te mostra os resultados, como no exemplo abaixo para o jogo GTA IV.
Informa os requisitos mínimos (esquerda) para rodar o jogo e os requisitos recomendáveis (direita).
Qualquer dúvida / sugestão, comente!
Converta vídeos do Youtube para MP3 (este sim funciona!)
Esses dias postei sobre um site onde é possível converter vídeos do Youtube para diversos formatos, mas o problema é que ao converter para o formato MP3 ele está retornando um arquivo de 0 bytes, ou seja, está bugado! Para os formatos de vídeo parece que está funcionando normalmente.
Enfim, procurando por aí acabei achando este site chamado video2mp3 que faz a conversão dos vídeos do youtube para mp3 e funciona que é uma beleza. O funcionamento dele é similar ao vixy.net, confira:
1 – Abra o video2mp3 e copie o link do vídeo que desejar do Youtube na caixa de texto ao lado de “Youtube URL:”
2 – Se o vídeo estiver disponível em qualidade alta (HQ), você pode fazer a conversão para uma qualidade alta de áudio, marcando na opção “High Quality”. Depois de escolher a qualidade, clique em “Convert”:
3 – Aguarde alguns minutos enquanto a conversão é realizada. Após o término, se o seu navegador não pedir para salvar o arquivo automaticamente, clique em “Download MP3″:
Mesmo indicando o tempo de vídeo e o tamanho do arquivo errados, o download funcionou perfeitamente
É impressionante a quantidade de sites que oferecem este tipo de serviço! Você conhece algum melhor ou que tenha mais opções? não deixe de comentar!
Acesse seu Twitter sem precisar entrar no site com o TwitterFox
O que realmente deixa o Firefox em um patamar acima dos demais navegadores é o fato de você poder instalar complementos pra facilitar sua vida. Agora que eu entrei na onda do Twitter, um complemento que realmente quebra o galho e se torna indispensável é o TwitterFox. Com ele você tem controle total sobre seu Twitter sem precisar entrar no site. Quer ver como funciona? Veja passo-a-passo:
1 – Entre aqui e clique em “Adicionar a Firefox” para instalar o complemento (Aceite a instalação quando o pop-up aparecer).
2 – Quando o seu Firefox for reiniciado após o término da instalação, o ícone do TwitterFox ficará disponível no canto inferior direito da tela. Clique nele!
3 – Uma janela de configurações se abrirá. Clique em “Adicionar Usuário” e coloque seu nome de usuário e senha do Twitter e dê Ok. Nesta tela é possível configurar o intervalo com que novas mensagens são verificadas além de diversas outras opções. Clique em Ok quando terminar.
4 – Agora ao clicar no ícone do TwitterFox, uma janela se abrirá mostrando seu Twitter:
- Recent: Mostra as últimas mensagens como se fosse o “Home” do seu Twitter.
- Replies: Mostra as últimas respostas que você recebeu.
- Messages: Mostra as últimas mensagens diretas que você recebeu.
- Para enviar uma mensagem, basta digitar na caixa de texto abaixo das abas e apertar Enter. Simples assim.
- Ao clicar na “corrente” ao lado da aba Recent você cola o endereço que está no seu Firefox na caixa de texto (economizando o famoso ctr+c – ctrl+v).
- Ao receber novas mensagens, um balãozinho (parecido com aquele de quando entra alguém no MSN) surge no canto da tela.
Com o TwitterFox, a única necessidade de acessar seu Twitter pelo site será para procurar novas pessoas!
Vem aí o novo buscador da Microsoft: o Bing
Com o atual fracasso do Live Search e o esmagador domínio do Google na área, a Microsoft aposta em seu novo mecanismo de busca para bater de frente com seu maior rival. Steve Ballmer, CEO da Microsoft, apresentou nesta quinta-feira, em uma conferência, o buscador que foi oficialmente batizado de Bing, e que começa a ser lançado mundialmente nos próximos dias com previsão de estar 100% no ar até a quarta-feira que vem ( 03/06).
Segundo a Microsoft, o Bing fará buscas de maneira inteligente e não somente um rankeamento dos sites mais relevantes. Com ele, será possível localizar endereços, comparar preços de produtos, verificar disponibilidade de passagens, reservas em hotéis, etc. Será possível também obter respostas diretas para perguntas, fazendo o papel de uma enciclopédia.
As novidades são diversas, e o vídeo mostrado abaixo mostra o novo mecanismo em funcionamento! Resta saber se todas essas novidades prometidas serão suficientes para desbancar o todo poderoso Google!
Converta vídeos do Youtube para MP3, MP4, AVI, MOV e 3GP
Nunca foi tão fácil ter aquele vídeo que você viu no Youtube nos formatos mais usados de mídia, como MP3, AVI, MP4, MOV e até 3GP. O melhor de tudo, é que não é preciso instalar nenhum aplicativo para isso, pois existem diversos sites pela web que fazem todo o trabalho para você.
Experimentando diversos deles, o que me gerou melhor resultado foi o vixy.net. Veja como é fácil:
1 – Abra o vídeo que desejar do Youtube e copie sua URL, que pode ser encontrada no lado direito, na caixa de informações:
2 – Entre no vixy.net, cole a URL do vídeo, escolha o formato desejado e clique em Start:
3 – Após completar a conversão, o arquivo ficará disponível para download, bastando clicar em “Download the converted video”:
Pronto! Agora você pode ter o vídeo que você quiser do Youtube no seu computador!
Personas: Skins para o Firefox
Eu sempre gostei muito do tema padrão do Firefox 3, mas sempre achei ele muito simples, e uma mudança de cores ou textura viria bem a calhar. E é aí que entra o Personas, um complemento pra você “mudar a roupa” do tema padrão do Firefox. Veja como funciona:
Entre no site do Personas e clique no botão “Get Personas for Firefox – Free”:
O Firefox pedirá permissão para instalar o complemento. Aceite, e depois de reiniciar você já estará pronto para escolher as skins que você quiser. Visite a galeria de skins e divirta-se!
