sábado, 20 de novembro de 2010

JQuery para iniciantes

O JQuery é uma biblioteca feita para simplificar a utilização de JavaScript nas páginas.

Os requisitos para se trabalhar com JQuery são:
    - fazer o download da versão mais atual do JQuery;
    - incluir o arquivo .JS na sua página através do código: 
        <script type="text/javascript" src="nome_do_arquivo.js"></script>
    - conhecer o básico de JavaScript;
    - entender a estrutura do JQuery.


Entendendo a estrutura do JQuery
Cada comando pode ser dividido basicamente em 3 partes:
    $() => É a função que gerencia tudo aquilo que você quiser implementar.
    .click() => Representa o evento que será utilizado.
    function(){ } => Lugar onde deve ser indicado o que irá acontecer quando o evento ocorrer.

No exemplo abaixo, quando a página for carregada, será chamada a função que exibirá uma mensagem ao usuário.

$(document).ready(function(){
    alert("olá mundo!");
   })


Se criarmos uma DIV em nossa página poderemos, por exemplo, aplicar um efeito de desaparecimento apenas clicando nela:

 <div id="mensagem">Eu consigo ler essa frase!</div>


        <script type="text/javascript">
            //<![CDATA[
                $(document).ready(function(){
                    $('#mensagem').click(function(){
                        $('#mensagem').toggle();
                    })
                })
            //]]>
        </script>

Perceba que foi indicado o ID da DIV mensagem para que a mesma suma ao ser clicada.

Essa é apenas uma das formas de se trabalhar com JQuery, para conhecer as demais formas e eventos, acesse a página de documentação do JQuery, nela existem diversos exemplos, não se esqueça de passar também pela página de plugins.


Segue o cógido completo do exemplo (não esqueça de fazer o download do JQuery para que funcione!).

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Trabalhando com JQuery</title>
        <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
   
        <script type="text/javascript">
            //<![CDATA[
                $(document).ready(function(){
                    $('#mensagem').click(function(){
                        $('#mensagem').toggle();
                    })
                })
            //]]>
        </script>
    </head>
   
    <body>
         <div id="mensagem">Eu consigo ler essa frase!</div>
    </body>
</html>

segunda-feira, 1 de novembro de 2010

Menu horizontal com CSS

O menu é parte essencial em qualquer site (a menos que o seu seja formado por apenas 1 página!), irei mostrar como fazê-lo utilizando a tag <ul> do XHTML, deixando-o assim muito mais prático de reutilizar.

Quando criamos a nossa lista com os itens do menu usando <ul>:

        <ul>
            <li>item do menu</li>
            <li>item do menu</li>
            <li>item do menu</li>
            <li>item do menu</li>
            <li>item do menu</li>
        </ul>

o resultado fica parecido com:


Cada um de nossos <li> ocupam uma linha, isso ocorre pois esta tag é considerada de bloco, ou seja, mesmo que o conteúdo dela seja pequeno, todo o espaço da linha é reservado.

Para mudar esta característica utilizaremos o elemento FLOAT do CSS, o código ficará assim:

            li
            {
                float: left;
               /* a partir daqui meu CSS formata a aparência de cada item do menu */
                width: 200px;
                text-align: center;
                list-style-type: none;
                border: 1px solid #000;
                background-color: red;
            }
A função do FLOAT aqui é fazer com que cada um de nossos <li> fiquem "soltos" na tela. Como indiquei que ele irá "flutuar" para a esquerda, o conteúdo do meu <li> se moverá até encontrar algum obstáculo nesta direção. Esse efeito acontecerá em todos os itens da lista, fazendo com que ela fique na horizontal.

O resultado após terminarmos a formatação será esse:


Faça o teste modificando o FLOAT para right (direita) e compare os resultados.



Segue o código completo usado para criar o menu:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Menu horizontal com CSS</title>
        <style type="text/css" media="all" id="test">
            li
            {
                float: left;
                width: 200px;
                text-align: center;
                list-style-type: none;
                border: 1px solid #000;
                background-color: red;
            }
           
            a
            {
                color: #FFF;
                text-decoration: none;
            }
        </style>
    </head>

    <body>
        <div id="menu">
            <ul>
                <li><a href="#">item do menu</a></li>
                <li><a href="#">item do menu</a></li>
                <li><a href="#">item do menu</a></li>
                <li><a href="#">item do menu</a></li>
                <li><a href="#">item do menu</a></li>
            </ul>
        </div>
    </body>
</html>

segunda-feira, 25 de outubro de 2010

Desenvolvendo a lógica - Um Desafio Nacional

