Tudo sobre CSS em um site.

Lembrar de todas as propriedades CSS e seus possíveis valores que elas podem assumir é uma tarefa muito difícil, pelo menos para mim, pois são inúmeras. Sem contar também, a sintaxe da regra, formas certas de escrever o código, seletores, pseudo-classes, pseudo-elementos e muito mais.

Para tal façanha, ou temos que ser "nerds" da CSS ou termos um dicionário em mãos, caso contrário temos que buscar ajuda pelo Google e mesmo assim, acabamos ficando sem conhecer todas opções da CSS ou uma melhor forma para o problema que estamos enfrentando no momento.

Procurando na Web por algum material relacionado à "seletor-filho" encontrei um site muito bacana que aborda com explicações e exemplos todas as regras, propriedades, seletores e etc. da CSS. Claro que temos o tão famoso W3Schools que aborda diversas linguagens, porém o www.blooberry.com aborda de uma forma mais didática e também possui uma breve descrição de qual navegador é suportado a propriedade, pseudo-classe, etc. que está pesquisando.

Para os que não gostam muito de inglês tenho más notícias, pois o site é totalmente em inglês, assim como o W3School, porém como a descrição e informações são bem curtas o Google Tradutor é uma mão na roda neste momento.

Apenas como observação, o site também tem um arsenal sobre HTML.
Espero que aproveitem a dica. Abraços.

[ ... ]

sala de artes @ 01

Que a comunicação visual expressa sentimentos que a verbal não consegue, isso nós sabemos, porém Eduardo Recife consegue fazer algo mais, com suas colagens e imagens em estilo "grunge" ele se comunica de forma distinta. Não sendo á toa clientes como New York Times e Upper Playground adorarem seus trabalhos.

[ ... ]

vídeo da semana @ 02

Quem nunca ganhou um tênis, ou até mesmo um sapato, e acabou não gostando por causa da única cor!!!! BRANCA. O que se faz em casos como estes?
Assista o vídeos e veja o "tampinho" que o cara faz.

Para quem quiser ver outros trabalhos do cara é só acessar seu site, solejunkie.com/blog.


Custom Shoes Tutorial from Paulo Canabarro on Vimeo.

[ ... ]

blogoscópio @ 02

Segunda edição de links para outros blogs que acompanho, leio e recomendo!!!

1 - Templates para você.
Blog com diversas dicas, tutoriais, links e templates. Para deixar seu blog com sua cara!



2 - Blog do Monthiel.
Blog com matérias super-interessantes, assuntos variados e bem elaborados. Recomendo!!!

Blog do Monthiel

3 - Templates Novo Blogger.
Sem comentários!!!, simplesmente ótimo blog, recomendo a todos. Com dicas, tutoriais e hacks incríveis.

Templates Novo Blogger

[ ... ]

jquery @ 01 - Introdução á jQuery

Jquery, sem sombra de dúvida, veio a facilitar muito o trabalho dos desenvolvedores, agora podendo se concentrar mais nas lógicas dos sistemas Web e não nos problemas de incompatibilidade com os navegadores. Mas não é só isso, essa framework traz outras funcionalidades.

Funcionalidades tais como: Resolução da incompatibilidade entre navegadores, utilização do código através de plugins, além de uma grande quantidade de plugins criados por desenvolvedores, melhor implementação á CSS1, CSS2 e CSS3, trabalha com AJAX e DOM, redução de código, além de diversos efeitos para serem introduzidos.
São inúmeras as funcionalidades e vantagens de se trabalhar com jquery. Neste primeiro post relacionado á JQUERY irei dar uma breve introdução, aonde baixar, linkar a biblioteca em sua página e finalmente, como chamar a JQUERY.

Aonde baixar

Após sabermos as inúmeras vantagens de se usar jquery e estarmos dispostos a usá-la em nossos trabalhos, páginas pessoais, aplicações Web e etc., vamos primeiramente ao site oficial da Jquery e baixarmos a ultima versão da biblioteca ( Atualmente na versão 1.3.2 ), logo na página inicial, já podemos fazer o download, selecionando a opção Minified, com um tamanho de apenas 19Kb.
Nesta opção de download, vemos que o código da biblioteca está praticamente ilegível, sem comentários e escrito em apenas um linha. Isso, para que, ele seja totalmente otimizado e como é óbvio, carregado mais rápido. Já a versão "Development", o código traz comentários do desenvolvedor e esta todo indentado, trazendo mais facilidade para leitura e compreensão, porém seu tamanho é de aproximadamente 120Kb, sendo assim não recomendado para "linkagem" na página HTML.

Linkando a biblioteca

Após termos baixado a biblioteca e hospedado em nosso servidor de preferência iremos agora linkar ela com nosso documento HTML, assim quando chamarmos alguma função ela estará pronta para nos retornar algo.
O modo como ela será linkada é igual quando linkamos um javascript.

