Tudo sobre CSS em um site.

19 março, 2009 por Weber Amaral

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

17 março, 2009 por Weber Amaral

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

16 março, 2009 por Weber Amaral

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

por Weber Amaral

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

Yoomp

jquery @ 01 - Introdução á jQuery

06 março, 2009 por Weber Amaral

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.

 
Todos direitos Reservados á Weber Amaral - 2009 - HOME | SOBRE | CONTATO