Responda rápido:
Um homem está preso em uma torre. Nesta torre há duas portas, sendo que somente uma delas é a saída. Em cada porta há um guarda, um deles só fala a verdade, o outro só fala mentiras. Para que o homem possa ser libertado deverá fazer somente uma pergunta para somente um dos guardas. Pela resposta dada ele saberá qual é a saída. Qual é esta pergunta?

Já sabe a resposta? O quanto você acha que ficou mais inteligente após desvendar esse raciocínio lógico?


Para desenvolver o raciocínio lógico costuma-se realizar o estudo de Algoritmo e a interpretação de enigmas como o citado acima. Entendo a importância desses recursos, porém eles têm uma limitação, não agregam conhecimento sobre o assunto abordado, tudo o que precisamos saber já está contido no próprio enigma.

Temos como alternativa na internet diversos sites no seguimento de riddle (enigma), normalmente possuem o formato de WEBQUEST e abordam o assunto de forma mais criativa. Entre eles destaco o Desafio Nacional Acadêmico, que é promovido pelo Projeto Nacional de Educação a Distância - ProNEAD em parceria com outras Instituições como a National Geografic Brasil e a Coquetel.

 Veja como essa abordagem é muito mais interessante:

  

Demorou um pouco para chegar na resposta? Ainda não descobriu? Ok, vou dar uma dica, este é um idioma muito antigo, portanto o Google Translate não te ajudará em nada!


E que tal um sobre música?



Perceba que para responder aos desafios, você precisou pesquisar por diversos assuntos relacionados, tentando sempre associá-los com as informações disponíveis no enigma até chegar na resposta. Sem perceber, você adquiriu conhecimento e aprimorou o seu raciocínio lógico, muito melhor assim, não acha? 


Para mais informações acesse a sessão Como Funciona do site do Desafio Nacional Acadêmico, talvez você se interesse em montar uma equipe, mas já adianto que a disputa não será fácil!

domingo, 24 de outubro de 2010

A Era do Conhecimento


Você já deve ter ouvido a frase: “Vivemos na Era do Conhecimento”.

Concordo em parte com esta afirmação, na verdade acredito que vivemos na “Era da Informação”, afinal, podemos aprender sobre praticamente qualquer assunto na internet, porém, conseguir transformar todo esse conteúdo em conhecimento é o que faz a diferença.

Quantas vezes nos deparamos com algum problema no trabalho em que não temos a menor ideia de como resolver? Isso normalmente ocorre não por falta de formação das pessoas, mas porque falta a habilidade de associar aquilo que sabemos (informação) para chegar na melhor solução de um problema (conhecimento).

Para mim, a definição de conhecimento poderia ser: “A habilidade de interpretar um conjunto de informações dentro de um contexto e só tem utilidade se puder ser resgatado a qualquer momento.

A fábula a seguir serve perfeitamente para demonstrar o que acontece com quem não trabalha a competência de transformar informação em conhecimento e, ao final, indico qual acredito ser a principal característica do profissional da "Era do Conhecimento".


A história de duas pulgas
(autor desconhecido)

Duas pulgas estavam conversando e então uma comentou com a outra:
- Sabe qual é o nosso problema? Nós não voamos, só sabemos saltar. Daí
nossa chance de sobrevivência quando somos percebidas pelo cachorro é zero. É por isso que existem muito mais moscas do que pulgas.
E elas contrataram uma mosca como consultora, entraram num programa de reengenharia de vôo e saíram voando. Passado algum tempo, a primeira pulga falou para a outra:
- Quer saber? Voar não é o suficiente, porque ficamos grudadas ao corpo do cachorro e nosso tempo de reação é bem menor do que a velocidade da coçada dele. Temos de aprender a fazer como as abelhas, que sugam o néctar e levantam vôo rapidamente.
E elas contrataram o serviço de consultoria de uma abelha, que lhes ensinou a técnica do chega-suga-voa. Funcionou, mas não resolveu. A primeira pulga explicou o motivo:
- Nossa bolsa para armazenar sangue é pequena, por isso temos de ficar muito tempo sugando. Escapar, a gente até escapa, mas não estamos nos alimentando direito. Temos de aprender como os pernilongos fazem para se alimentar com aquela rapidez. E um pernilongo lhes prestou uma consultoria para incrementar o tamanho do abdômen. Resolvido, mas por poucos minutos. Como tinham ficado maiores, a aproximação delas era facilmente percebida pelo cachorro, e elas eram espantadas antes mesmo de pousar. Foi aí que encontraram uma saltitante pulguinha:
- Ué, vocês estão enormes! Fizeram plástica?
- Não, reengenharia. Agora somos pulgas adaptadas aos desafios do século XXI. Voamos, picamos e podemos armazenar mais alimento.
- E por que é que estão com cara de famintas?
- Isso é temporário. Já estamos fazendo consultoria com um morcego, que vai nos ensinar a técnica do radar. E você?
- Ah, eu vou bem, obrigada. Forte e sadia.
Era verdade. A pulguinha estava vistosa e bem alimentada. Mas as pulgonas não quiseram dar “a pata a torcer”:
- Mas você não está preocupada com o futuro?Não pensou em uma reengenharia?
- Quem disse que não?Contratei uma lesma como consultora.
- Hã? O que as lesmas têm a ver com pulgas?
- Tudo. Eu tinha o mesmo problema que vocês duas. Mas, em vez de dizer para a lesma o que eu queria, deixei que ela avaliasse a situação e me sugerisse a melhor solução. E ela passou três dias ali, quietinha, só observando o cachorro e então ela me deu o diagnóstico.
- E o que a lesma sugeriu fazer?
- "Não mude nada. Apenas sente no cocuruto do cachorro. É o único lugar que a pata dele não alcança"