Linkando a jquery
<script type="text/javascript" src=".../jquery-1.3.2.js"/>

Ela deverá ser colocada entre as Tags <head> e </head>. Desse modo garantimos que ela será carregada antes que todo o site seja.

Chamando a jquery

Depois de hospedada a biblioteca e linkada no HTML é hora de chamar a JQUERY, para isso, quando vamos escrever um código, usaremos o seguinte:

$(document).ready(function() {
// Aqui vai seu cógigo
});

Assim o nosso script passa a ser executado, somente, depois que o DOM for carregado, evitando outros problemas.
Se verificarmos outros scripts, iremos notar que em alguns eles não começam dessa maneira e em outros são chamados de outra forma. Porém essa é a forma mais comum e a que utilizo para diversos scripts.
A forma de linkar no documento HTML, e similar á uma folha de estilos ( "para quem está mais habituado á CSS" ), e igual ao se inserir um script. Exemplo:

Linkagem do código dentro do HTML
<script language="javascript" type="text/javascript">
$(document).ready(function() {
  //seu código aqui
});
</script>

Linkagem externa
<script type="text/javascript" src=".../suajquery.js"/script>

Sendo assim podemos agora começar a usar essa framework maravilhosa e dar uma incrementada em nossos sites, criarmos funções, efeitos como fadeIn, fadeOut, slides, animações, melhorarmos os eventos em formulários e etc.
Com isso termino essa pequena introdução e a partir dos próximos iremos conhecer alguns macetes.
Até a próxima.

[ ... ]

Blogoscópio @ 01

Nesta primeira edição do "Blogoscópio" irei indicar alguns blogs que trazem como conteúdo principal, dicas, tutoriais, hacks e diversas maneiras de personalizar seus blogs ( "Templates" ) para Blogger.

1 - Códigos Blog

Blog com diversos tutoriais e hacks para usuários do Blogger.



2 - Dicas Blogger

Outro blog repleto de dicas, tutotiais e hacks para Blogger.



3 - Blogger Buster

Blog em inglês com diversas personalizações para Blogger.

4 - BloggerSPhera

Blog da Roseli que diversas dicas para dar um toque especial no seu template " O meu preferido ", pois possui algumas dicas e explicações das TAG´S do Blogger.




Esses não são os únicos, há diversos Blogs que ajudam as pessoas, principalmente usuários novos, á terem seus blogs personalizados e com diversos hacks maravilhosos.
Estarei atualizando essa área constantemente, mantendo vocês, sempre atualizados, do que há de melhor na Blogosfera.

[ ... ]

Vídeo da Semana @ 01

Engenhosidade e criatividade, show de bola o comercial do Honda Accord.

[ ... ]

Tansformando fotos em desenhos.

O Photoshop, sem sombra de dúvidas, é o melhor editor de imagens que está no mercado na atualidade, usado pelos melhores Webdesigns, fotógrafos e outros profissionais da área. Com isso irei mostrar como transformar fotos normais em desenhos artísticos, sem ter nenhum conhecimento em desenhos.

Para isso iremos abrir o Photoshop, eu uso o CS3, porém o processo de transformação é muito semelhante em outras versões, a não ser em algumas muito antiga.
O processo requer apenas alguns ajustes, dependendo da fotografia escolhida, e após isso iremos apenas trabalhar com os efeitos contidos no Photoshop.

Escolhendo a fotografia

A fotografia escolhida foi essa. Tirada em um dia de sol e com uma luz um tanto que agradável. Porém, como foi tirada de meu celular... " míseros 2.0MP ", ela está com um tom meio que amarelado, por isso irei fazer alguns ajustes antes, para deixá-la melhor.
Mas como disse anteriormente, esses ajustes irão depender de como estará sua foto.

Preparando a foto

Primeiramente, para tirar esse tom amarelado da foto, irei no menu Image > Adjustments > Photo Filter. Irei filtrar essa foto com um tom um pouco azulado, deixando a foto com um tom mais frio de background.



Configurei o ajuste com Filter > Blue, e 30% de Density. Isso serve apenas para dar um acabamento melhor no final do processo.
Agora vamos alterar os Levels da fotos, para isso, vá em Image > Adjustments > Levels, na caixa de diálogo que se abre role as setas até deixar um destaque maior nas extremidades do primeiro plano, que no nosso caso são as crianças e o cachorro.



As configurações que ficaram mais adequadas a minha fotos foram: 28 ; 1,31 ; 236.

Adicionando os efeitos

Agora iremos aplicar os efeitos que irão deixar nossa foto com características de um desenho feito à mão.
Primeiramente iremos em Filter > Artistic > Poster Edges.



Na janela que se abre, vamos configurar Edge Tickness em 2, Edge Intensity em 1 e Posterization em 1.
Nesta etapa, sua foto já está como se fosse um desenho à mão, agora iremos apenas aplicar um Match Color, para dar um realce à mais.