Moral da história:
Você não precisa de uma reengenharia radical para ser mais eficiente… Muitas vezes, a GRANDE MUDANÇA é uma simples questão de reposicionamento.


Acredito que faltou às pulgas dessa fábula trabalhar a observação, simplesmente tomaram uma série de decisões frustradas baseadas somente naquilo que não sabiam fazer, faltou-lhes conhecimento.


segunda-feira, 18 de outubro de 2010

The book is on the Tableless

Quem nunca utilizou tabela para montar o layoult de uma página que atire a primeira pedra!

Com o crescimento explosivo da internet na década de 90, surgiu uma enorme demanda de profissionais dispostos a desenvolver sites, fazendo com que muitas pessoas se aventurassem nessa área sem qualificação, produzindo de forma desenfreada e sem critério algum uma grande quantidade de conteúdo. Na época não havia tanto problema se o site não tivesse qualidade, afinal, o importante para as empresas era "estar" na internet, não importando como.

Esse pensamento ficou no passado, já faz algum tempo que não basta apenas "estar" na internet, o site precisa ser de qualidade, pois o mesmo ajuda a formar a identidade das empresas e, em muitos casos, faz toda a diferença para o seu business.

E onde as tabelas entram nessa história? Simples, por ser na época o recurso mais rápido para a produção de layoult, criou-se a cultura de sempre utilizá-la para esse fim.

Foi então que surgiu um problema, os navegadores (programas utilizados para visualizar os sites) seguem algumas regras no momento de interpretar o código XHTML, entre essas regras está a de só exibir o conteúdo de uma tabela quando conseguir "ler" a  tag </table>, ou seja, quanto mais conteúdo tiver nossa página, mais demorado será a sua exibição.

Já quando trabalhamos com Tableless isso não ocorre, podemos distribuir o conteúdo do site em DIVs que serão exibidos gradativamente, fazendo com que o usuário espere menos pelo conteúdo, além de podermos trabalhar com a propriedade float do CSS, tornando a manutenção e reutilização do código muito mais prática.

Entendam que não é errado usar tabela em XHTML, ela tem sua utilidade na tabulação de dados, como por exemplo, na exibição de uma classificação de campeonato, porém deve limitar-se a isso, pois prejudicam a leitura que os mecanismos de busca fazem nos textos da página.

Quem ainda prefere utilizar tabela no layoult se justifica dizendo que é muito complexo seguir as regras de Tableless. Para essas pessoas sugiro que assista ao vídeo abaixo e tire suas próprias conclusões!

sexta-feira, 8 de outubro de 2010

1ª POSTAGEM

Seja bem vindo!


Vivemos em um mundo colaborativo, isso é fato! Pensando nisso este BLOG foi criado com o objetivo de compartilhar conhecimento e experiência sobre Lógica, Desenvolvimento WEB e Gestão de Projetos, assuntos relacionados à minha formação e experiência profissional.


Mas não pense que farei tudo sozinho!, você como leitor terá uma tarefa fundamental para que este ambiente alcance seus objetivos, é sua a responsabilidade de escolher os temas que serão abordados aqui!



Sugiro algumas regras para melhor organização dos conteúdos, são elas:
  • TODAS as sugestões de temas DEVERÃO ser colocadas na primeira postagem do BLOG através de comentários (assim consigo identificar quais os assuntos de maior interesse);
  • as sugestões DEVEM ser de assuntos relacionados à Lógica, Desenvolvimento WEB ou Gestão de Projetos, pelo menos no início serão esses os temas abordados;
  • leia todos os posts antes de sugerir, pode ser que a sua dúvida já tenha sido respondida;
  • NÃO EXISTE DÚVIDA RUIM, RUIM É FICAR COM DÚVIDA! Portanto não tenha medo de perguntar!
  • Quando for algum de meus alunos, por favor identifique-se informando a sua turma.


Espero que gostem do BLOG, fico no aguardo da sua sugestão!