Os valores desta etapa vão depender muito de como está sua foto, e como ela foi ajustada nos passos anteriores. Os valores que consegui para a minha foram esses: Luminance - 63, Color Intensity - 140 e Fade - 52, porém aqui você pode dar uma alterada conforme o visual final.

Considerações finais

Como disse no início do tutorial, o processo é simples, necessitando apenas de deixar as configurações do filtro Poster Edges de acordo com o explicado, para conseguir um efeito mais real.
Com isso, podemos deixar nossas fotos com um efeito bem bacana e criarmos até gravatares com características de desenho.
Já o resultado final da foto ficou assim, espero que tenham gostado!!!

[ ... ]

Hospedagem de arquivos de gente grande.

Hoje em dia se tornou muito comum publicarmos e compartilharmos arquivos na internet, tais como documentos, fotos, músicas e outros arquivos, para isso contamos com uma infinidade de serviços, como Picasa, Flickr, Google Docs, GeoSites e outros, sem contar com os serviços pagos...

Navegando pela internet esses dias, a procura de serviços gratuitos para hospedagem e compartilhamento de arquivos, encontrei o Dropbox, cujo a descrição no website é a seguinte:

Dropbox é a maneira mais fácil de compartilhar e armazenar seus arquivos online.

Como não possuo um servidor na web para hospedar meus arquivos, principalmente os do site, sempre usei alguns recursos alternativos, como o GeoSites, para poder hospedar arquivos com extensões .js (JavaScript), e como tenho usado ultimamente muito jquery não estava contente apenas com os 15MB que o GeoSites me disponibilizava.
Então vamos lá, montei um simples tutorial de como começar a usar o Dropbox, que para nós, usuários do Blogger, me parece ser bem convidativo, visto que podemos armazenar qualquer tipo de arquivo no Dropbox.

Instalando o Dropbox.

Antes de tudo, andei dando uma lida em outros artigos sobre o serviço e pude notar que algumas pessoas tiveram que receber convites para poder criar sua conta no Dropbox. No meu caso não tive esse tipo de problema, sendo necessário apenas instalar o arquivo baixado no site oficial.
O Arquivo para a instalação pode ser baixado AQUI, ele está disponível para as plataformas Windows, Mac e Linux. Após baixarmos o arquivos iremos executá-lo...

1 - Na primeira tela, iremos aceitar os termos de uso.

2 - Escolhemos o local no qual o Dropbox será instalado em nosso computador.

Depois de escolhermos o local em nosso computador, a instalação é iniciada.

3 - Primeira configuração.

Aqui iremos configurar a utilização do Dropbox. Se ainda não tivermos uma conta iremos fazer aqui mesmo, bastando apenas estarmos conectados à internet e selecionarmos a primeira opção. Caso já tenham uma conta basta selecionar a segunda e seguir os passos seguintes.

4 - Criando uma conta.

Como na instalação inteira, este passo é bem intuitivo, apenas tendo que colocar seus dados para cadastrar a conta.

Finalizando e configurando.

Se tudo der certo na configuração da conta a tela acima será apresentada, podendo navegar um pouco no "tour" do Dropbox ou passar está etapa.


Aqui você pode escolher entre, configurar um local aonde serão sincronizado os arquivos com a pasta na Web, por padrão ela fica instalada na pasta "Meus Documentos", clicando em "finish" a pasta local e aberta, como mostra a figura abaixo:


Podemos notar que, por padrão, há duas pasta já criadas "Photos" e "Public" e um arquivo txt, sobre o Dropbox.
Á partir deste momento um ícone do Dropbox se instala ao lado do relógio, o sinal verde significa que está tudo configurado e é só começar a arrastar os arquivos para a pasta "My Dropbox" que eles são automaticamente sincronizados com a Web.
No momento que é inserido um novo arquivo ou pasta na "My Dropbox", o ícone ao lado do relógio muda, com uma indicação que está sendo atualizado com a Web. Clicando com o botão direito sobre o ícone, temos as opções de: abrir a pasta local, navegar na pasta hospedada na Web, visualizar os arquivos sincronizados recentemente, ir para a página do Fórum do Dropbox, atualizar a conta, configurações, tais como ( modificar a pasta local, impedir aviso na barra de tarefas e configurar a rede ).

Considerações finais.

O serviço Dropbox é uma verdadeira mão na roda, tenho usado ele por algumas semanas já, e não tenho o que reclamar. Bem prático e rápido ( claro que dependendo da sua conexão ), podendo ser instalado em discos removíveis e acessados de qualquer lugar, e o melhor, é claro, aceita qualquer tipo de arquivo, o que faz nós, usuários do Blogger, que não possuímos um servidor de arquivos na Web, passarmos a hospedar nossos scripts e outros arquivos que usamos em nossos sites no Dropbox.

[ ... ]